:before 和 :after的多用途实践 — 特效篇(2)

安康全是山

于 2018-12-13 17:33:31 发布

阅读量161

点赞数

分类专栏： Css样式技巧

Css样式技巧专栏收录该内容

11 篇文章 0 订阅

订阅专栏

转自：https：
//blog.csdn.net/FE_dev/article/details/72765447实现几个有关按钮的特效

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>白光特效</title>
  <style>
	  a{
	  	margin:30px auto 0; 
	  }
	  .animBtn{
	  	width:150px;
		height:40px;
		position:relative;
		border:2px solid #000;
		background:transparent;             /* 背景色为透明色，让生成的背景能显示出来 这里可以随便换颜色*/
		display:block;                       /* 将元素变为块级元素 */  
		line-height:40px;
		text-align:center;
		text-decoration: none;              /* 标准的文本，没有文本装饰，主要是取消a标签的下划线 */
 		text-transform: uppercase;          /* 元素中的文本全部转为大写 */  
		overflow: hidden;
		transition:.3s ease;  
	  }
	  .animBtn:after{
		 content:"";
		 position:absolute;
		 width:100%;
		 height:0%;
		 background:green;
		 left:50%;
		 top:50%;
  		 transition: all .3s ease 0s;
		 z-index: -1;                                    /* 取负值，置于底层 用来当做背景 */
	  }
	  .animBtn:hover{
	  	color:#fff;
		  text-shadow:7px 7px 2px #646464;
		  background: transparent;  /*如果你想让生成的元素显示出来，而且上面你用的不是透明色，记得这里换透明色*/
		  line-height:34px;
		  border-color:green;
	  }
	  /* 上下开 */
	 .animBtn.btnA:after {
	  transform: translateX(-50%) translateY(-50%);
	}
	/* 匹配鼠标悬停在元素上时，在元素之后插入的内容 */
	.animBtn.btnA:hover:after {
	  height: 100%;
	}
	  /* 左右开 */
	 .animBtn.btnB:after {
	  transform: translateX(-50%) translateY(-50%) rotate(45deg);
	}
	/* 匹配鼠标悬停在元素上时，在元素之后插入的内容 */
	.animBtn.btnB:hover:after,.animBtn.btnC:hover:after {
	  height: 400%;
	}
	  /* 左右倾斜角不同 */
	 .animBtn.btnC:after {
	  transform: translateX(-50%) translateY(-50%)rotate(-45deg);
	}
	
	    /* 圆形开 */
	 .animBtn.btnD:after {
	 	width: 0%;
  		border-radius: 50%;
 		transform: translateX(-50%) translateY(-50%);
	}
	/* 匹配鼠标悬停在元素上时，在元素之后插入的内容 */
	.animBtn.btnD:hover:after {
	  height: 500%;
	  width:110%;
	}
  </style>
 </head>
 <body>
      <a href="#" class="animBtn btnA">button a</a>
	  <a href="#" class="animBtn btnB">button b</a>
	  <a href="#" class="animBtn btnC">button c</a>
	  <a href="#" class="animBtn btnD">button d</a>
 </body>
</html>

安康全是山

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
:before 和 :after的多用途实践 — 特效篇(2)

转自：https：//blog.csdn.net/FE_dev/article/details/72765447实现几个有关按钮的特效 &lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;白光特效&lt;/title
复制链接

扫一扫

专栏目录