利用CSS3伪元素实现逐渐发光的方格边框

互联网   05-07 16:54:54   作者:佚名   我要评论
这篇文章主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
本文介绍的是一个使用伪元素来实现边框逐渐发光的代码,主要用到scale和opacity这两个属性。下面来看看详细的介绍: 效果图如下: HTML代码:
<div class="light"> <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/> <div class="light-inner"> <p>前端开发博客</p> <p>关注前端开发</p> </div> </div>
CSS代码:
.light{ background: #fff; width: 180px; height: 180px; margin: 100px auto; position: relative; text-align: center; color: #333; transform:translate3d(0,0,0); } .light-inner{ padding: 60px 30px 0; pointer-events: none; position: absolute; left: 0; top: 0; bottom: 0; right: 0; text-align: center; transition: background 0.35s; backface-visibility: hidden; } .light-inner:before, .light-inner:after{ display: block; content: ""; position: absolute; left: 30px; top: 30px; right: 30px; bottom: 30px; border: 1px solid #fff; opacity: 0; transition: opacity 0.35s, transform 0.35s; } .light-inner:before{ border-left: 0; border-right: 0; transform:scaleX(0,1); } .light-inner:after{ border-top: 0; border-bottom: 0; transform: scaleY(1,0); } .light:hover .light-inner{ background: #458fd2 } .light:hover .light-inner:before, .light:hover .light-inner:after{ opacity: 1; transform: scale3d(1,1,1); } .light-inner p{ transition: opacity .35s, transform 0.35s; transform: translate3d(0,20px,0); color: #fff; opacity: 0; line-height: 30px; } .light:hover .light-inner p{ transform: translate3d(0,0,0); opacity: 1; }
实现步骤: 发光的方格,主要是通过.light-inner的伪元素:before和:after来实现 上下的边框是从中间往两边逐渐展开:scaleX(0)到scaleX(1) 左右的边框是从中间往上下两边展开:scaleY(0)到scaleY(1) 形成了一个四方形从中间向边角逐渐发光的效果:opacity:0到opacity:1。 其它就没什么技巧了。 scale介绍 scale(<number>[, <number>]):指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值 scaleX(<number>):指定对象X轴的(水平方向)缩放 scaleY(<number>):指定对象Y轴的(垂直方向)缩放 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
 
  1. Tag:CSS3   伪元素   发光  

相关文章

  1. 纯css3实现的发光3D立方体翻转动画特效源码
    这是一款基于纯css3实现的发光3D立方体翻转动画特效源码。画面上的3D立方体呈现随机的立体翻转效果,鼠标滑过立方体的时候可呈现出各个面发光的立方体动画效果
    2017-04-25
  2. 纯css3绘制可爱的发光流星动画特效源码
    这是一款基于纯css3绘制可爱的发光流星动画特效源码。画面上的流行动画带着可爱的笑脸图案,呈现出发光及向左飞行运动的效果。同时背景会有若干星光亮点闪耀飞过
    2017-03-28
  3. 纯css3实现的鼠标悬停发光效果特效源码
    纯css3实现的鼠标悬停发光效果特效源码是一款基于纯CSS3代码实现的鼠标悬停该图片发光效果的代码,本段代码适应于所有网页使用,有兴趣的朋友们可以前来利发国际手机客户端使用
    2015-03-30
  4. css3实例利发国际手机客户端 一款纯css3实现的发光屏幕旋转特效
    今天给大家带来一款纯css3实现的发光屏幕旋转特效。该屏幕由纯css3实现带发光旋转特效,有具体的代码,感兴趣的朋友可以参考下
    2014-12-07
  5. 纯CSS3实现的自定义美化UL OL列表的3种发光动画特效源码
    这是我们之前没有分享过的CSS3特效类型,它是一个可以自定义美化UL和OL列表的CSS3应用
    2014-11-10
  6. 纯CSS3实现的发光登录表单特效源码
    今天介绍的这款CSS3表单不但外观华丽,而且伴有颜色发光动画。当鼠标激活表单时,表单周围就会出现颜色渐变的发光动画,配合黑色的背景,整个CSS3表单显得格外亮丽。更重要
    2014-10-21
  7. CSS3实现的按钮发光动画特效源码
    这是一款基于纯CSS3实现的发光按钮特效,多种色彩的按钮排列在网页上,伴随着闪闪发光的效果,CSS3的强大肯定会让你叹为观止。该CSS3按钮发光动画主要是利用了webkit的动画
    2014-10-21
  8. 纯CSS3实现发光开关切换按钮效果源码
    今天我们要来分享一款类似的纯CSS3发光开关切换按钮,它的外观就像一个电灯的开关,可以左右切换
    2014-10-18
  9. 纯CSS3和SVG实现的鼠标滑过灯泡发光特效源码
    这是一款基于纯CSS3和SVG实现的灯泡发光特效源码,我们只需要将鼠标滑过灯泡,整个灯泡就会出现发光发亮的动画特效,效果相当逼真。CSS3的运用,让灯泡外围有一层淡淡的光
    2014-09-17
  10. 纯CSS3实现的带有鼠标滑过时发光特效的3D立体按钮源码
    这是一款基于CSS3实现的3D按钮特效,这款3D按钮除了具有内凹、外凸,阴影等大部分CSS3按钮特有的属性属性之外,当鼠标滑过按钮时,会出现微微发光特效,整体效果非常动感十
    2014-07-08

最新评论

利发国际手机客户端