首页 > > 网页制作 > css >

6.动画

2020-05-24 16:00:16来源：博客园阅读 ()

6.动画

# 6.动画 - 1. transition 过渡 transition-property:all;//监听属性 transition-duration:1s;//过渡时间 transition-timing-function:linear;//运动速率 transition-delay:1s;//过渡延迟时间 ```html <style> div{ width:100px; height:100px; background-color:#008c8c; transition:width 2s linear 1s; } div:hover{ width:200px; height:200px; } </style> <div></div> ``` transition-timing-function:cubic-bezier(x1, y1, x2, y2);//x值必须（0，1） - 2. animation animation-name//名称 animation-duration//执行时间 animation-timing-function//运动速率 animation-delay//延迟时间 animation-iteration-count:infinite;//执行无限次，默认值为1 animation-direction:reverse;//反向运动，默认值normal animation-play-state:paused;//不推荐使用 animation-fill-mode:none | forwards | backwards | both;//forwards:在动画运动结束后，保持动画最后一帧的状态;backwards:在动画运动开始前，保持动画第一帧的状态;both:在动画结束胡，保持动画最后一帧的状态, 在动画开始前，保持动画第一帧的状态; ```html <style> @keyframes run{ 0%{ left:0; top:0; } 25%{ left:100px; top:0; } 50%{ left:0; top:100px; } 75%{ left:0; top:0; } 100%{ left:0; top:0; } } div{ position:absolute; width:100px; height:100px; background-color:red; animation:run 4s; } </style> ``` - 3. step steps(1, end); === step-end; steps(1, start); === step-start; ```html <style> @keyframes change-color{ 0% { background-color:red; } 25% { background-color:green; } 50% { background-color:blue; } 75% { background-color:black; } 100% { background-color:#fff; } } div{ width:100px; height:100px; background-color:red; animation:change-color 4s steps(1, end);/*steps(几步执行，) start:保留下一帧状态，直到这段动画时间结束 end:保留当前帧状态，直到这段动画时间结束 */ } </style> ``` - 4. transform rotate: transform:rotate(0deg);//旋转度数 taransform-origin:0 0;//旋转中心点 transform:rotateX(0deg);//围绕X轴旋转 transform:rotateY(0deg);//围绕Y轴旋转 transform:rotateZ(0deg);//围绕Z轴旋转 transform:rotate3d(x,y,z,angle);//围绕自定义矢量旋转 scale: 伸缩的是此元素的变化坐标轴的刻度（若x为2，则原来x轴的100被拉伸为200的长度，但是现在100的刻度代表200的长度。就像皮筋一样上面标上刻度100，被拉长了2倍，但是皮筋上的刻度未变，但现在100刻度代表了200的长度一样。所以再对x轴进行长度操作如平移100刻度，实际上平移了200的长度） scale(x, y);//x.横坐标伸缩的倍数;y.纵坐标伸缩的倍数; scalex(); scaley(); scalez(); scale3d(); 可以叠加操作 transform:scale(.5, .5) scale(3, 3);//实际操作倍数0.5*3 skew: 倾斜 transform:skew(xdeg, ydeg) 不仅倾斜了，坐标轴刻度也被拉伸了，因为倾斜过后，元素高度保持不变倾斜的是坐标轴而不是元素本身，若设置了xdeg那么y轴角度变化，若设置了ydeg那么x轴角度发生变化。 xdeg:表示x轴扭曲度 x扭曲 = y旋转+y伸缩 x取值为正，x轴不动，y轴朝着x轴正方向倾斜x度数 x取值为负，x轴不动，y轴朝着x轴负方向倾斜x度数 ydeg:表示x轴扭曲度 y扭曲 = x旋转+x伸缩 y取值为正，y轴不动，x轴朝着y轴正方向倾斜x度数 y取值为负，y轴不动，x轴朝着y轴负方向倾斜y度数

translate:平移 transform:translate(xpx,ypx);//平移xpx和ypx transform:translatex(xpx); transform:translatey(ypx); transform:translatez(zpx); 元素居中，不知道元素的宽度： left:50%; transform:translatex(-50%); 用于父元素的属性 perspective:景深(按照投影理解，比较好理解) 取值1到正无穷px，默认值为0 perspective-origin: 300px 200px;//从元素左上角开始计算用于自身元素的属性 transform:perspective(800px); 用于父元素属性 transform-style:preserve-3d;//渲染3d效果用于自身元素的属性： backface-visibility：visible | hidden;//背面元素是否可见 ```html  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0; padding:0; } :root, body{ height:100%; } body{ perspective:2000px; transform-style:preserve-3d; } @keyframes run{ 0%{ transform:translate(-50%, -50%) rotatey(0deg); } 100%{ transform:translate(-50%, -50%) rotatey(360deg); } } .wrapper{ position: absolute; left:calc(50%); top:calc(50%); transform:translate(-50%, -50%); width:300px; height:300px; transform-style:preserve-3d; animation:run 10s infinite; } .image{ position:absolute; background-color:#fff; width:300px; height:300px; } .image:nth-of-type(1){ transform:rotatey(45deg) translateZ(800px); background-image:url(1.jpg); } .image:nth-of-type(2){ transform:rotatey(90deg) translateZ(800px); background-image:url(2.jpg); } .image:nth-of-type(3){ transform:rotatey(135deg) translateZ(800px); background-image:url(3.jpg); } .image:nth-of-type(4){ transform:rotatey(180deg) translateZ(800px); background-image:url(4.jpg); } .image:nth-of-type(5){ transform:rotatey(225deg) translateZ(800px); background-image:url(5.jpg); } .image:nth-of-type(6){ transform:rotatey(270deg) translateZ(800px); background-image:url(6.jpg); } .image:nth-of-type(7){ transform:rotatey(315deg) translateZ(800px); background-image:url(7.jpg); } .image:nth-of-type(8){ transform:rotatey(360deg) translateZ(800px); background-image:url(8.jpg); } </style> </head> <body> <div class="wrapper"> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div> <div class="image"></div> </div> <script> document.body.onmousemove = function(e){ this.style.perspectiveOrigin = "" + e.pageX + "px " + e.pageY + "px"; } </script> </body> </html> ``` 以上是markdown格式的笔记

原文链接:https://www.cnblogs.com/lanshanxiao/p/12952714.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有