给网页中的button加动画效果

网页中的很多事件交互都是通过点击页面中的按钮来实现的，给按钮加一点动画效果也会让网页看起来生动一些，以下就是一个简单的例子：

此按钮的动画主要是通过css的transform动画，伪元素，伪类来实现；

第一步：按钮的html(此处按钮设为a元素)

<a href="#" class=""btn btn-white>discover</a>

第二步：编写按钮的css样式

按钮的基本样式
.btn:link, .btn:visited{ text-transform: uppercase; text-decoration: none; padding: 15px 40px; display: inline-block; margin-top: 30px; border-radius: 100px; transition: all .2s; position: relative; animation: moveInBottom 1s 0.75s; animation-fill-mode: backwards; } .btn-white{ background-color:#fff; color:#777; }

按钮当鼠标悬浮时的状态：
.btn:hover{ transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }

当按钮点击时的状态：
.btn:active{ transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0,0,0,0.2); }

添加btn的伪元素，实现鼠标悬浮时，背景扩大消失的效果：
.btn::after{ content: ''; display: inline-block; height: 100%; width: 100%; border-radius: 100px; position: absolute; top: 0; left: 0; z-index: -1; transition: all .4s ; } .btn-white::after{ background:#fff; } .btn:hover::after{ transform: scaleX(1.4) scaleY(1.6); opacity: 0; }

@keyframes moveInBottom{ 0%{ opacity: 0; transform: translateY(100px); } 100%{ opacity: 1; transform: translate(0); } }

转载于:https://www.cnblogs.com/csuwujing/p/9577075.html