HTML+CSS基础入门开发，双子星css水平移动相对动画特效

100人浏览 2024-12-01 12:18:34

大家好，本篇文章分享双子星水平位移相对动画特效，欢迎参考和指正。

效果图：

双子星水平位移相对动画特效

HTML代码：

<div class="tui-demo-6"></div>

CSS代码：

<style type="text/css">
 .tui-demo-6 {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 position: relative;
 }
 .tui-demo-6:before,.tui-demo-6:after {
 content: "";
 height: 30px;
 width: 30px;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: 0;
 animation: tui-demo-6 1.6s ease-in-out infinite;
 }
 .tui-demo-6:before {
 background: #FF5722;
 animation-delay: -0.8s;
 }
 .tui-demo-6:after {
 background: #FFB800;
 }
 @keyframes tui-demo-6 {
 0% {
 transform: translateX(70px);
 }
 50% {
 transform: translateX(0);
 }
 100% {
 transform: translateX(70px);
 }
 }
</style>

知识点：

animation：是CSS3的动画属性，这里把animation绑定到tui-demo-6元素上，并指定该动画需要1.6秒完成，ease-in-out则表示动画以低速开始和结束，infinite则表示无限次播放该动画。

@keyframes：该规则表示动画可以逐步从一个CSS样式改变为另一个CSS样式。这里0％是动画开头，100％是动画结束。

transform：该属性应用于2D元素或3D元素的转换，允许元素发生旋转，缩放，移动，倾斜等效果。translateX表示元素沿着水平方向或者X轴移动。

最后注意下浏览器兼容问题，-webkit-,-ms-或-moz-，有问题可以留言，大家一起学习HTML+CSS基础入门开发。