css实现风扇风车转动动画效果代码
代码语言:html
所属分类:动画
代码描述:css使用keyframes实现风扇风车转动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title></title> <style> .main53d { -webkit-transition: All 1s 0s; -moz-transition: All 1s 0s; -ms-transition: All 1s 0s; margin-top: 200px; } .main53d ul { margin: 0; padding: 0; /* -webkit-perspective: 1600px; */ /* -webkit-transform-style: preserve-3d; */ /* position: relative; */ -webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); -moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); -ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); } .main53d ul li { list-style: none; position: absolute; width: 530px; height: 530px; left: 50%; top: 50%; margin-left: -200px; margin-top: -50px; } .main53d li img { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .main53d ul li:nth-of-type(1) { -webkit-transition: All 1.2s 0s; -moz-transition: All 1.2s 0s; -ms-transition: All 1.2s 0s; transition: All 1.2s 0s; -webkit-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); -moz-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); -ms-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); } .main53d ul li:nth-of-type(1) img { -webkit-animation: z 5s linear 0s infinite; -moz-animation: z 5s linear 0s infinite; -ms-animation: z 5s linear 0s infinite; animation: z 5s linear 0s infinite; } .main53d ul li:nth-of-type(2) { -webkit-animation: y 20s linear 0s infinite; -moz-animation: y 20s linear 0s infinite; -ms-animation: y 20s linear 0s infinite; animation: y 20s linear 0s infinite; } .main53d ul li:nth-of-type(3) { -webkit-animation: z 10s linear 0s infinite; -moz-animation: z 10s linear 0s infinite; -ms-animation: z 10s linear 0s infinite; animation: z 10s linear 0s infinite; } @-webkit-keyframes z { from { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0