因为不同浏览器内核的不同所以会产生浏览器兼容性问题
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset=‘utf-8‘/>
5 <title>背景颜色的变换</title>
6 <style type="text/css">
7 div{
8 width: 200px;
9 height: 200px;
10 background: blue;
11 animation:myfirst 5s;
12 -moz-animation:myfirst 5s; /*火狐里面*/
13 -webkit-animation:myfirst 5s; /*谷歌和safair里面*/
14 -o-animation:myfirst 5s; /*欧朋浏览器*/
15 }
16 /*火狐里面*/
17 @-moz-keyframes myfirst{
18 0%{background: blue}
19 25%{background: red}
20 50%{background: yellow}
21 100%{background: green}
22 }
23 /*谷歌和Safari里面*/
24 @-webkit-keyframes myfirst{
25 0%{background: blue}
26 25%{background: red}
27 50%{background: yellow}
28 100%{background: green}
29 }
30 /*欧朋浏览器*/
31 @-o-keyframes myfirst{
32 0%{background: blue}
33 25%{background: red}
34 50%{background: yellow}
35 100%{background: green}
36 }
37 </style>
38 </head>
39 <body>
40 <div><h1>内容是什么</h1></div>
41 </body>
42 </html>
43
44
45
46
47 <!-- <!DOCTYPE html>
48 <html>
49 <head>
50 <style>
51 div
52 {
53 width:200px;
54 height:200px;
55 background:red;
56 animation:myfirst 5s;
57 -moz-animation:myfirst 5s; /* Firefox */
58 -webkit-animation:myfirst 5s; /* Safari and Chrome */
59 -o-animation:myfirst 5s; /* Opera */
60 }
61
62 @keyframes myfirst
63 {
64 0% {background:red;}
65 25% {background:yellow;}
66 50% {background:blue;}
67 100% {background:green;}
68 }
69
70 @-moz-keyframes myfirst /* Firefox */
71 {
72 0% {background:red;}
73 25% {background:yellow;}
74 50% {background:blue;}
75 100% {background:green;}
76 }
77
78 @-webkit-keyframes myfirst /* Safari and Chrome */
79 {
80 0% {background:red;}
81 25% {background:yellow;}
82 50% {background:blue;}
83 100% {background:green;}
84 }
85
86 @-o-keyframes myfirst /* Opera */
87 {
88 0% {background:red;}
89 25% {background:yellow;}
90 50% {background:blue;}
91 100% {background:green;}
92 }
93 </style>
94 </head>
95 <body>
96
97 <div></div>
98
99 <p><b>注释：</b>当动画完成时，会变回初始的样式。</p>
100
101 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
102
103 </body>
104 </html>
105 -->
备注部分是w3school上面的例子
时间： 2024-10-21 04:33:51