网站建设 社群运营 【电商卖家交流群】使用CSS为你的Shopify店铺LOGO增加扫光动画

【电商卖家交流群】使用CSS为你的Shopify店铺LOGO增加扫光动画

中企动力企业交流群

如下图所示,使用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”按钮上。

中企动力企业交流群

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。 如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章

以上产品还未完全满足我的所有需求,在下方提交我的专属需求
我的专属需求:
*手机号:
*验证码:
img
咨询报价
现在咨询