CSS3实现绕椭圆旋转效果的思路和方法是什�
Admin 2022-06-08 群英技术资�
最近需要实现如下效�
最开始用css3D旋转写,只能实现如下效果
没办法把所有的圆转向正面,不知道是我的操作不对,还�3d旋转无法实现,有知道的大佬还请赐教啊
没法�3d实现只能转向2d了,只要实现按椭圆旋转就ok�
X轴Y轴在一个矩形内移动
路径为斜�
.ball { animation: animX 2s linear infinite alternate, animY 2s linear infinite alternate } @keyframes animX{ 0% {left: 0px;} 100% {left: 500px;} } @keyframes animY{ 0% {top: 0px;} 100% {top: 300px;} }
设置动画延迟
设置Y轴延迟为动画时长的一半,可以看到运动轨迹变成菱形了,有点感觉�
.ball { animation: animX 2s linear 0s infinite alternate, animY 2s linear -1s infinite alternate }
设置三次贝塞尔曲�
.ball { animation: animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate }
缩小放大
为了看起来有立体感添�scale
属�,scale动画应该是X轴和Y轴的时间总和
.ball1 { animation: animX 2s cubic-bezier(0.36, 0, 0.64, 1) -1s infinite alternate, animY 2s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate, scale 4s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate; } @keyframes scale { 0% { transform: scale(0.7) } 50% { transform: scale(1) } 100% { transform: scale(0.7) } }
大功告成�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
在css中,可以利用“background-repeat”属性让背景图片不平铺,该属性用于设置背景图片的平铺模式,只需要给元素添加“background-repeat:no-repeat;”样式,即可让背景图片不平铺显示�
相信有一点CSS基础的朋友应该都可以轻松实现一个css三角形,那么如果我们想要更酷炫的三角形效果要怎样做呢?其实我们可以用CSS3来做一个三角形叠加放大的特效,实现效果及代码如下,感兴趣的朋友可以参考�
这篇文章主要介绍了纯css3使用vw和vh实现自适应的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
实现的原来就是:在一个宽高为0像素的块状元素中设置border属性,例如.box{width:0px;height:0;border-bottom:50px#F00solid;border-left:50px#03Fsolid;border-right:50px#F90solid;border-top:50px#6C0solid;}在浏览器中的显示如图:这样就有上下左右四个三角形了,再把除了要用的三角外的其�3个三角(border)颜色设� ...
这篇文章主要介绍了详解css栅格系统在项目中的灵活运用的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078