CSS3中伪元素::before和::after 制作按钮的开关门效果

最新推荐文章于 2024-08-10 16:57:53 发布

射手座的程序媛

最新推荐文章于 2024-08-10 16:57:53 发布

阅读量562

点赞数 10

分类专栏：前端文章标签： css3 前端 css

本文链接：https://blog.csdn.net/ly121862/article/details/134962935

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

伪元素简介

CSS中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。另外content属性是必填的属性。

::after在元素内部的后面插入内容。

CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

伪元素妙用

制作按钮的开关门效果:

效果图

html代码

在body里面嵌入 div ,里面增加一个超链接标签

<body>
		
		<div>
			<a href="#" class="nv-btn">Now</a>
		</div>
		
</body>

css代码

这里使用了动画过渡, z-index,透明度改变

<style>
		body{
			background-color: aqua;
		}
		  .nv-btn{
			  line-height: 50px;
			  color: #FFFFFF;
			  text-decoration: none;
			  background-color: #000000;
			  font-weight: 600;
			  width: 100px;
			  display: inline-block;
			  text-align: center;
			  text-transform: uppercase;
			  position: relative;
			  transition: all .30s linear;
			  	overflow: hidden;
			z-index:2;
		  }
		 
		.nv-btn::before{
			background-color: #fff;
			content: "";
			position: absolute;
			left: 0px;
			top: 0px;
			height: 100%;
			width:0px;
			transform: skewX(-30deg);
			
			transition: all .30s linear;
			 z-index:-1;
		}
		
		.nv-btn::after{
			content: "";
			background-color: #fff;
			content: "";
			position: absolute;
			right: 0px;
			top: 0px;
			height: 100%;
			width:0px;
			transform: skewX(-30deg);
			transition: all .30s linear;
			 z-index:-1;
			
		}
		.nv-btn:hover{
			color: #30ddb6;
			background-color: #30ddb6;
		}
		.nv-btn:hover::before{
			left:15px;
			opacity: 1;
			width:40px;
		}
		.nv-btn:hover::after{
			right:15px;
			opacity: 1;
			width:40px;
		}
		</style>

完整页面代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			background-color: aqua;
		}
		  .nv-btn{
			  line-height: 50px;
			  color: #FFFFFF;
			  text-decoration: none;
			  background-color: #000000;
			  font-weight: 600;
			  width: 100px;
			  display: inline-block;
			  text-align: center;
			  text-transform: uppercase;
			  position: relative;
			  transition: all .30s linear;
			  	overflow: hidden;
			z-index:2;
		  }
		 
		.nv-btn::before{
			background-color: #fff;
			content: "";
			position: absolute;
			left: 0px;
			top: 0px;
			height: 100%;
			width:0px;
			transform: skewX(-30deg);
			
			transition: all .30s linear;
			 z-index:-1;
		}
		
		.nv-btn::after{
			content: "";
			background-color: #fff;
			content: "";
			position: absolute;
			right: 0px;
			top: 0px;
			height: 100%;
			width:0px;
			transform: skewX(-30deg);
			transition: all .30s linear;
			 z-index:-1;
			
		}
		.nv-btn:hover{
			color: #30ddb6;
			background-color: #30ddb6;
		}
		.nv-btn:hover::before{
			left:15px;
			opacity: 1;
			width:40px;
		}
		.nv-btn:hover::after{
			right:15px;
			opacity: 1;
			width:40px;
		}
		</style>
	</head>
	<body>
		
		<div>
			<a href="#" class="nv-btn">Now</a>
		</div>
		
	</body>
</html>

将以上代码, 放入到一个html文件中, 通过浏览器打开即可看到效果.