css边框流光溢彩,CSS3 流光溢彩的宝石蓝小圆球-优快云博客

本文介绍了一个使用CSS实现的精美动画案例，包括多个元素的位置布局、旋转动画及缩放效果等。通过不同层级的子元素与关键帧动画的配合，演示了如何创建动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body {

padding: 0px;

background-color: #002031;

}

.small2 {

position: absolute;

height: 100px;

width: 100px;

background-color: transparent;

top: 50vh;

left: 50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.small1 {

position: absolute;

height: 100px;

width: 100px;

top: 50vh;

left: 50%;

-webkit-transform-origin: center;

-ms-transform-origin: center;

transform-origin: center;

-webkit-transform: translate(-50%, -50%) rotate(45deg);

-ms-transform: translate(-50%, -50%) rotate(45deg);

transform: translate(-50%, -50%) rotate(45deg);

background-color: transparent;

}

.bigcon {

position: absolute;

height: 95px;

width: 95px;

top: 50vh;

left: 50%;

-webkit-transform-origin: center;

-ms-transform-origin: center;

transform-origin: center;

-webkit-transform: translate(-50%, -50%) rotate(-45deg);

-ms-transform: translate(-50%, -50%) rotate(-45deg);

transform: translate(-50%, -50%) rotate(-45deg);

background-color: transparent;

-webkit-animation: bigcon 2s infinite linear;

animation: bigcon 2s infinite linear;

-webkit-animation-delay: 0.25s;

animation-delay: 0.25s;

}

.ball {

border-radius: 50%;

position: absolute;

}

.small {

width: 25px;

height: 25px;

-webkit-animation: small 2s infinite ease;

animation: small 2s infinite ease;

box-shadow: 0px 2px rgba(0, 0, 0, 0.3);

background-color: #46b9ff;

}

.small:nth-child(1) {

top: 0%;

left: 0%;

}

.small:nth-child(2) {

top: 0%;

right: 0%;

}

.small:nth-child(3) {

right: 0%;

bottom: 0%;

}

.small:nth-child(4) {

bottom: 0%;

left: 0%;

}

.big {

width: 20px;

height: 20px;

border-radius: 15px;

box-shadow: 0px 0px 10px #54f7f8, 0px 0px 20px #54f7f8, 0px 0px 30px #54f7f8, 0px 0px 50px #54f7f8, 0px 0px 60px #54f7f8;

z-index: 1;

background-color: #54f7f8;

-webkit-animation: bigball 1s infinite linear;

animation: bigball 1s infinite linear;

}

.smallball1 {

-webkit-animation-delay: -1.75s;

animation-delay: -1.75s;

}

.smallball6 {

-webkit-animation-delay: -1.5s;

animation-delay: -1.5s;

}

.smallball2 {

-webkit-animation-delay: -1.25s;

animation-delay: -1.25s;

}

.smallball7 {

-webkit-animation-delay: -1s;

animation-delay: -1s;

}

.smallball3 {

-webkit-animation-delay: -0.75s;

animation-delay: -0.75s;

}

.smallball8 {

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s;

}

.smallball4 {

-webkit-animation-delay: -0.25s;

animation-delay: -0.25s;

}

.smallball5 {

-webkit-animation-delay: 0s;

animation-delay: 0s;

}

@-webkit-keyframes bigcon {

0% {

-webkit-transform-origin: center;

transform-origin: center;

-webkit-transform: translate(-50%, -50%) rotate(45deg);

transform: translate(-50%, -50%) rotate(45deg);

}

100% {

-webkit-transform-origin: center;

transform-origin: center;

-webkit-transform: translate(-50%, -50%) rotate(405deg);

transform: translate(-50%, -50%) rotate(405deg);

}

@keyframes bigcon {

0% {

-webkit-transform-origin: center;

transform-origin: center;

-webkit-transform: translate(-50%, -50%) rotate(45deg);

transform: translate(-50%, -50%) rotate(45deg);

}

100% {

-webkit-transform-origin: center;

transform-origin: center;

-webkit-transform: translate(-50%, -50%) rotate(405deg);

transform: translate(-50%, -50%) rotate(405deg);

}

@-webkit-keyframes small {

0% {

-webkit-transform: scale(1);

transform: scale(1);

background-color: #46b9ff;

}

10% {

-webkit-transform: scale(1.3);

transform: scale(1.3);

background-color: #54f7f8;

}

15% {

-webkit-transform: scale(1);

transform: scale(1);

}

25% {

-webkit-transform: scale(1);

transform: scale(1);

background-color: #46b9ff;

}

100% {

-webkit-transform: scale(1);

transform: scale(1);

background-color: #46b9ff;

}

@keyframes small {

0% {

-webkit-transform: scale(1);

transform: scale(1);

background-color: #46b9ff;

}

10% {

-webkit-transform: scale(1.3);

transform: scale(1.3);

background-color: #54f7f8;

}

15% {

-webkit-transform: scale(1);

transform: scale(1);

}

25% {

-webkit-transform: scale(1);

transform: scale(1);

background-color: #46b9ff;

}

100% {

-webkit-transform: scale(1);

transform: scale(1);

background-color: #46b9ff;

}