基于css3的鼠标滑动按钮动画-白红宇

基于css3的鼠标滑动按钮动画

阅读量：5863 次

发布时间：2019-06-19

本文共 6106 字，大约阅读时间需要 20 分钟。

html

      
    
               
     
           
      基于css3的鼠标滑动按钮动画               
      
            
       
             
        
         
          
                
           
            火箭 
            
             带你飞 
             
              
               
                
                 下载 
                 
                  点击下载           
                  
                        
                   
                         
                    
                          
                     
                           
                           Download Now
          
                      
                            
                       
                             
                        
                              34.5 MB     
                         
                                                   
                          
                                
                           
                                 
                            
                                  
                                  Download now
          
                             
                                   
                              
                                    
                               
                                     34.5 MB     
                                
                                                          
                                 
                                       
                                       
                                       
                                 
     
                                 
                                       
                                  
                                        
                                   
                                         
                                                   
                                    
                                          
                                          
                                    
     
                                    
                                          
                                     
                                           
                                      
                                            
                                                 
                                       
                                             
                                             
                                       
     
                                       
                                             
                                        
                                              
                                         
                                          预览          
                                          
                                                
                                           
                                                 
                                            
                                             button 
                                             
                                              message          
                                              
                                                    
                                                    
                                                    
                                              
     
                                              
                                                    
                                               
                                                button 
                                                
                                                 top message 
                                                 
                                                  1.6MB    .rar

btn1

 #wrap {    margin: 20px auto;    text-align: center;}#wrap br {    display: none;}.btn-slide, .btn-slide2 {    position: relative;    display: inline-block;    height: 50px;    width: 200px;    line-height: 50px;    padding: 0;    border-radius: 50px;    background: #fdfdfd;    border: 2px solid #0099cc;    margin: 10px;    transition: .5s;}.btn-slide2 {    border: 2px solid #efa666;}.btn-slide:hover {    background-color: #0099cc;}.btn-slide2:hover {    background-color: #efa666;}.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {    right: 100%;    margin-right: -45px;    background-color: #fdfdfd;    color: #0099cc;}.btn-slide2:hover span.circle2 {    color: #efa666;}.btn-slide:hover span.title, .btn-slide2:hover span.title2 {    right: 40px;    opacity: 0;}.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {    opacity: 1;    right: 40px;}.btn-slide span.circle, .btn-slide2 span.circle2 {    display: block;    background-color: #0099cc;    color: #fff;    position: absolute;    float: right;    margin: 5px;    line-height: 42px;    height: 40px;    width: 40px;    top: 0;    right: 0;    transition: .5s;    border-radius: 50%;}.btn-slide2 span.circle2 {    background-color: #efa666;}.btn-slide span.title,  .btn-slide span.title-hover, .btn-slide2 span.title2,  .btn-slide2 span.title-hover2 {    position: absolute;    right: 90px;    text-align: center;    margin: 0 auto;    font-size: 16px;    font-weight: bold;    color: #30abd5;    transition: .5s;}.btn-slide2 span.title2,  .btn-slide2 span.title-hover2 {    color: #efa666;    right: 80px;  }.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    right: 80px;    opacity: 0;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {    color: #fff;}

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;}

btn3

.spinningeffect img {/* Spinning Social Icons Widget By www.mudwnp.blogspot.com */-moz-transition: all 0.8s ease-in-out;-webkit-transition: all 0.8s ease-in-out;-o-transition: all 0.8s ease-in-out;-ms-transition: all 0.8s ease-in-out;transition: all 0.8s ease-in-out;}.spinningeffect img:hover {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}.center {    text-align: center;}

btn4

.mudwnpbutton {   color: #222;   background: #9dea4f;   padding: 20px 30px;   -webkit-transition:-webkit-box-shadow .5s ease;   -moz-transition:-webkit-box-shadow .5s ease;   -ms-transition:-webkit-box-shadow .5s ease;   -o-transition:-webkit-box-shadow .5s ease;   transition:-webkit-box-shadow .5s ease;   margin:0 auto;   font: normal 16px Arial, Verdana;   width: 100px;}.mudwnpbutton:hover {   color: #222;   background: #BBFD12;   -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);   -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);   -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);   -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);   box-shadow:0 0 0 9999px rgba(0,0,0,.4);   position:relative;   z-index:99999;}.mudwnpbutton a {   color: #222;   text-decoration: none;   font: normal 16px Arial, Verdana;}

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

你可能感兴趣的文章

[UWP]了解模板化控件(5.1)：TemplatePart vs. VisualState