Heim >Web-Frontend >HTML-Tutorial >css3代码实现的鼠标悬浮按钮效果代码实例_html/css_WEB-ITnose
css3代码实现的鼠标悬浮按钮效果代码实例_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:341445Durchsuche
css3代码实现的鼠标悬浮按钮效果代码实例:
在css3之前，鼠标悬浮于按钮之上，无非是设置按钮的大小、字体颜色或者背景图片等简单的项目，但是css3的出现，可以让设置变得丰富多彩，下面就是一个css3实现的此效果。
代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*, *:before, *:after{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body{ padding-top:10%; text-align:center; overflow-x:hidden; } .btn-edge{ position:relative; display:inline-block; padding:1rem 2rem; font-family:'Titillium Web' , sans-serif; font-weight:700; text-decoration:none; font-size:3rem; color:#333; background-image:-webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)), -webkit-gradient(linear, left top, left bottom, from(#333), to(#333)); background-image:-webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333), -webkit-linear-gradient(#333, #333); background-image:linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333); background-repeat:no-repeat; -webkit-background-size:2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem; background-size:2rem 5px, 2rem 5px, 2rem 5px, 2rem 5px, 5px 2rem, 5px 2rem, 5px 2rem, 5px 2rem; background-position:0 0, 100% 0, 0 100%, 100% 100%; -webkit-box-shadow:inset 0 0 0 5px rgba(255, 99, 71, 0); box-shadow:inset 0 0 0 5px rgba(255, 99, 71, 0); -webkit-transition: background-size 1s .4s, -webkit-box-shadow .4s, color .4s; transition: background-size 1s .4s, box-shadow .4s, color .4s; -webkit-transform: translateZ(0); transform: translateZ(0); } .btn-edge:hover{ color:tomato; -webkit-background-size:100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%; background-size:100% 5px, 100% 5px, 100% 5px, 100% 5px, 5px 100%, 5px 100%, 5px 100%, 5px 100%; -webkit-box-shadow:inset 0 0 0 5px tomato; box-shadow:inset 0 0 0 5px tomato; -webkit-transition:background-size 1s, -webkit-box-shadow .4s .6s, color .4s .6s; transition:background-size 1s, box-shadow .4s .6s, color .4s .6s; } </style></head><body><a class="btn-edge" href="http://www.softwhy.com">蚂蚁部落</a> </div></body></html> 原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15539
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css3实现的文本无法选中效果_html/css_WEB-ITnoseNächster Artikel：没有猜中开头，更加没有预料结尾的我，正努力走在向程序媛发展的道路上……_html/css_WEB-ITnose