平武建站

使用CSS属性怎么实现按钮悬停边框和背景动画集合

使用CSS 属性怎么实现按钮悬停边框和背景动画集合？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联公司服务项目包括新丰网站建设、新丰网站制作、新丰网页制作以及新丰网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，新丰网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到新丰省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

心属性

opacity: .999 使元素产生一个层叠上下文，这样按钮6和8的动画就不会被背景遮盖住了

left/top: -1px 使伪元素与按钮的位置重合，原因在下方

transition-delay 横向与纵向边框动画产生细微的延时效果

z-index: -1 防止动画产生的颜色块盖住按钮的文字

设置了left/top/right/bottom的absolute元素，是相对于父元素的padding-box进行定位的，所以这里伪元素要移动一个边框的距离，才能与按钮的位置重合，否则会出现下面的效果：

使用CSS 属性怎么实现按钮悬停边框和背景动画集合
 

可以看到，绿色边框和灰色边框有1px的距离




按钮一
按钮二
按钮三
按钮四




按钮五
按钮六
按钮七
按钮八
*, *:before, *:after { transition: all 0.3s; } section { position: relative; padding: 5px 0 5px; text-align: center; } .btn { position: relative; display: inline-block; line-height: 35px; margin: 8px; padding: 0 15px; font-size: 15px; border-radius: 3px; opacity: .999; cursor: pointer; } .btn-border-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; } .btn-border-o:before, .btn-border-o:after { content: ''; position: absolute; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border-o:before { left: 0; top: -1px; width: 0; height: 100%; border-width: 1px 0 1px 0; transition-delay: 0.05s; } .btn-border-o:after { top: 0; left: -1px; width: 100%; height: 0; border-width: 0 1px 0 1px; } .btn-border-o:hover:before { width: 100%; } .btn-border-o:hover:after { height: 100%; } .btn-border-o.btn-green:before, .btn-border-o.btn-green:after { border-color: #2ecc71; } .btn-border-o.btn-green:hover { color: #2ecc71; } .btn-border { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; } .btn-border:before, .btn-border:after { position: absolute; content: ''; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border:before { top: -1px; left: 0; width: 0; height: 100%; border-width: 1px 0 1px 0; transition-delay: 0.05s; } .btn-border:after { top: 0; left: -1px; width: 100%; height: 0; border-width: 0 1px 0 1px; } .btn-border:hover { background-color: transparent; } .btn-border:hover:before { width: 100%; } .btn-border:hover:after { height: 100%; } .btn-border.btn-blue:before, .btn-border.btn-blue:after { border-color: #3498db; } .btn-border.btn-blue:hover { color: #3498db; } .btn-border-rev-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; } .btn-border-rev-o:before, .btn-border-rev-o:after { content: ''; position: absolute; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border-rev-o:before { top: -1px; right: 0; width: 0; height: 100%; border-width: 1px 0 1px 0; transition-delay: 0.05s; } .btn-border-rev-o:after { left: -1px; bottom: 0; width: 100%; height: 0; border-width: 0 1px 0 1px; } .btn-border-rev-o:hover:before { width: 100%; } .btn-border-rev-o:hover:after { height: 100%; } .btn-border-rev-o.btn-purple:before, .btn-border-rev-o.btn-purple:after { border-color: #9b59b6; } .btn-border-rev-o.btn-purple:hover { color: #9b59b6; } .btn-border-rev { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; } .btn-border-rev:before, .btn-border-rev:after { content: ''; position: absolute; border-style: solid; border-radius: 3px; box-sizing: content-box; } .btn-border-rev:before { top: -1px; right: 0; width: 0; height: 100%; border-width: 1px 0 1px 0; } .btn-border-rev:after { bottom: 0; left: -1px; width: 100%; height: 0; border-width: 0 1px 0 1px; transition-delay: 0.05s; } .btn-border-rev:hover { background-color: transparent; } .btn-border-rev:hover:before { width: 100%; } .btn-border-rev:hover:after { height: 100%; } .btn-border-rev.btn-navy:before, .btn-border-rev.btn-navy:after { border-color: #34495e; } .btn-border-rev.btn-navy:hover { color: #34495e; } .btn-fill-vert-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; overflow: hidden; } .btn-fill-vert-o:before, .btn-fill-vert-o:after { content: ''; position: absolute; left: 0; width: 100%; height: 0; opacity: 0; z-index: -1; } .btn-fill-vert-o:before { top: 50%; } .btn-fill-vert-o:after { bottom: 50%; } .btn-fill-vert-o:hover { color: #fff; } .btn-fill-vert-o:hover:before, .btn-fill-vert-o:hover:after { height: 50%; opacity: 1; } .btn-fill-vert-o.btn-orange:before, .btn-fill-vert-o.btn-orange:after { background-color: #e67e22; } .btn-fill-vert-o.btn-orange:hover { border-color: #e67e22; } .btn-fill-vert { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; overflow: hidden; } .btn-fill-vert:before, .btn-fill-vert:after { content: ''; position: absolute; width: 100%; height: 0; opacity: 0; left: 0; z-index: -1; } .btn-fill-vert:before { top: 50%; } .btn-fill-vert:after { bottom: 50%; } .btn-fill-vert:hover { color: #fff; } .btn-fill-vert:hover:before, .btn-fill-vert:hover:after { height: 50%; opacity: 1; } .btn-fill-vert.btn-red:before, .btn-fill-vert.btn-red:after { background-color: #e74c3c; } .btn-fill-vert.btn-red:hover { border-color: #e74c3c; } .btn-fill-horz-o { background-color: transparent; border: 1px solid #d0d0d0; color: #B8B8B8; overflow: hidden; } .btn-fill-horz-o:before, .btn-fill-horz-o:after { content: ''; position: absolute; top: 0; width: 0; height: 100%; opacity: 0; z-index: -1; } .btn-fill-horz-o:before { left: 50%; } .btn-fill-horz-o:after { right: 50%; } .btn-fill-horz-o:hover { color: #fff; } .btn-fill-horz-o:hover:before, .btn-fill-horz-o:hover:after { width: 50%; opacity: 1; } .btn-fill-horz-o.btn-green:before, .btn-fill-horz-o.btn-green:after { background-color: #2ecc71; } .btn-fill-horz-o.btn-green:hover { border-color: #2ecc71; } .btn-fill-horz { background-color: #e5e5e5; border: 1px solid #e5e5e5; color: #a6a6a6; overflow: hidden; } .btn-fill-horz:before, .btn-fill-horz:after { content: ''; position: absolute; top: 0; width: 0; height: 100%; opacity: 0; z-index: -1; } .btn-fill-horz:before { left: 50%; } .btn-fill-horz:after { right: 50%; } .btn-fill-horz:hover { color: #fff; } .btn-fill-horz:hover:before, .btn-fill-horz:hover:after { width: 50%; opacity: 1; } .btn-fill-horz.btn-blue:before, .btn-fill-horz.btn-blue:after { background-color: #3498db; } .btn-fill-horz.btn-blue:hover { border-color: #3498db; }

看完上述内容，你们掌握使用CSS 属性怎么实现按钮悬停边框和背景动画集合的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


当前名称：使用CSS属性怎么实现按钮悬停边框和背景动画集合
文章路径：http://pwwzsj.com/article/gjdopg.html

其他资讯