css动画和渐变

Posted 2020-06-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css动画和渐变相关的知识，希望对你有一定的参考价值。

变形：

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

元素的变形：transform

　　　　　　　　transform:none | <transform-function>

　　　　　　　　　　none：默认值，不设置变形

　　　　　　　　　　<transform-function>：设置变形函数，如旋转rotate()、缩放scale()、移动translate()、倾斜skew()、矩阵变形matrix()。

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>动画之简单变化</title>
 6     <style type="text/css">
 7         ul {
 8             margin-top: 30px;
 9             list-style: none;
10             line-height: 25px;
11             font-family: Arial;
12             font-weight: bold;
13         }
14         li {
15             width: 120px;
16             float: left;
17             margin: 2px;
18             border: 1px solid #cccccc;
19             background-color: #e4e4e4;
20             text-align: left;
21         }
22         li:hover {
23             background-color: #999999;
24         }
25         a {
26             display: block;
27             padding: 5px 10px;
28             color: #333333;
29             /*text-decoration 属性规定添加到文本的修饰。如下划线等*/
30             text-decoration: none;
31             /*定义原点 */
32             transform-origin:0 0;
33         }
34         li:nth-child(1):hover a{
35             background-color: #f90;
36             /*字体颜色 */
37             color: #FF3321;
38             /*旋转 */
39             transform:rotate(30deg);
40         }
41         li:nth-child(2):hover a{
42             background-color: #f90;
43             /*字体颜色 */
44             color: #FF3321;
45             /*移动 */
46             transform:translate(5px,5px);
47         }
48         li:nth-child(3):hover a{
49             background-color: #f90;
50             /*字体颜色 */
51             color: #FF3321;
52             /*缩放 */
53             transform:scale(0.8,1.5);
54         }
55         li:nth-child(4):hover a{
56             background-color: #f90;
57             /*字体颜色 */
58             color: #FF3321;
59             /*倾斜 */
60             transform:skew(30deg);
61         }
62     </style>
63 </head>
64 <body>
65 <ul>
66     <li><a href="#">html 5</a></li>
67     <li><a href="#">css 3</a></li>
68     <li><a href="#">flash</a></li>
69     <li><a href="#">ps</a></li>
70 </ul>
71 </body>
72 </html>

View Code

旋转：rotate(<angle>)

　　　　　angle：旋转角度，代为deg，正值顺时针，负值逆时针。

缩放和翻转：scale(<x>,<y>)

　　　　　　　　<x>：水平方向放大倍数

　　　　　　　　<y>：垂直方向放大倍数

　　　　　　　注释：中间用逗号隔开数值，大于1表示放大，小于1表示缩放。为负数表示翻转。如果y值省略，会水平方向和垂直方向上放大或缩放相同倍数。

移动：translate(<dx>,<dy>)

　　　　　　　　<dx>：元素在水平方向上的偏移距离

　　　　　　　　<dy>：元素在垂直方向上的偏移距离

　　　　　　　注释：<dx><dy>可为负值或带小数的的值。偏移方向不解释。若<dy>的值省略，则垂直偏移距离为0

倾斜：skew(<x-angle>,<y-angle>)

　　　　　　　　<x-angle>：元素在空间x轴上的倾斜角度

　　　　　　　　<y-angle>：元素在空间y轴上的倾斜角度

　　　　　　　注释：<x-angle><y-angle>单位deg，值为正，顺时针，值为负，逆时针。若<y-angle>值省略，则在垂直方向上的倾斜角度为0deg

矩阵变形：省略吧先，以后研究。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>过渡效果</title>
 6     <style type="text/css">
 7         div {
 8             margin: 100px auto;
 9             width: 200px;
10             height: 100px;
11             background-color: #00f;
12             /*总写 */
13             /*transition:all 1000ms linear 500ms;*/
14             /*分写 */
15             transition-propety:all;
16             transition-duration:1s;
17             transition-dely:0.5s;
18             transition-tinming-funtion:liner;
19         }
20         div:hover {
21             background-color: #f90;
22             transform:rotate(200deg);
23         }
24     </style>
25 </head>
26 <body>
27 <div></div>
28 </body>
29 </html>