:before 和 :after的多用途实践 — 白光特效篇（1）

最新推荐文章于 2024-04-25 06:00:00 发布

安康全是山

最新推荐文章于 2024-04-25 06:00:00 发布

阅读量256

点赞数

分类专栏： Css样式技巧

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

11 篇文章 0 订阅

订阅专栏

转自：https://blog.csdn.net/fe_dev/article/details/72571110

如何能生成一道光，当鼠标移入时，能有种闪光的效果

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>白光特效</title>
  <style>
	  #content{
	  	 width:400px;
		 height:400px;
		 background-color:#000;
		 position:relative;   /* 让左边的光相对于这个容器进行定位； */
		
	  }
	  .left:before{
		content:"";       /* 把白光添加到在容器中 */
	  	width:20px;
		height:400px;
		background-color:#fff;
		position:absolute;
		transform:skewX(-13deg);      /* 沿着 X轴 顺时针倾斜13度*/
		left:-40%;     /* 先让它藏起来，hover时再出现*/
	  }
	  /* 添加动画效果*/
	   @keyframes left{
            0%   {left:-40%;}     /* 起始-40%到最右边的120%*/
            100% {left:120%;}
      }
	  .left:hover:before{
		  animation:left 0.8s linear normal;
	  }
  </style>
 </head>
 <body>
     <div id="content" class="left">  </div>
 </body>
</html>

结果：