大本赢彩票开户

码迷,xscp18.com
大本赢彩票开户 > Web开发 > 详细

css3实现椭圆轨迹旋转

时间:2019-09-01 01:44:30      阅读:68      评论:0      收藏:0      [点我收藏+]

标签:lex   nim   css   size   image   top   transform   animation   nsf   

css3实现椭圆轨迹旋转

实现效果

技术图片

X轴Y轴在一个矩形内移动

做斜线运动

 

 1 。ball {
 2     position: absolute;
 3     animation: 
 4       animX 2s linear  infinite alternate,
 5       animY 2s linear  infinite alternate
 6   }
 7 @keyframes animX{
 8       0% {left: 0px;}
 9     100% {left: 500px;}
10 }
11 @keyframes animY{
12       0% {top: 0px;}
13     100% {top: 300px;}
14 }

 

技术图片

设置动画延时

设置Y轴延时为动画时长的一半, 运动轨迹变成菱形

1  .ball {
2     animation: 
3       animX 2s linear 0s infinite alternate,
4       animY 2s linear -1s infinite alternate
5   }

技术图片

设置三次贝塞尔曲线

1  .ball {
2     animation: 
3       animX 2s  cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate,
4       animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate
5   }

技术图片

缩小放大

为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和

 1  .ball1 {
 2     animation: 
 3       animX 2s  cubic-bezier(0。36, 0, 0。64, 1) -1s infinite alternate,
 4       animY 2s cubic-bezier(0。36, 0, 0。64, 1) 0s infinite alternate,
 5       scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
 6   }
 7  @keyframes scale {
 8  
 9     0% {
10       transform: scale(0。7)
11     }
12     50% {
13       transform: scale(1)
14     }
15     100% {
16       transform: scale(0。7)
17    }
18  }

 

技术图片

 

css3实现椭圆轨迹旋转

标签:lex   nim   css   size   image   top   transform   animation   nsf   

原文地址:https://www.cnblogs.com/---godzilla---/p/11441222.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
           
© 2014 xscp18.com 版权所有 京ICP备13008772号-2
迷上了代码!
九虹彩票开户 满堂彩开户 c868彩票开户 凤彩彩票开户 完美彩票开户 永仁彩票开户 四季彩票开户 皇族彩票开户 伍彩彩票开户 永诚彩票开户