图片玻璃光影效果制作

2019年10月12日| 作者:策策| 浏览:87次


一种图片玻璃光影效果,可用于Logo等图片,效果还是比较好看一点


GIF.gif


HTML:


<div id="guang">
        <a href=""><img src="cs.jpg" alt="一张测试图片而已"/></a>
    </div>


CSS:


*{margin:0;padding:0;}
    #guang{
        width:400px;height:225px;
        margin:100px auto 0 auto;
        position: relative;
    }
    #guang::before{
        content:'';
        display:block;
        background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.5)50%, rgba(255,255,255,0)100%);
        position:absolute;
        top:0;
        left:-170px;
        width:100px;height:100%;
        transform: skewX(-30deg);
    }
    #guang:hover::before{left:470px;transition:.8s;}


其中有一个知识点需要注意:css3中的过渡时间transition加到需要过渡元素和加到需要过渡元素鼠标经过上,有什么区别?


如果加到过渡元素上,当鼠标离开元素后,还会过渡效果回到最初,而放在:hover上就不会出现这种效果,因为过渡效果只会出现在鼠标经过上,鼠标离开后,就没有过渡属性了,还是比较容易理解的,朋友们可以自己试一下。


┏(^0^)┛拜拜



文章标签:CSS

本文选自策策的原创文章,转载请注明内容来源:CeceBlog(https://cecebk.cn/post/38.html)

评论:




作者动态
制作主题,网站,设计,收徒 联系站长
标签列表