使用CSS为你的Shopify店铺LOGO增加扫光动画

最新推荐文章于 2023-12-13 16:28:13 发布

宝码

最新推荐文章于 2023-12-13 16:28:13 发布

阅读量1.3k

点赞数 1

分类专栏： Shopify代码修改

本文链接：https://blog.csdn.net/8665048/article/details/97527783

版权

Shopify代码修改专栏收录该内容

4 篇文章 6 订阅

订阅专栏

如下图所示，使用CSS就可以增加扫光动画，看起来很炫酷。按照上篇文章所述，找到修改shopify css的文件，在文件末尾增加以下代码即可。

.logo {
    position: relative;
    float: left;
    margin: 18px 0 0 5px;
    overflow: hidden;
    transition-duration: 5s;/**动画时间**/
  }

  .logo:before {
    content: "";
    position: absolute;
    width: 1000px;
    height: 20px; /**光标的宽度，可根据实际调整**/
    background-image: linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 1s ease-in 1s infinite;
    -o-animation: searchLights 1s ease-in 1s infinite;
    animation: searchLights 1s ease-in 1s infinite; /**第一个数字参数控制扫光速度，数字越大越慢**/
  }

  @keyframes searchLights {
    0% {
      left: -200px;
      top: -300px;
    }
    100% {
      left: -160px;
      top: 800px;
    }
  }

使用这种方法，也可以为你想要突出重点的地方，增加这个效果，比如在“Buy it now”按钮上。