纯CSS发光动效-CSS制作logo发光效果

纯CSS发光动效-CSS制作logo发光效果

这里是html部分，复制进去就能用很简单

<div class="logo-nav">
    <a href="#" target="_blank" rel="external nofollow" >
      <img src="https://img-blog.csdnimg.cn/2f4abdc900ac470c97dc044af7f3e8ed.webp?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAbTBfNjA5NjUxMTc=,size_14,color_FFFFFF,t_70,g_se,x_16" alt="">
      <i></i>
    </a>
  </div>
           

这里是css部分，复制进去就能用

body {
    background: #fff;
    font-family: "Arial";
    background-size: cover;
  }
  img{
    width: 160px;
  }
  a {
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 5px;
    color: #FAFAFA;
    padding:  5px 5px 0px 5px;
    position: absolute;
    left: 150px; /* 调整高度与宽度 */
    top: 150px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    background: rgb(0 68 154);
    -webkit-transition: background 0.15s ease-in-out;
    -moz-transition: background 0.15s ease-in-out;
    -ms-transition: background 0.15s ease-in-out;
    -o-transition: background 0.15s ease-in-out;
    transition: background 0.15s ease-in-out;
  }
  
  a:hover {
    background: rgba(252,208,0, 0.6);
  }
  
  i {

    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;

    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);

    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0.03)), color-stop(30%, rgba(255, 255, 255, 0.85)), color-stop(50%, rgba(255, 255, 255, 0.85)), color-stop(70%, rgba(255, 255, 255, 0.85)), color-stop(71%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));

    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);

    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);

    background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);

    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
    width: 15%;
    height: 100%;
    transform: skew(-10deg, 0deg);
    -webkit-transform: skew(-10deg, 0deg);
    -moz-transform: skew(-10deg, 0deg);
    -ms-transform: skew(-10deg, 0deg);
    -o-transform: skew(-10deg, 0deg);

    animation: move 2s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
    -webkit-animation: move 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1s;
    -moz-transform: skew(-10deg, 0deg);
    -moz-animation: move 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-delay: 1s;
    -ms-transform: skew(-10deg, 0deg);
    -ms-animation: move 2s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-delay: 1s;
    -o-transform: skew(-10deg, 0deg);
    -o-animation: move 2s;
    -o-animation-iteration-count: infinite;
    -o-animation-delay: 1s;
  }
  
  @keyframes move {
    0% {
      left: 0;
      opacity: 0;
    }
    5% {
      opacity: 0.0;
    }
    48% {
      opacity: 0.2;
    }
    80% {
      opacity: 0.0;
    }
    100% {
      left: 82%;
    }
  }
  
  @-webkit-keyframes move {
    0% {
      left: 0;
      opacity: 0;
    }
    5% {
      opacity: 0.0;
    }
    48% {
      opacity: 0.2;
    }
    80% {
      opacity: 0.0;
    }
    100% {
      left: 82%;
    }
  }
  
  @-moz-keyframes move {
    0% {
      left: 0;
      opacity: 0;
    }
    5% {
      opacity: 0.0;
    }
    48% {
      opacity: 0.2;
    }
    80% {
      opacity: 0.0;
    }
    100% {
      left: 88%;
    }
  }
  
  @-ms-keyframes move {
    0% {
      left: 0;
      opacity: 0;
    }
    5% {
      opacity: 0.0;
    }
    48% {
      opacity: 0.2;
    }
    80% {
      opacity: 0.0;
    }
    100% {
      left: 82%;
    }
  }
  
  @-o-keyframes move {
    0% {
      left: 0;
      opacity: 0;
    }
    5% {
      opacity: 0.0;
    }
    48% {
      opacity: 0.2;
    }
    80% {
      opacity: 0.0;
    }
    100% {
      left: 82%;
    }
  }
  
           

演示效果地址：手机贴膜教程-贴膜视频-手机膜推荐-贴膜网 logo类似的演示地址，两者代码不一致，但是效果类似。

（图侵删..）