简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

CSS實現高亮光弧效果

高洛峰
發布： 2016-10-11 10:35:56
原創
1550 人瀏覽過

使用CSS3實現的一個高亮光弧效果，當滑鼠hover到某一個元素上時，一道光弧從左到右閃過，效果如下：

CSS實現高亮光弧效果

<!DOCTYPE html>
<html>
<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 href="javascript:;">
    <img src="./images/girl.jpg"    style="max-width:90%" width="760" alt="">
</a>
</body>
</html>
登入後複製


相關標籤：
CSS实现高亮光弧效果
來源：php.cn
上一篇：CSS屬性 table 的 border-collapse 邊框合併 下一篇：CSS讓div背景透明
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
android - 请教安卓的一个界面实现，图片请看问题 这个效果不知道怎么实现，数字1到9和机柜图片是对应的，数字最大可以到99，也就是说可能需要多页显示。机器连接的时候显示高亮（蓝色），比如图片中的1,2号机器在线。求大神给个实现方案...
來自於 2017-04-18 09:07:57
0
1
199
android - iOS中设置UICollectionViewCell的点中效果，为什么要"长按"才会触发背景色变化？ 1.想要实现UICollectionView点击切换背景色的效果，代码如下： 现象：手指轻点，背景色没有变化；手指整个放下去，背景色变化。 疑问：iOS中高亮状态的定义是什么（手指...
來自於 2017-04-17 17:41:16
0
5
315
html5 - 如何在猴机上做到平滑切换页面？ 地址在这里由于有分页要求，页面结构是在最外层盒子里做了一个长度为页面高度*6的长条，然后滑动时控制该元素的top属性，用css transition来实现动画效果。在iOS上表现尚...
來自於 2017-04-17 13:26:28
0
0
150
前端 - B站首页的CSS3样式在IE7、8下也起作用，他们用的是什么解决方案？ 最近在做一个页面，考虑低版本浏览器只实现基本的显示，不实现高级的效果。但是今天看了B站，他们的页面在IE7、8中和现代浏览器中完全一样，包括圆角、阴影、css动画都有效。请教他们用...
來自於 2017-04-17 13:09:17
0
2
293
css - 如何在手机上实现边界高光效果？ 很多app滑动到边界都会有高光效果，那个在web上怎么实现呢？
來自於 2017-04-17 11:13:43
0
1
191
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！