Home > Article > Web Front-end > 基础理解2:CSS3按钮动画_html/css_WEB-ITnose
基础理解2:CSS3按钮动画_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:15:28818browse
一个Css3按钮效果很好，仔细看了一下发现就是::after,::before然后加上transition，transform等效果实现，主要关注一下几点就能轻松实现：
1、伪类需要position定位，相对的button也需要定位一下
2、设置一下z-index属性,一般button设置为1， button::after或者button:before设置为-1即可
3、transition实现动画效果，如果需要transform旋转一下
代码如下：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><style type="text/css">button:hover:after {width: 100%;} button:hover {color: #000;} button:after {content: '';background-color: #fff;transition: all .5s;width: 0%;position: absolute;top: 3px;left: 0px;height: 34px;z-index: -1;} button {width: 100px;height: 40px;border: 0px;color: white;background-color: red;font-size: 16px;position: relative;z-index: 1;cursor: pointer;font-family: 'Microsoft YaHei';}</style></head><body><button>保存</button></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html 5 新特性_html/css_WEB-ITnoseNext article：关于DOM 事件流的三个阶段_html/css_WEB-ITnose