今天来实现一个按钮的动画效果:全部为css
动画前的效果为:
动画后的效果为:
接下来讲一下怎么实现这个小效果:
首先是一个button,button里面包含一个span标签,span里面写一个“hover”然后设置button为行内块级元素,设置圆角,设置一个transtion转换效果设置span标签为行内块级元素,position: relative;
,transform的转换效果在span标签后设置一个after,after是可以在此元素后追加一个content,并且可以设置样式,透明度为0将元素隐藏起来最后分别设置元素的hover效果就好了
其中主要用到了transform,after,hover等,有兴趣的小伙伴可以了解下!也可以私聊询问使用方法。
最后附上源码:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>按钮动画</title><style>body {text-align: center;}.button {display: inline-block;border-radius: 4px;background-color: #f4511e;border: none;color: #FFFFFF;text-align: center;font-size: 28px;padding: 20px;width: 200px;transition: all 0.5s;cursor: pointer;margin: 5px;}.button span {cursor: pointer;display: inline-block;position: relative;transition: 0.5s;}.button span:after {content: '»';position: absolute;opacity: 0;top: 0;right: -20px;transition: 0.5s;}.button:hover span {padding-right: 25px;}.button:hover span:after {opacity: 1;right: 0;}</style></head><body><h2>按钮动画</h2><button class="button" style="vertical-align:middle"><span>Hover </span></button></body></html>