CSS 마우스오버 애니메이션-HTML 튜토리얼-php.cn

CSS 마우스오버 애니메이션

韦小宝

풀어 주다： 2017-11-18 11:55:46

원래의

2488명이 탐색했습니다.

css는 마우스 오버 애니메이션을 구현하고, 무료 소스 코드를 제공하므로 참고용으로 공부하거나 사용할 수 있습니다~~

CSS 마우스오버 애니메이션

코드:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>PHP中文网--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 중국어 웹사이트에서 보실 수 있습니다. 팔로우하시면 잘 보실 수 있습니다~

관련 추천:

CSS를 사용하여 순환 진행률 표시줄 구현

css , 3D 입체 회전을 구현하는 jquery

css 움직이는 고양이 얼굴 구현

위 내용은 CSS 마우스오버 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!