css扫光效果总结,css文字扫光,css图片扫光
2017-09-11 10:52
393 查看
前言
今天来和大家一起探讨一下图片的扫光效果吧!思路
其实扫光的思路都是一样的,不外乎是表层一个动态的光,从左往右进行一个动画运动!但是这个运动的光,一般是用过伪元素来::after或者::before来实现的。
然后我们对这个伪元素用css的渐变gradient进行处理。
文字扫光
废话少说,我们接下来实现一个简单的扫光文字!.sample{ background-color: #0E1326; padding-top:30px; overflow: hidden; } .blank_text{ position: relative; width:200px; margin:20px auto; color: #fff; line-height: 1; font-size: 50px; font-size: 0.74074rem; text-align: center; overflow: hidden; font-family: "icomoon"; } .blank_text:after{ width: 300%; height: 100%; content: ""; position: absolute; top: 0; left: 0; background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(15,20,40, 0.7)), color-stop(0.4, rgba(15,20,40, 0.7)), color-stop(0.5, rgba(15,20,40, 0)), color-stop(0.6, rgba(15,20,40, 0.7)), color-stop(1, rgba(15,20,40, 0.7))); -webkit-animation: slide ease-in-out 2s infinite; } @-webkit-keyframes slide{ 0%{-webkit-transform:translateX(-66.666%);} 100%{-webkit-transform:translateX(0);}
html代码如下:
<div class="sample"> <div class="blank_text">haorooms博客扫光测试</div> </div>
预览效果如下:
图片扫光
慕课网是通过鼠标移上去,伪类位置发生变化,通过如下代码:.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代码如下:
<div class="logo"> <a href="http://www.haorooms.com"><img src="http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/banner03.jpg" /></a> </div>
当然我们也可以用慕课网的那种位置偏移来做,都可以!
相关文章推荐
- 如何用CSS实现文字环绕图片的效果
- css 总结 【垂直居中】【图片下方文字】
- css文字环绕图片效果
- CSS 实现触屏【图片文字】左右滚动效果
- 看截图:给图片罩上一层半透明文字描述效果(一)DIV+CSS+SPAN 借鉴百度图片附着文字效果
- 使用CSS制作文字环绕图片效果(文字内容包含<li>标签)
- 用CSS实现文字环绕图片的效果
- css为图片添加说明文字——带透明效果
- css文字环绕图片效果
- 【前端】CSS实现背景图片透明和文字不透明效果
- css实现图片上漂浮着文字效果
- 看截图:给图片罩上一层半透明文字描述效果(二)DIV+CSS+SPAN
- css阴影效果+文字溢出时省略号表示+图片切割
- css实现图片选中效果,选中后在图片上有内框和文字介绍
- css实现文字图片垂直居中效果
- HTML+CSS实现图片下半部分遮罩文字效果(仿微信推送信息的图片文字效果)
- 利用css的clear属性实现文字环绕图片效果
- css基础 float img 实现文字环绕图片的效果
- css图片上漂浮着文字效果
- css图片上漂浮着文字效果