CSS 之動態變換背景顏色

本文轉載自查看原文 2019-12-14 00:24 937

先上效果圖

HTML代碼：

<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代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21大專欄  CSS 之動態變換背景顏色pan>
22
23
24
25
26
27
28
29
30
31
32

<style type="text/css">  
    .header{          
		padding: 40px 30px 60px 30px;  
		text-align: center;  
		animation:mymove 5s infinite; /*animation 時間 播放次數*/  
		animation-direction:alternate; /*是否循環交替反向播放動畫*/ 
		/*Safari 和 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>

才發現我如此喜歡前端，
特別是對這種動態效果，
特別喜歡，
無法抗拒，
這僅僅是開始而已，
主要還是記錄下來給自己看的，
然后一點一點進步，
讓進步看得見！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3控制字體動態變換顏色 css背景顏色動態漸變實例 css渲染（三）顏色與背景 CSS去掉背景顏色 JS中通過按鈕隨意變換背景顏色網頁動態背景——隨鼠標變換的動態線條動態改變div背景顏色 css3 動態背景 css去除已有的背景顏色 css設置背景顏色的亮度