最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css实现文字发光效果方法汇总
时间:2022-06-25 09:28:43 编辑:袖梨 来源:一聚教程网
前言
我录制的慕课网视频一直没有上线,慕课网的消息说是可能加入就业课程或者系列课程。有可能年底上线,我等的花儿都谢了!因此,我昨天在看慕课网时,发现他们确实改版了,实战页面有图片扫光效果,地址我就不列了!感觉这个效果还蛮不错,其实,我之前也做过类似的效果。今天借着这个引子,来和大家一起探讨一下图片的扫光效果吧!
思路
其实扫光的思路都是一样的,不外乎是表层一个动态的光,从左往右进行一个动画运动!
但是这个运动的光,一般是用过伪元素来::after或者::before来实现的。
然后我们对这个伪元素用css的渐变gradient进行处理。
文字扫光
废话少说,我们接下来实现一个简单的扫光文字!
代码如下 | 复制代码 |
.sample{ html代码如下: haorooms博客扫光测试 |
预览效果如下:
图片扫光
慕课网是通过鼠标移上去,伪类位置发生变化,通过如下代码:
代码如下 | 复制代码 |
.banner-bg .banner-box .right-pic:hover::before { -webkit-transition: left .8s; -moz-transition: left .8s; transition: left .8s; left: 480px; } |
位置发生改变。
我们不用慕课网的方式,我这里也简单的实现一下!
如下:
css代码如下:
代码如下 | 复制代码 |
@keyframes aniBlink { from { margin-left:-440px } to { margin-left:500px } } @-webkit-keyframes aniBlink { from { margin-left:-440px } to { margin-left:500px } } .logo { position:relative; width:440px; height:160px; overflow:hidden; } .logo a { display:inline-block } .logo a:before { content:''; position:absolute; width:60px; height:160px; margin-top:0px; margin-left:-440px; overflow:hidden; z-index:6; overflow: hidden; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.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, 0.2)), color-stop(100%, rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); -webkit-transform: skewX(-25deg); -moz-transform: skewX(-25deg); } .logo:hover a:before { -webkit-animation:aniBlink .8s ease-out forwards; -moz-animation:aniBlink .8s ease-out forwards; -o-animation:aniBlink .8s ease-out forwards; animation:aniBlink .8s ease-out forwards } |
html代码如下:
代码如下 | 复制代码 |
当然我们也可以用慕课网的那种位置偏移来做,都可以!
相关文章
- 《燕云十六声》红尘无眼完成图文攻略 12-25
- 《燕云十六声》阴阳如影完成图文攻略 12-25
- 《燕云十六声》悬檐之下四架椽屋图文攻略 12-25
- 《燕云十六声》2024最新公测时间介绍 12-25
- 《燕云十六声》有没有藏宝阁 12-25
- 《燕云十六声》制作公司介绍 12-25