扫光效果包括:css文字扫光,css图片扫光
思路
其实扫光的思路都是一样的,不外乎是表层一个动态的光,从左往右进行一个动画运动!
但是这个运动的光,一般是用过伪元素来::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);}
<div class="sample"> <div class="blank_text">haorooms博客扫光测试</div> </div>
预览效果如下:
<iframe style="width: 780px; height: 100px;" src="http://sandbox.runjs.cn/show/k5k3s0y2" frameborder="0"></iframe>
图片扫光
通过鼠标移上去,伪类位置发生变化,通过如下代码:
.banner-bg .banner-box .right-pic:hover::before { -webkit-transition: left .8s; -moz-transition: left .8s; transition: left .8s; left: 480px; }
位置发生改变。
我这里也简单的实现一下!
如下:
<iframe style="color: #444444; font-family: 'Microsoft Yahei', 'Trebuchet MS', Georgia, 'Times New Roman', Times, sans-serif; background-color: #fcfcfa; width: 780px; height: 180px;" src="http://sandbox.runjs.cn/show/gunlnisc" frameborder="0"></iframe>
@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 }
<div class="logo"> <a href="http://www.haorooms.com"><img src="http://sandbox.runjs.cn/uploads/rs/216/0y89gzo2/banner03.jpg" /></a> </div>
当然我们也可以用那种位置偏移来做,都可以!
.
相关推荐
总结来说,CSS3的`background-clip:text`、渐变背景、透明文本填充颜色以及关键帧动画`@keyframes`是实现文字扫光渐变动画的关键。这些技术不仅提供了丰富的视觉表现力,而且无需JavaScript,仅依赖CSS就能完成,...
总结来说,通过结合HTML和CSS,我们可以创建出一个美观且实用的二维码扫码框。这个示例展示了如何利用CSS的背景属性、渐变、尺寸和边框来构建一个十字交叉的边框效果,形成一个引导用户扫描的框。在实际应用中,可以...
总结来说,无论是JavaScript的底层控制,jQuery的简洁语法,Vue.js的声明式动画,还是CSS3的声明式关键帧动画,都为开发者提供了丰富的工具来创建吸引人的交互体验。了解并熟练运用这些技术,能够使你的Web应用更具...
总结来说,"CSS3 实现灯光照射显示文字动画"是一个利用CSS3的`text-shadow`属性和`@keyframes`规则,以及可能结合JavaScript交互技术来创建动态视觉效果的过程。通过这种方式,我们可以为网站的文本元素增加丰富的...
总结来说,要实现这个效果,我们需要理解并运用CSS3的`@keyframes`规则来定义动画的关键帧,结合`transform`和`transform-origin`属性控制元素的大小和位置变化。通过适当的CSS属性,如`animation`、`animation-...
总结起来,这个CSS3文字亮光特效的实现主要依赖于`-webkit-background-clip`、`-webkit-text-fill-color`、`-webkit-animation`以及伪元素的应用。通过这些技术,我们可以创建出动态、富有视觉吸引力的文字特效,为...
总结来说,这个压缩包提供了一个纯CSS3实现的潜水艇探照灯与水泡动画效果示例,展示了CSS3在网页动画设计中的强大能力。通过学习和理解这些代码,开发者可以灵活地应用于自己的项目中,创造出更多富有创意和互动性的...
【标题】"基于socket的...总结来说,这个项目涉及到的主要技术包括C#编程、.NET框架、Socket通信以及WebSocket技术,实现了扫码枪数据的实时传输和Web界面的动态展示,为材料管理系统提供了高效、实时的信息处理能力。
总结来说,"一组带有动画效果的按钮"涉及了CSS3的Hover伪类、Transition属性以及可能的预设CSS样式库的应用,这些都是前端开发者在构建交互性更强、视觉效果更丰富的用户界面时不可或缺的工具和技术。通过合理运用,...
在本项目中,HTML定义了页面的基本结构,CSS使页面具有良好的视觉效果,而JavaScript与Vue.js结合,实现了页面的交互逻辑。 6. **扫码功能**:用户扫码点餐,意味着项目中可能包含了二维码扫描的实现。这通常需要...
CSS MASK滤镜是一种用于在网页设计中创建遮罩效果的技术。通过应用MASK滤镜,设计师可以在页面元素上实现各种视觉效果,例如突出显示特定部分、创建动态效果等。遮罩的基本原理类似于在图像或对象上放置一层半透明的...
总结,"纯css3聚光灯下麦克风特效"是一个集成了CSS3变换、过渡、动画、光照效果以及可能的JavaScript交互的复杂网页特效。通过熟练运用这些技术,开发者可以创造出引人入胜的用户体验,使网页设计更具吸引力。
这篇文章将深入探讨“jQuery网页右侧固定悬浮层qq在线客服,服务热线,扫一扫二维码,购物车、页面滚动返回顶部代码”这一主题。这个项目利用了jQuery、CSS3和HTML三种技术,构建了一个实用的网页交互功能模块,适用...
在jQuery中,可以利用`$.fn.modal()`方法,这是Bootstrap库中的一个组件,但也可以自定义CSS和JavaScript来创建类似效果。如果使用Bootstrap,代码可能如下: ```javascript $("#donateModal").modal('show'); ``` ...
总结,通过Cordova和相关的扫码插件,我们可以轻松地在iOS应用中集成二维码扫描功能。结合自定义的动画扫描线,不仅可以提升用户体验,还能为应用增添独特的风格。在实际开发过程中,确保遵循最佳实践,优化性能,...
微信小程序是腾讯推出的一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。同时,小程序也具有出色的使用性能,因为它无需安装卸载,所以用户使用起来更为便捷...
4. **触控支持**:对于触摸设备,Nivo Slider提供了良好的手势支持,用户可以通过轻扫或滑动来切换图片。 5. **易于集成**:只需引入jQuery库和Nivo Slider的CSS及JS文件,然后在HTML中添加相应的标记,就可以快速...
2. 动画效果:通过CSS3动画或者JavaScript库,源码可以实现过渡、旋转、缩放等动态效果,增加用户互动性。 3. 点击反馈:良好的交互设计通常会在用户点击后给予视觉或触觉反馈,源码中的事件监听和处理函数可以实现...
总结起来,实现微信小程序自定义扫码功能界面的关键在于使用`camera`组件捕获摄像头画面,利用`cover-view`和`cover-image`组件进行界面覆盖和动画效果,通过CSS样式调整界面布局,最后结合JavaScript实现动态扫描线...
总结来说,Vue.js通过数据驱动视图的能力使得实现用户登录方式的切换变得简单。通过定义状态变量和利用动态类绑定,我们可以轻松地控制界面的显示,提供良好的用户体验。在实际项目中,确保登录功能的安全性和可用性...