<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS3 发光边框</title> <link rel="stylesheet" href="base.css" /> <style type="text/css"> body{ background: #f0f0f0 } .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); } .light-inner:after{ border-top: 0; border-bottom: 0; transform: scaleY(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; } </style> </head> <body> <div class="light"> <img src="aaa.jpg"> <div class="light-inner"> <p>onestopweb</p> <p>一站式共享网络</p> </div> </div> </body> </html>
效果图:
相关推荐
运行效果: html <!-- This element is not visible. The DOM is generated by JavaScript --> <div class=side></div> <div class=side></div> <div class=side></div> ...CSS body
一个很漂亮会发光的搜索边框,使用的是css3的动画,没有js,代码简洁,兼容手机,平板,pc设备
css3边框发光动画特效代码.rar
91、Jquery鼠标悬停css3发光效果特效
css3图标按钮边框发光特效是一款实用的鼠标悬停按钮边框线条动画特效。
纯CSS3圆形边框光环动画特效是一款css3 @keyframes属性制作黑色的圆形光环发光动画特效。
主要给大家介绍了利用CSS3伪元素实现逐渐发光的方格边框的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
炫酷HTML5 SVG+CSS3霓虹灯文字边框动画特效 直接复制可用
纯CSS3发光阴影按钮点击特效是一款基于css3制作的黑色带阴影发光按钮,鼠标悬停按钮倾斜边框变色动画特效。
内阴影,内发光,阴影,外发光转换成CSS的box-shadow属性。您可以在浏览器中看到的结果样式,并与其他人分享。它适用于Windows或Mac OS X和Photoshop CS3及更高版本。最重要的是,它是完全免费的!
非常实用的特效代码,可以完美运行,可以二次修改!
1.制作发光边框文本框效果复制代码代码如下:<input type=”text” class=”sdw” />然后我们要让这个input组件在被成为焦点(点击)时向四周发光,显示为蓝色,我只需添加一段CSS代码: 复制代码代码如下:sdw:...
CSS3鼠标经过个性边框特效是一款纯CSS3实现的边框按钮特效,鼠标经过或者悬停的时候显示边框动画效果。
之前我向大家分享过一款非常绚丽的CSS3发光表单,的确是很酷,大家可以先看看。今天要分享的这款CSS3表单就比较清新简单了。表单整体看上去很干净,特别的是,该CSS3联系表单有一个自定义的美化select表单,表单项在...
解压密码:RJ4587 之前我们分享过很多漂亮的网页按钮动画,大家可以移步至CSS3按钮分类下查看各种各样的CSS...这次要分享的这款CSS3按钮有着质感的背景,并且鼠标滑过按钮时按钮边框还会发光,呈现出3D立体的视觉效果。
发光卡片悬停显示CSS3特效是一款边框默认发光显示,鼠标经过的时候高亮显示图片信息。
} /* 栏目导航发光阴影效果的CSS定义,调用代码为;Glow">***</span> */.Glow{FILTER: Glow(Color=0733B2, Strength=1) dropshadow(Color=0733B2, OffX=1, OffY=1,); WIDTH: 100%; COLOR: #ffffff; LINE-HEIGHT...