HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 查看内容

CSS实现高亮光弧效果

2016-10-11 13:54| 发布者: Hyukoh| 查看: 1358| 评论: 1|原作者: Jaxu|来自: Jaxu's home

摘要: 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过

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

代码如下:

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



原文作者:Jaxu
本站资源均由 HTML5中国 编辑从其他网站精选HTML5相关资源转载,以供网友参阅,投稿: news@html5cn.org

鲜花

握手

雷人

路过

鸡蛋

相关阅读

发表评论

最新评论

引用 linedd963 2017-4-8 18:04
高雄外送茶+男人尋樂秘密基地+LINE:dd963 【看主頁約妹】
台北外送茶+男人尋樂秘密基地+LINE:dd963 【看主頁約妹】
台中外送茶+男人尋樂秘密基地+LINE:dd963 【看主頁約妹】
新竹外送茶+男人尋樂秘密基地+LINE:dd963 【看主頁約妹】
彰化外送茶+男人尋樂秘密基地+LINE:dd963 【看主頁約妹】
台南外送茶+男人尋樂秘密基地+LINE:dd963 【看主頁約妹】
南投外送茶+男人尋樂秘密基地+LINE:dd963 【看主頁約妹】
高雄外送茶+男人尋樂秘密基地+LINE:dd963 【看主頁約妹】

查看全部评论(1)

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-4-26 16:21

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部