CSS background color of the dynamic transformation
Others
2019-12-14 01:39:34
views: null
The first renderings
HTML code:
1
2
3
4
5
6
7
8
9
|
<div class="header">
<h1>GCCHRN'S BLOG</h1>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">首页</a></li>
<li role="presentation"><a href="#">分类</a></li>
<li role="presentation"><a href="#">归档</a></li>
<li role="presentation"><a href="#">关于</a></li>
</ul>
</div>
|
CSS code:
. 1
2
. 3
. 4
. 5
. 6
. 7
. 8
. 9
10
. 11
12 is
13 is
14
15
16
. 17
18 is
. 19
20 is
21st largest column CSS background color of the converted dynamic PAN>
22 is
23 is
24
25
26 is
27
28
29
30
31 is
32
|
<style type = "text / CSS">
.header {
padding: 40px 30px 60px 30px;
text-align = left: Center;
Animation: mymove 5S Infinite; / Animation * Views time * /
Animation-direction: Alternate; / * if the loop alternately reversed play the animation * /
/ * Safari and the Chrome: * /
-webkit-animation: mymove 5S Infinite;
}
@keyframes mymove
{
0% {background:#87CEFF;}
25% {background:#54FF9F;}
50% {background:#7CCD7C;}
75% {background:#63B8FF;}
100% {background:#00FFFF;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
0% {background:#87CEFF;}
25% {background:#54FF9F;}
50% {background:#7CCD7C;}
75% {background:#63B8FF;}
100% {background:#00FFFF;}
}
</style>
|
- Only to find that I was so fond of the front,
- Especially for this dynamic effect,
- really like,
- Can not resist,
- This is only the beginning,
- Mainly to see their own record,
- Then little by little progress,
- Make visible progress!
Origin www.cnblogs.com/lijianming180/p/12037921.html