css动画按钮样式
HTML代码
<a href="#" class="look-more transition">查看我的课程</a>
CSS代码
1 .look-more{border: solid 1px #0dbba1;padding: 5px 10px;text-decoration: none;margin-top: 20px;line-height: 20px;color: #333;display:block;z-index: 1;position: relative;} 2 .look-more:before{content: "";position: absolute;top: 0;left:0px;width:100%;height:100%;background: #0dbba1;transition: all 0.3s;opacity:0; z-index: -1; 3 -webkit-transform: scale3d(.7,1,1); 4 transform: scale3d(.7,1,1); 5 -webkit-transition: -webkit-transform .4s,opacity .4s; 6 transition: transform .4s,opacity .4s; 7 -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); 8 transition-timing-function: cubic-bezier(.2,1,.3,1);} 9 .look-more:hover{color: #fff;} 10 .look-more:hover:before{opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0)}
1行重点：z-index: 1; position: relative; before伪元素需要定位，且父元素如果不设置z-index:1;那么伪元素的底色不会出现
更多漂亮的样式可以自学：http://www.jq22.com/jquery-info2595
第二套
.look-more{border: solid 1px #0dbba1;padding: 5px 10px;text-decoration: none;margin-top: 20px;line-height: 20px;color: #333;display:block;z-index: 1;position: relative;overflow: hidden;} .look-more:before{content: "";position: absolute;top: 0;left:0px;width:100%;height:100%;background: #0dbba1;transition: all 0.3s;opacity:0; z-index: -1; -webkit-transform: rotate3d(0,0,1,-45deg) translate3d(0,-3em,0); transform: rotate3d(0,0,1,-45deg) translate3d(0,-3em,0); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transition: -webkit-transform .3s,opacity .3s,background-color .3s; transition: transform .3s,opacity .3s,background-color .3s} .look-more:hover{color: #fff;} .look-more:hover:before{ opacity: 1; background-color: #0dbba1; -webkit-transform: rotate3d(0,0,1,0deg); transform: rotate3d(0,0,1,0deg); -webkit-transition-timing-function: cubic-bezier(.2,1,.3,1); transition-timing-function: cubic-bezier(.2,1,.3,1)}
