HTML5中动画实现的效果

最新推荐文章于 2024-02-15 10:42:11 发布

yinbucheng

最新推荐文章于 2024-02-15 10:42:11 发布

阅读量461

点赞数 1

本文链接：https://blog.csdn.net/yinbucheng/article/details/51444340

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <style>
       body{
           background-color:black;
       }
       .point{
           width:10px;
           height: 10px;
           background-color: white;
           /*圆角半径*/
           border-radius: 5px;
           /*位置有关的移动要有定位*/
           position: absolute;
           top:200px;
           /*动画关联动画名称执行时间线性执行无限执行*/
           animation:run 10s linear infinite;
       }
       /*定义关键帧动画 translateX,translateX*/
       @keyframes run{
           0%{}
           /*平移x轴y轴   放大倍数背景颜色透明的*/
           10%{transform:translate(150px,-50px) scale(3);background-color: blue;opacity: 0.5;}
           20%{transform:translate(300px,50px) scale(1);background-color: orange;opacity: 1;}
           30%{transform:translate(450px,-50px) scale(3);background-color: green;opacity: 0.5;}
           40%{transform:translate(600px,50px) scale(1);background-color: yellow;opacity: 1;}
           50%{transform:translate(750px,-50px) scale(3);background-color: red;opacity: 0.5;}
           60%{transform:translate(600px,50px) scale(1);background-color: plum;opacity: 1;}
           70%{transform:translate(450px,-50px) scale(3);background-color: gold;opacity: 0.5;}
           80%{transform:translate(300px,50px) scale(1);background-color: hotpink;opacity: 1;}
           90%{transform:translate(150px,-50px) scale(3);background-color: goldenrod;opacity: 0.5;}
           100%{transform:translate(0px,50px) scale(1);background-color: brown;opacity: 1;}
       }
   </style>
   <body>
       
       <div class='point'></div>
   </body>
</html>

yinbucheng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5中动画实现的效果

body{ background-color:black; } .point{ width:10px; height: 10px; background-color: white; /*圆角半径*/ bord
复制链接

扫一扫