CSS高级

1.transform()方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

1 transform: translate(100px,200px);   /*translate移动*/

 transform-origin

transform-origin: 50% 0; /*X轴Y轴坐标,改变转的焦点*/

2.rotate()方法

rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 <Canvas> 元素本身。注意，这个角度是用弧度指定的。

1  @keyframes move {
2             0%{
3                 transform: rotate(0);  }
4                 100%{
5                     transform: rotate(360deg);
6                 }
7         }

1  @keyframes fanZhuan {
2             from{
3                 transform: rotate(360deg);
4             }
5             to {
6                 transform: rotate(0);
7             }
8         }

 

3.animation属性

1  #div1{
2             width: 300px;
3             height: 300px;
4             margin: 100px auto 0;
5             background: lightcoral;
6             animation: move 2s linear 2s infinite; /* linear 匀速  infinite 无限的*/
7         }

4.transition属性

 1 #box{
 2             width: 475px;
 3             height: 308px;
 4             border: 5px solid red;
 5             margin: 100px auto 0;
 6             overflow: hidden;/*超出部分隐藏*/
 7         }
 8         #box>img{
 9             width: 100%;
10             height: 100%;
11             transition: all 2s;
12             /*all也可以改成transform*/
13             /*谁动给谁加时间*/
14         }
15         #box>img:hover{
16             transform: scale(1.2); /*放大倍数*/
17         }

 

标签：box,rotate,2s,100px,高级,transform,height,CSS
来源： https://www.cnblogs.com/luyanyan/p/15582856.html