Heim > Web-Frontend > HTML-Tutorial > 基础理解2:CSS3按钮动画_html/css_WEB-ITnose

基础理解2:CSS3按钮动画_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:15:28
Original
861 Leute haben es durchsucht

一个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>
Nach dem Login kopieren

 

   

   

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage