首页 > 代码库 > 【CSS3】动画

【CSS3】动画

2024-09-18 11:23:28   223人阅读

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <div id="div1"><div id="div2"></div></div>
10 </body>
11 </html>
 1 #div1{
 2     width: 200px;
 3     height: 150px;
 4     background:pink;
 5     perspective: 900px;/*为子元素定义3D效果*/
 6 }
 7 #div2{
 8     width: 200px;
 9     height: 150px;
10     background:orange;
11 }
12 #div2:hover{
13     /*transform: translate(50px,1em);*//*右下平移*/
14     /*transform: translate(2em);*//*右平移*/
15     /*transform: translate(-50px);*//*左平移*/
16     /*transform: translate(0,-50px);*//*上平移*/
17     /*transform: translateX(60px);*/
18     /*transform: translateY(40px);*/
19     /*transform: none;*//*不偏移*/
20 
21     /*transform: scale(0.5,0.5);*//*小于1为缩小*/
22     /*transform: scale(1.5);*//*大于1为放大。当只有一个值时为x轴y轴同时缩放同样大小倍数*/
23     /*transform: scaleX(0.9);*/
24     /*transform: scaleY(0.7);*/
25 
26     /*transform: rotate(30deg);*//*单位角度。正值顺时针旋转，负值逆时针旋转。*/
27     /*transform: rotate(0.2rad);*//*单位弧度*/
28 
29     /*transform: skewX(30deg);*//*倾斜*/
30     /*transform: skewY(30deg);*/
31     /*transform: skew(30deg,30deg);*/
32 
33     /*transform: matrix(1,0,0.5,1,0,0);*//*第1个参数x轴缩放，第2个参数y轴倾斜，第3个参数x轴倾斜，第4个参数y轴缩放，第5个参数x轴平移，第6个参数y轴平移*/
34 
35     /*transform: scale(0.5,0.5) rotate(30deg);*/
36 
37     /*transform-origin: left top;*//*像素/百分比，x轴left、right、center，y轴top、bottom、center*/
38     /*transform-origin: 0 75px;*/
39     /*transform-origin: 50% 0;*/
40 
41     /*transform: rotate(0.3rad);*/
42     /*transform: rotate(30deg);*/
43 
44     /*transform: translate3d(0,0,-200px);*//*z轴参数为正则靠近，为负则远离*/
45     /*transform: translateZ(-300px);*/
46     /*transform: rotate3d(1,0,0,30deg);*//*绕x轴旋转*/
47     /*transform: rotate3d(0,1,0,30deg);*//*绕y轴旋转*/
48     /*transform: rotate3d(0,0,1,30deg);*//*绕z轴旋转*/
49     transform: rotate3d(1,1,1,30deg);/*绕xyz轴旋转*/
50 }

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="style.css">
 7 </head>
 8 <body>
 9     <ul>
10         <li class="li1">HTML5</li>
11         <li class="li1">CSS3</li>
12         <li class="li1">JavaScript</li>
13         <li class="li1">jQuery</li>
14     </ul>
15     <hr>
16     <ul>
17         <li>HTML5</li>
18         <li>CSS3</li>
19         <li>JavaScript</li>
20         <li>jQuery</li>
21     </ul>
22 </body>
23 </html>
 1 li{
 2     list-style: none;
 3     background:linear-gradient(to left,orange,pink);
 4     margin: 10px;
 5     padding: 10px;
 6     width: 90px;
 7     border-radius: 5px;
 8     text-shadow: rgba();
 9 }
10 .li1{
11     float: left;
12 }
13 hr{
14     clear: left;
15     border:2px dotted blue;
16 }
17 li:hover{
18     background:linear-gradient(to right,orange,pink);
19     transform-origin: left top;
20     transform: rotate(10deg);
21 }

 

【CSS3】动画


联系
我们