导航条飞入飞出

最新推荐文章于 2021-12-17 13:15:56 发布

秋水易色

最新推荐文章于 2021-12-17 13:15:56 发布

阅读量288

点赞数

分类专栏： css3 文章标签：导航

本文链接：https://blog.csdn.net/weixin_36004294/article/details/53379882

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Home</title>
	
	
</head>
<style>
	a{text-decoration:none;font-size:1.2em;color:#333;}
	li{list-style:none;float:left;margin:0 2.2em}		
	




	
.cl-effect-16 a::before {
	color: #fc4f6b;
	content: attr(data-hover);
	position: absolute;
	opacity: 0;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	-webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-o-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-ms-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	-o-transition: transform 0.3s, opacity 0.3s;
	-ms-transition: transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	pointer-events: none;
}


.cl-effect-16 a:hover::before,
.cl-effect-16 a:focus::before {
	-webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-o-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	-ms-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);
	opacity: 1;
}
.cl-effect-16 a.active{
	color:red;
}
</style>


<body>


<div>
	<ul class="cl-effect-16">
		<li ><a href="#" class="active">Home</a></li>
		<li><a href="#" data-hover="About">About</a></li>
		<li><a href="#" data-hover="Services">Services</a></li>
		<li><a href="#" data-hover="Gallery">Gallery</a></li>
		<li><a href="#" data-hover="Contact">Contact</a></li>
	</ul>
</div>




</body>
</html>

秋水易色

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航条飞入飞出

Home a{text-decoration:none;font-size:1.2em;color:#333;} li{list-style:none;float:left;margin:0 2.2em} .cl-effect-16 a::before { color: #fc4f6b; content: attr(data-hover); positio
复制链接

扫一扫