目录
一、CSS之Transform
1.1、用法示例
/* Keyword values */ transform: none; /* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); /* Global values */ transform: inherit; transform: initial; transform: unset;
1.2、坐标轴/方向
x轴正方向为向右方向,y轴正方向为向下方向,z轴正方向为垂直纸面向外。将右手拇指指向坐标轴正方向上,旋转的正方向与其余四指的方向为反方向。
举例:
- translateX(10px)表示在x轴正方向上移动10px,即向右移动10px。
- translateY(10px)表示在y轴正方向上移动10px,即向下移动10px。
- translateZ(10px)表示在z轴正方向上移动10px,即垂直纸面向里移动10px。
- rotateZ(10deg)表示顺指针方向选择10deg,即右手拇指指向Z轴正方向(垂直纸面向外),向与四指相反的方向旋转10度。
- rotateY(10deg)表示将一个矩形的左边垂直纸面向外,右侧垂直纸面向里,这样子旋转10度。
- rotateX(10deg)表示将一个矩形的上面垂直纸面向里,下面垂直纸面向外,这样子旋转10度。
二、CSS之Animation
2.1、子属性
animation-name:动画名称。一般跟在@keyframes关键词后面。
animation-duration:指定动画完成一个循坏所需的时间。
animation-timing-function:指定动画执行的节奏。
animation-delay:指定动画的延迟时间。
animation-iteration-count:指定动画被执行的次数,可以通过infinite来指定无限循环。
animation-direction:指定是要正向播放动画还是反向播放动画。
- normal:正向播放。
- reverse:反向播放。
- alternate:先正向播放,再反向播放,再正向播放,以此类推。
- alternate-reverse:先反向播放,再正向播放,再反向播放,以此类推。
animation-fill-mode:指定在动画开始前或结束后是否要应用动画的样式。
- none:不会应用动画的样式。
- forwards:应用动画最后一帧的样式。
- backwards:应用动画第一帧的样式。
animation-play-state:动画的播放状态(暂停播放、恢复播放)。
- paused:暂停播放。
- running:恢复播放。
2.2、使用示例
分开写:
p { animation-duration: 3s; animation-name: slidein; animation-iteration-count: infinite; animation-direction: alternate; }
简写:
p { animation: 3s infinite alternate slidein; }
三、实现钟表效果
问题:写一段HTML+CSS,实现一个钟,里面有时针、分针、秒针在旋转。
代码实现(为方便查看效果,转速提高了100倍,比如秒针转一圈实际需要60s,在这里我们设定的是0.6秒转一圈):
<html> <head> <style> .clock { position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; border-radius: 50%; border: 1px solid #000; transform: translate(-50%, -50%); } .center { position: absolute; top: 50%; left: 50%; width: 0; height: 0; } .pointer { position: absolute; left: 0; transform: rotateZ(-90deg); height: 0px; animation: animation_rotate 864s linear infinite; } .hour { animation-duration: 864s; width: 40px; border-top: 6px solid #000; top: -3px; transform-origin: 3px 0%; } .minute { animation-duration: 36s; width: 60px; border-top: 4px solid #0f0; top: -2px; transform-origin: 2px 0%; } .second { animation-duration: 0.6s; width: 80px; border-top: 2px solid #00f; top: -1px; transform-origin: 1px 0%; } @keyframes animation_rotate { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } } </style> </head> <body> <div class="clock"> <div class="center"> <div class="pointer hour"></div> <div class="pointer minute"></div> <div class="pointer second"></div> </div> </div> </body> </html>
效果见下方视频: