CSS制作按钮扫光效果_css扫光效果-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40610760/article/details/124923958

首先看最终的扫光效果：

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3制作按钮扫光效果</title>
<style type="text/css">
/**logo扫光效果CSS**/
.site-logo{
  position: relative;
  overflow: hidden;
  float:left;
  max-height: 50px;
}
.site-logo:before {
    content: "";
    position: absolute;
    width: 200px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: blink 1s ease-in 1s infinite;
    animation: blink 1s ease-in 1s infinite;
}
 
@-webkit-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-o-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@keyframes blink {
    from {left: -100px;top: 0;}
    to {left: 320px;top: 0;}
}
</style>
</head>
<body>
<div class="site-logo">
  <a  href="http://localhost/wordpress/" rel="home" itemprop="url">
   <img src="https://img2.baidu.com/it/u=2119832456,2215719618&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=250" alt="logo" itemprop="logo" width="150" height="50">
  </a>
</div>
</div>
</body>
</html>