明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

css鼠標懸停動畫

發(fā)表時間：2024-05-08 來源：明輝站整理相關軟件相關文章人氣：

[摘要]css實現(xiàn)鼠標懸停動畫，免費提供源碼，可以研究參考或者拿去使用~~代碼：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>PHP中文網(wǎng)--CSS3鼠標懸停動...
css實現(xiàn)鼠標懸停動畫，免費提供源碼，可以研究參考或者拿去使用~~

JB58}STY)K7257O2A78$TBG.png

代碼：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>PHP中文網(wǎng)--CSS3鼠標懸停動畫</title>
		<style type="text/css">

			body {
				margin: 200px;
				text-align: center;
				font: 1em "微軟雅黑";
			}
			/*去掉li的點或者順序*/
			ul,ol,li {
				list-style-type: none;
				vertical-align: 0
			}
			/*去掉超鏈接底下的橫線*/
			a {
				color: #535353;
				text-decoration: none
			}
			/*添加滑過a標簽改變其文字顏色*/
			a:hover {
				color: #D40000;
				text-decoration: none
			}
			
			/* 效果CSS開始 */
	
			/*先讓里浮動到一起*/
			.nav li {
				position: relative;
				display: inline-block;
				margin-left: -50px;
				transition: all 0.4s linear;
			}
			/*把a標簽畫成圓圈*/
			.nav li a {
				display: inline-block;
				width: 90px;
				height: 90px;
				padding: 30px;
				border-radius: 50%;
				border-width: 8px;
				border-style: solid;
			}
			/*滑過li進行放大并把它放到最前面*/
			.nav li:hover {
				z-index: 11;
				transform: scale(1.1);
			}
			
			/*.nav li:hover a {
				text-decoration: none;
			}*/
			
			.nav li:hover span {
				transition: all 0.4s linear;
				animation: moveFromBottom 0.3s ease;
			}
			/*給圓圈加背景色和修改邊框顏色*/
			.nav li:nth-child(1) a {
				color: #4d9683;
				text-shadow: 0 1px 0 #9de3cf;
				border-color: #549e89;
				background-color: #51c9a7;
			}
			
			.nav li:nth-child(2) a {
				color: #be607e;
				text-shadow: 0 1px 0 #de8ba5;
				border-color: #e499b0;
				background-color: #e67b9c;
			}
			
			.nav li:nth-child(3) a {
				color: #5e9eb4;
				text-shadow: 0 1px 0 #adddec;
				border-color: #a2cfde;
				background-color: #7ec9e3;
			}
			
			.nav li:nth-child(4) a {
				color: #ba9d5e;
				text-shadow: 0 1px 0 #f5e0ad;
				border-color: #dcc999;
				background-color: #f0cd78;
			}
			
			.nav li:nth-child(5) a {
				color: #b468a2;
				text-shadow: 0 1px 0 #e8acd8;
				border-color: #d8abcd;
				background-color: #dd91cb;
			}
			/*鼠標滑過顯示高亮顏色*/
			.nav li:nth-child(1):hover a {
				color: #0f775c;
				text-shadow: 0 1px 0 #81e6c9;
				border-color: #0a8462;
				background-color: #00c18c;
			}
			
			.nav li:nth-child(2):hover a {
				color: #b12a55;
				text-shadow: 0 1px 0 #ff95b7;
				border-color: #ba335c;
				background-color: #ea5180;
			}
			
			.nav li:nth-child(3):hover a {
				color: #2883a2;
				text-shadow: 0 1px 0 #9cdef2;
				border-color: #4397b3;
				background-color: #55c1e5;
			}
			
			.nav li:nth-child(4):hover a {
				color: #ab8228;
				text-shadow: 0 1px 0 #ffe199;
				border-color: #b08f3e;
				background-color: #f8c64d;
			}
			
			.nav li:nth-child(5):hover a {
				color: #a33689;
				text-shadow: 0 1px 0 #ec97d6;
				border-color: #b7569f;
				background-color: #dd70c3;
			}
			
			.nav span {
				display: block;
				line-height: 90px;
				font-size: 30px;
				font-style: normal;
				position: relative; 
				/*width: 100px; 
				height: 90px; */
			}
			/*可以插入一些圖片或者小圖標，我就不插入了，你們可以自己試試*/
			/*.nav span:before {
			 	display: block;
			 	position: relative; 
			 	margin: auto;
			}
			.nav li:nth-child(1) span:before {
			 	content: "";
			 	width: 0px; 
				height: 0px; 
				border-right: 30px solid transparent; 
				border-top: 30px solid red; 
				border-left: 30px solid red; 
				border-bottom: 30px solid red; 
				border-top-left-radius: 30px; 
				border-top-right-radius: 30px; 
				border-bottom-left-radius: 30px; 
				border-bottom-right-radius: 30px; 
			}*/
			
			@keyframes moveFromBottom {
				from {
					transform: translateY(120%) scale(0.5);
					opacity: 0;
				}
				to {
					transform: translateY(0%) scale(1);
					opacity: 1;
				}
			}

		</style>
	</head>

	<body>
		
		<div class="page">
			<section class="demo">
				<nav class="nav">
					<ul>
						<li>
							<a href=""><span>Home</span></a>
						</li>
						<li>
							<a href=""><span>Phone</span></a>
						</li>
						<li>
							<a href=""><span>Wifi</span></a>
						</li>
						<li>
							<a href=""><span>Setting</span></a>
						</li>
						<li>
							<a href=""><span>Twitter</span></a>
						</li>
					</ul>
				</nav>
			</section>
		</div>
	</body>

</html>

免費拿去研究吧！更多好的源碼盡在PHP中文網(wǎng)，關注我們給你好看哦~

相關推薦：

用css實現(xiàn)圓形進度條

css 、jquery實現(xiàn)3d立體旋轉

css實現(xiàn)會動的貓臉

以上就是css鼠標懸停動畫的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！


網(wǎng)站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。

相關文章