首页 / CSS / CSS实现高亮光弧效果

CSS实现高亮光弧效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS实现高亮光弧效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1174字，纯文字阅读大概需要2分钟。

内容图文

　　使用CSS3实现的一个高亮光弧效果，当鼠标hover到某一个元素上时，一道光弧从左向右闪过，效果如下：

CSS实现高亮光弧效果 - 文章图片

代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>light</title>
    <style>
        body{
            margin: 0;
        }
        a.floor{
            display: block;
            height: 475px;
        }
        a.floor:hover:before{
            -webkit-transition: left 1.5s;
            -moz-transition: left 1.5s;
            transition: left 1.5s;
            left: 920px;
        }
        a.floor:before{
            content: "";
            position: absolute;
            width: 80px;
            height: 475px;
            top: 0;
            left: -150px;
            overflow: hidden;
            background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));
            background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);
            -webkit-transform: skewX(-25deg);
            -moz-transform: skewX(-25deg);
        }
    </style>
</head>
<body>
<a class="floor" href="javascript:;">
    <img src="./images/girl.jpg" height="475" width="760" alt="">
</a>
</body>
</html>

　　存下来备用！

内容总结

以上是互联网集市为您收集整理的CSS实现高亮光弧效果全部内容，希望文章能够帮你解决CSS实现高亮光弧效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/394496.html

来源：【匿名】