Maison >interface Web >tutoriel HTML >基础理解2:CSS3按钮动画_html/css_WEB-ITnose
基础理解2:CSS3按钮动画_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:15:28870parcourir
一个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>
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：html 5 新特性_html/css_WEB-ITnoseArticle suivant：关于DOM 事件流的三个阶段_html/css_WEB-ITnose