纯css实现边框动画特效 css

下面是完整代码，实现图示效果，效果为出现四个白框，和去除黑色背景。

<!-- 了解更多模块 -->
<!DOCTYPE html>
<html><head><style type="text/css">body{background-color: #D0D0D0;}
.knowmorbutton
{width: 100px;height: 40px;position: relative;background-color: #000000;box-shadow:0px 0px  60px 0.5px #d0d0d0;
}
.knowmorbutton:hover
{cursor:pointer;background:transparent;
}
.know-top
{position: absolute;right: 0px;top: 0px;width: 0px;height: 5px;background-color: #FFFFFF;transition: all 0.2s;
}
.know-left
{position: absolute;top: 0px;left: 0px;width: 5px;height: 0px;background-color: #FFFFFF;
}
.knowmorbutton:hover .know-left
{height: 35px;transition: all 0.2s;cursor:pointer;
}
.know-right
{position: absolute;bottom: 0px;right: 0px;width: 5px;height: 0px;background-color: #FFFFFF;
}
.knowmorbutton:hover .know-right
{cursor:pointer;height: 35px;transition: all 0.2s;
}
.knowmorbutton:hover .know-left
{height: 35px;transition: all 0.2s;
}
.knowmorbutton:hover .know-top
{cursor:pointer;width: 100px;
}.know-bottom
{   position: absolute;left: 0px;bottom: 0px;width: 0px;height: 5px;background-color: #FFFFFF;transition: all 0.2s;
}
.knowmorbutton:hover .know-bottom
{width: 100px;
}
.knowmore
{color: #FFFFFF;position: relative;text-align: center;top: 7px;}</style><meta charset="utf-8"><title></title></head><body></div><!-- 了解更多模块 --><div class="knowmorbutton"><div class="know-top"></div><div class="know-left"></div><div class="know-right"></div><div class="know-bottom"></div></div></div><!-- 了解更多模块 --></div></body>
</html><!-- 了解更多模块 -->

虽然代码看着很长其实原理很简单，使用子类选择器，在.knowmorbutton盒子悬停的同时，让四个盒子出来就行；
四个盒子分别使用绝对定位，定位到四个角，两个不给宽度，两个不给长度。
然后在悬停父类knowbuttton，清除阴影我用的是backgroune:transparent；
核心思想是悬停父类，触发子类效果。定位父相子绝，不影响布局。

纯css实现边框动画特效 css相关推荐

85.CSS水波背景动画特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 85]CSS水波背景动画特效视频演示地址一:https://www.ixigu ...
css3特效框,科技常识：6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效的相关资料,希望小伙伴们看了有所帮助. ...
html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览源码下载使用方法 HTML ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
【纯CSS】CSS奇思妙想边框动画
今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框. 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样. bor ...
CSS 奇思妙想边框动画
} 由于 border 和 background 在盒子模型上位置的差异,视觉上会有一个很明显的错位的感觉: 要想解决这个问题,我们可以把 border 替换成 outline,因为 outline ...
html 边框效果,css实现边框动画效果
最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果. css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图 ...
常用动画特效 - CSS实现
不是样式的生产者,只是样式的搬运工项目开发中用到的特效,在此规整,方便以后使用 /* 闪烁特效 */ .class-name{-webkit-animation: twinkling 1s infi ...
html实现魔方相册,css实现魔方动画特效
CSS3实现3D魔方动画特效 *{ margin:0; padding:0; } body{ background: url(img/bg.jpg) 0 0 no-repeat; background ...

纯css实现边框动画特效 css

纯css实现边框动画特效 css相关推荐

最新文章

热门文章