圖片滑過亮光光弧效果程式碼例項

antzone發表於2017-03-07
原文網址 : https://www.softwhy.com/article-2585-1.html

分享一段程式碼例項，它利用css3實現了一道亮光弧滑過效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
html{
  font-size: 62.5%;
  line-height: 1;
  font-family: 'Microsoft YaHei',sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
}
.logo{
  position:relative;
  overflow: hidden;
}
.logo img{
  display:block;
  width:200px;
}
.logo:hover:before{
  content: "";
  position: absolute;
  top: 50%;
  left: -7%;
  width: 200px;
  height: 20px;
  background:-webkit-linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%);
  background:-moz-linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%);
  background:-o-linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%);
  background:-ms-linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%);
  background:linear-gradient(left,rgba(255,255,255,.05) 20%,rgba(255,255,255,.6) 65%,rgba(255,255,255,.05) 100%);
  transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  animation:light 0.6s ease-out;
  -webkit-animation:light 0.6s ease-out;
  -moz-animation:light 0.6s ease-out;
  -o-animation:light 0.6s ease-out;  
}
@-webkit-keyframes light{
  0%{
    left:-7%;
    top:50%;
  }
  100% {
    left:8%;
    top:60%;
  }
}
@keyframes light{
  0%{
    left:-7%;
    top:50%;
  }
  100% {
    left:8%;
    top:60%;
  }
}
</style>
</head>
<body>
<div class="logo">
  <img src="demo/CSS/img/tree.jpg" alt="" />
</div>
</body>
</html>

相關文章