基於css3的鼠標滑動按鈕動畫
htmljavascript
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基於css3的鼠標滑動按鈕動畫</title> </head> <body> <link rel="stylesheet" type="text/css" href="css/btn1.css"> <div id="wrap"> <a href="#" class="btn-slide"><span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">火箭</span> <span class="title-hover">帶你飛</span> </a><a href="#" class="btn-slide2"><span class="circle2"><i class="fa fa-download"></i></span><span class="title2">下載</span> <span class="title-hover2">點擊下載</span> </a> </div> <link rel="stylesheet" type="text/css" href="css/btn2.css"> <div class="container1"> <div class="con_down1"> <i class="fa fa-download fa-2x"></i> <h4> Download Now</h4> </div> <div class="con_sizes1"> <div class="sizes1"> <h5 class="size1"> 34.5 MB</h5> <div class="sizes_abs1"> </div> </div> </div> </div> <div class="container2"> <div class="con_down2"> <i class="fa fa-download fa-2x"></i> <h4> Download now</h4> </div> <div class="con_sizes2"> <div class="sizes2"> <h5 class="size2"> 34.5 MB</h5> <div class="sizes_abs2"> </div> </div> </div> </div> <div> <br /> <br /> </div> <link rel="stylesheet" type="text/css" href="css/btn3.css"> <div class="center"> <a class="spinningeffect" href="#" target="_blank"> <img src="img/blogger-logo1.jpg" /> </a> </div> <div> <br /> </div> <link rel="stylesheet" type="text/css" href="css/focus.css"> <div class="center"> <a class="zoomeffect" href="#" target="_blank"> <img src="img/addfocus.jpg" /></a> </div> <div> <br /> </div> <link rel="stylesheet" type="text/css" href="css/btn4.css"> <div class="mudwnpbutton center"> <a href="#" target="blank" rel="nofollow">預覽</a> </div> <link rel="stylesheet" type="text/css" href="css/btn5.css"> <div class="whitebuttondemo"> <a href="#">button</a> <span class="up">message</span> </div> <div> <br /> <br /> </div> <div class="whitebutton"> <a href="#">button</a> <span class="up">top message</span> <span class="down">1.6MB .rar </span> </div> <div> </div> <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script> </body> </html>
btn1css
#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;
}
btn2html
/*--按鈕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;
}
btn3java
.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;
}
btn4css3
.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;
}
相關文章
- 1. 基於css3的鼠標滑動按鈕動畫之CSS--續
- 2. 經常使用的css3鼠標懸停按鈕動畫特效
- 3. [CSS3] 動畫暗角按鈕
- 4. CSS3鼠標懸停邊框線條動畫按鈕
- 5. css3模仿微信滑動按鈕
- 6. CSS3製作簡單動畫按鈕
- 7. 20種炫酷CSS3按鈕鼠標滑過特效
- 8. css實現鼠標移動 按鈕平滑過渡效果
- 9. css之鼠標滑過按鈕變化
- 10. 分享十個CSS3鼠標滑過文字動畫特效
- 更多相關文章...
- • ionic 滑動框 - ionic 教程
- • jQuery Mobile 按鈕圖標 - jQuery Mobile 教程
- • 算法總結-滑動窗口
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 基於css3的鼠標滑動按鈕動畫之CSS--續
- 2. 經常使用的css3鼠標懸停按鈕動畫特效
- 3. [CSS3] 動畫暗角按鈕
- 4. CSS3鼠標懸停邊框線條動畫按鈕
- 5. css3模仿微信滑動按鈕
- 6. CSS3製作簡單動畫按鈕
- 7. 20種炫酷CSS3按鈕鼠標滑過特效
- 8. css實現鼠標移動 按鈕平滑過渡效果
- 9. css之鼠標滑過按鈕變化
- 10. 分享十個CSS3鼠標滑過文字動畫特效