a { text-decoration:none; } .more { perspective:200px; width:150px; height:50px; line-height:50px; border:1px solid #ccc; text-align:center; -webkit-backface-visibility:hidden; -moz-osx-font-smoothing:grayscale; -webkit-transition:border-color 2s,color 4s; transition:border-color 0.4s,color 0.4s; } .more:hover { color:#fff; border-color:#1070cf; } .more a { display:block; color:inherit; } .more:hover::before { opacity:1; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); } .more::before { -webkit-transition-timing-function:cubic-bezier(0.2,1,0.3,1); transition-timing-function:cubic-bezier(0.2,1,0.3,1); } .more { position:relative; z-index:1; cursor:pointer; } .more:before { content:''; background:red; position:absolute; left:0; top:0; width:150px; height:50px; z-index:-1; } .more:before { content:''; background:red; position:absolute; left:0; top:0; width:150px; height:50px; z-index:-1; opacity:0; -webkit-transform:scale3d(0.2,1,1); transform:scale3d(0.2,1,1); -webkit-transition:-webkit-transform 0.4s,opacity 0.4s; }
利用html5+css3制作的动画按钮特效,主要用到以下技术点:
1.首先写一个盒子,然后添加背景色,边框
2.添加css3特效transform: translate3d,然后定位,透明度等