快好知 kuaihz订阅观点

 

利用:before选择器给你的网站Logo添加扫光特效-wordpress美化特效

在知更鸟大神的网站看到他的Begin主题Logo有扫光特效,看起来还是比较炫的。研究了一下,发现是用:before选择器实现的扫光效果,现在把代码甩出来,觉得好看的可以在自己的站点上试一试。

Logo扫光方法

方法很简单,只需要添加一段css代码即可,如果你是WordPress程序,那么请在当前主题css文件最下方添加如下代码,需注意:代码中的#logo:before,根据自己的实际情况修改为当前主题的Logo元素选择器名称。

/**logo扫光效果CSS**/

#logo:before{

    content:“”;

    position: absolute;

    left: –665px;

    top: –460px;

    width: 200px;

    height: 15px;

    background-color: rgba(255,255,255,.5);

    -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;

}

@-webkit-keyframes searchLights {

    0% { left: –100px; top: 0; }

    to { left: 120px; top: 100px; }

}

@-o-keyframes searchLights {

    0% { left: –100px; top: 0; }

    to { left: 120px; top: 100px; }

}

@-moz-keyframes searchLights {

    0% { left: –100px; top: 0; }

    to { left: 120px; top: 100px; }

}

@keyframes searchLights {

    0% { left: –100px; top: 0; }

    to { left: 120px; top: 100px; }

}

当然,此效果也适用于其他建站程序,其仅仅是一个CSS效果而已。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:特效  特效词条  美化  美化词条  wordpress  wordpress词条  添加  添加词条  利用  利用词条  
优化

 网站该如何推广

 【外贸网站推广】网站该如何推广  随着经济全球化的影响不断的在加深,中国也深受其中的影响,慢慢的开始对外交流。最近这几年中国的外贸发展速度来说确实是非常快的,...(展开)

优化

 品牌重视时刻怎么获取

 品牌重视时刻怎么获取呢,首要经过司南研讨剖析方针人群,找出每天品牌重视的趋势,比方检查品牌在哪个时刻段被查找的次数比较多,查找比较活泼的时刻段能够加大投进,反...(展开)