CSS3 制作一个边框向周围散开的按钮效果 - html/

2023/05/27 · admin

我们将要达到的是如下的效果(若效果未出现请刷新)：分析主要还是运用 CSS3的transition, animation, transform还有渐变背景等特性。由于按钮在鼠标进入时有不同的样式，所以要对其:hover状态运用另外的背景样式通过对按钮的:after状态添加一个内容为空的元素，并给其一个边框，这样在鼠标进入后我们让这个隐藏的空元素变大直到淡出，就得到我们看到的效果了构建基本按钮样式做为例子，我们的页面会很简单，就放一个a标签作为按钮，然后对其写样式让它看起来更像一个按钮。并定义好:after元素。 <style type="text/css"> .button{ cursor: pointer; text-decoration: none; padding: 10px; color: #fff; border-radius: 10px; position: absolute; top: 100px; left: 48%; background: linear-gradient(#93c, #50c); border:1px solid purple; } .button:after{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; opacity: 0; border:1px solid purple; } .button:hover{ background: linear-gradient(#b5e, #93c); } </style> <body> <a class="button" href="javascript：void(0);" >Fake Button</a> </body> 添加动画首先用keyframes定义动画 @-webkit-keyframes boom { 0% { opacity: 0 } 5% { opacity: 1 } 100% { -webkit-transform: scale(1.3); transform: scale(1.3); opacity: 0 } } @keyframes boom { 0% { opacity: 0 } 5% { opacity: 1 } 100% { transform: scale(1.3); transform: scale(1.3); opacity: 0 } } 再将其运用到按钮后面隐藏的元素上 .button:hover:after { -webkit-animation: boom 0.5s ease; animation: boom 0.5s ease; }

CSS3 制作一个边框向周围散开的按钮效果 - html/

相关文章

最新评论

最近发表

网站分类

文章归档