翻转动效
/* 图片旋转一圈 */.img-pic {position: absolute;top: 20px;left: 20px;animation: trunFrames 8s infinite;}@keyframes trunFrames {0% {transform: rotateY("0deg");}20% {transform: rotateY(1turn);}100% {transform: rotateY(1turn);}
上下跳动
可以通过定位、margin等值的更改来达到效果
/* 上下跳动 */.debounce-pic {position: absolute;top: 60px;left: 20px;animation: debounceFrame 2s infinite;}@keyframes debounceFrame {0% {top: 60px;}50% {top: 50px;}100% {top: 60px;}}
呼吸闪烁效果
.cicle {width: 10px;height: 10px;background: red;border-radius: 50%;animation: twinkling 1s infinite ease-in-out;position: absolute;left: 100px;top: 20px;}@keyframes twinkling {0% {opacity: 0.2;transform: scale(1);}50% {opacity: 0.5;transform: scale(1.12);}100% {opacity: 0.2;transform: scale(1);}}
循环旋转
.rotate {position: absolute;top: 100px;left: 100px;/*linear确保循环平滑 */animation: rotateFrames 2s linear infinite;}@keyframes rotateFrames {0% {transform: rotate(0deg);}100% {transform: rotate(1turn);}}
多元素围绕伪椭圆旋转
详细可见博客
<div class="topcenterbigitembox"><div class="topcenbox1"><div class="topcenboxitem topcenboxitem1">文字</div><div class="topcenboxitem topcenboxitem2">文字</div><div class="topcenboxitem topcenboxitem3">文字</div><div class="topcenboxitem topcenboxitem4">文字</div><div class="topcenboxitem topcenboxitem5">文字</div><div class="topcenboxitem topcenboxitem6">文字</div></div><div>//css
<style>
.topcenbox1 {width: 100%;height: 2rem;position: relative;
}
.topcenboxitem {display: flex;align-items: center;justify-content: center;font-size: 0.18rem;font-family: YouShe;// background-image: -webkit-linear-gradient(bottom, #90e1ff, #d6eff8, #e5f6fd);// -webkit-background-clip: text;// -webkit-text-fill-color: transparent;color: #C0E7FF;background: rgba(0, 133, 247, 0.22);position: absolute;width: 1rem;z-index: 99;
}.topcenboxitem1 {animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -5s infinite alternate,animY0 10s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,scale 20s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}.topcenboxitem2 {animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -8.333s infinite alternate,animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -3.333s infinite alternate,scale 20s cubic-bezier(0.36, 0, 0.64, 1) -3.333s infinite alternate;
}.topcenboxitem3 {animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -11.666s infinite alternate,animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -6.666s infinite alternate,scale 20s cubic-bezier(0.36, 0, 0.64, 1) -6.666s infinite alternate;
}.topcenboxitem4 {animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -14.999s infinite alternate,animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -9.999s infinite alternate,scale 20s cubic-bezier(0.36, 0, 0.64, 1) -9.999s infinite alternate;
}.topcenboxitem5 {animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -18.332s infinite alternate,animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -13.332s infinite alternate,scale 20s cubic-bezier(0.36, 0, 0.64, 1) -13.332s infinite alternate;
}.topcenboxitem6 {animation: animX0 10s cubic-bezier(0.36, 0, 0.64, 1) -21.665s infinite alternate,animY0 10s cubic-bezier(0.36, 0, 0.64, 1) -16.665s infinite alternate,scale 20s cubic-bezier(0.36, 0, 0.64, 1) -16.665s infinite alternate;
}
//animX0 和animY0 控制运动的位置
@keyframes animX0 {0% {left: 0.05rem;//最左边的位置}100% {left: 8.3rem;//最右边的位置}
}@keyframes animY0 {0% {top: 1rem;//最高}100% {top: 2.55rem;//最低}
}@keyframes scale {0% {transform: scale(0.6);opacity: 0.7;}50% {transform: scale(1);opacity: 1;}100% {transform: scale(0.6);opacity: 0.7;}
}
</style>
)
)