电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

CSS3伪元素付诸逐渐闪烁的方格边框的代码实例体会

2021-01-27 21:52:00 出处:[ 菜菜电脑网 ] 人气:次阅读
这篇文章主要给大家参阅了利用CSS3伪元素做到逐渐放电的方格边框的具体资料,文中得出了概要的示例代码仅供大家简介研读,对大家很强一定的参看研修价值,能够的朋友们下面来一起是不是吧。

本文概述的是一个常用伪元素来意味着边框逐渐白光的代码,主要比如说scale和opacity这两个属性。下面来刚才详尽的引介:

效果图如下:

HTML代码:

<p class="light"> <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/> <p class="light-inner">  <p>前端开发博客</p>  <p>注目前端开发</p> </p></p>

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轴的(竖直方向)贴图

总结

以上就是CSS3伪元素意味着逐渐萤光的方格边框的代码实例回馈的具体内容,更多请求非议php中文网其它涉及文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152