基于css3的鼠标滑动按钮动画之CSS--续

2019独角兽企业重金招聘Python工程师标准>>>

btn2

/*--按钮1--*/ .container1 {width:200px;display:block;margin:20px auto;position:relative;font-family:droid arabic kufi; } .con_down1 {display:block;cursor:pointer;background-color:#F6EB96;width:190px;height:50px;padding-left:10px;padding-top:5px;text-align:left;border-bottom:4px solid #D8B83C;border-radius:5px;position:relative;line-height:50px; } .con_down1 .fa-download{position:absolute;right:10px;top:15px;color:#895D0A; } .con_down1 h4 {color:#895D0A;text-transform:uppercase;margin:0; } .sizes1 h5 {margin:0; } .sizes1 {background-color:#E3E3E3;width:100px;height:30px;z-index:-9;padding-top:2px;border-bottom:4px solid #AAA9A9;position:absolute;top:13px;left:20px;transition:.5s all ease-in-out; } .size {line-height:30px;text-align:center;color:#4B4B4B; } .sizes_abs1 {background-color:#F6EB96;cursor:pointer;width:20px;border-bottom:4px solid #D8B83C;border-bottom-left-radius:5px;border-top-left-radius:5px;height:55px;position:absolute;top:-13px;left:-20px;z-index:2; } .container1:hover .sizes1 {left:-100px; } .container1:hover .con_down1 {background-color:#F1DD5E;border-bottom-left-radius:0;border-top-left-radius:0; } .container1:hover .sizes_abs1 {background-color:#F1DD5E; }/*--按钮2--*/ .container2 {width:200px;display:block;margin:20px auto;position:relative;font-family:droid arabic kufi; } .con_down2 {display:block;cursor:pointer;background-color:#F6EB96;width:190px;height:50px;padding-left:10px;padding-top:5px;text-align:left;border-bottom:4px solid #D8B83C;border-radius:5px;position:relative;line-height:50px;transition:.5s all ease-in-out; } .con_down2 .fa-download {position:absolute;right:10px;top:15px;color:#895D0A; } .con_down2 h4 {color:#895D0A;text-transform:uppercase;margin:0; } .sizes2 h5 {margin:0; } .sizes2 {background-color:#E3E3E3;width:100px;height:30px;z-index:-9;position:absolute;bottom:22px;right:50%;margin-right:-50px;transition:.5s all ease-in-out; } .size {line-height:30px;text-align:center;color:#4B4B4B; } .sizes_abs2 {background-color:#F6EB96;cursor:pointer;width:200px;border-bottom:4px solid #D8B83C;border-bottom-left-radius:5px;border-bottom-right-radius:5px;height:20px;position:absolute;left:-50px;bottom:-22px;z-index:2; } .container2:hover .sizes2 {bottom:-30px; } .container2:hover .con_down2 {background-color:#F1DD5E;border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0; } .container2:hover .sizes_abs2 {background-color:#F1DD5E; }

btn5

/* Custom Button */  .whitebutton {margin: 0 auto;width: 200px; } .whitebutton a {background: #dddddd;color: #666;display: block;font-size: 17px;font-weight: 700;font-family: 'Droid Arabic Kufi',Verdana,sans-serif;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2; } .whitebutton a:before {content: '\f019';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-left: 0px;margin-right: 30px; } .whitebutton span {background: #444;color: #fff;display: block;font-size: 12px;font-family: 'Droid Arabic Kufi', Verdana,sans-serif;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold; } .whitebutton .up {height: 40px;background: #e25734;margin: 0px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms; } .whitebutton .down {height: 40px;margin: -40px auto;opacity: 0;border-radius: 5px 5px 0 0;transform: translate(0,-50px);transition: 350ms; } .whitebutton .down:before {content:'\f14a';font-family: FontAwesome;font-weight: normal;margin-left: -6px;color: #aaa; } .whitebutton:hover .up {opacity: 1;transform: translate(0,0); } .whitebutton:hover .down {opacity: 1;transform: translate(0,-90px); } .whitebuttondemo {margin: 20px auto;padding: 20px 0;width: 200px; } .whitebuttondemo a {background: #e25734;color: #fff;display: block;font-size: 17px;font-weight: 700;font-family:'Droid Arabic Kufi',Verdana,sans-serif;height: 50px;line-height: 50px;text-align: center;text-decoration: none;text-transform: uppercase;width: 200px;position: relative;z-index: 2;transition: 350ms; } .whitebuttondemo a:before {content:'\f002';font-family: FontAwesome;font-weight: normal;padding: 8px;margin-left: 0px;margin-right: 30px; } .whitebuttondemo a:hover {color: #fff; } .whitebuttondemo span {background: #444;color: #fff;display: block;font-size: 12px;font-family: 'Droid Arabic Kufi', Verdana,sans-serif;height: 40px;line-height: 40px;text-align: center;width: 200px;z-index: 1;text-transform: uppercase;font-weight: bold; } .whitebuttondemo .up {background: #444;margin: 0px auto;opacity: 0;border-radius: 0 0 5px 5px;transform: translate(0,-50px);transition: 350ms; } .whitebuttondemo:hover .up {opacity: 1;transform: translate(0,0); }

 focus

.zoomeffect img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 10px 5px 0; } .zoomeffect img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }

 

转载于:https://my.oschina.net/u/1994482/blog/468385

总结

以上是生活随笔为你收集整理的基于css3的鼠标滑动按钮动画之CSS--续的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。