CSS高级

本文主要是介绍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         }

这篇关于CSS高级的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！