按鈕動畫學習

時間 2019-12-11

標籤按鈕動畫學習简体版

原文原文鏈接

index.htmljavascript

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠標滑動按鈕動畫</title>
</head>
<body>
    <link rel="stylesheet" type="text/css" href="css/btn1.css">
    <div id="wrap">
        <a href="#"><span><i class="fa fa-rocket"></i></span>
            <span>山車次</span> <span>可是</span> </a><a href="#"
               ><span><i class="fa fa-download"></i></span><span
                   >下載</span> <span>點擊下載</span> </a>
    </div>
    <link rel="stylesheet" type="text/css" href="css/btn2.css">
    <div>
        <div>
            <i class="fa fa-download fa-2x"></i>
            <h4>
                Download Now</h4>
        </div>
        <div>
            <div>
                <h5>
                    34.5 MB</h5>
                <div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <i class="fa fa-download fa-2x"></i>
            <h4>
                Download now</h4>
        </div>
        <div>
            <div>
                <h5>
                    34.5 MB</h5>
                <div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <br />
        <br />
    </div>
    <link rel="stylesheet" type="text/css" href="css/btn3.css">
    <div>
        <a 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>
        <a 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>
        <a href="#">button</a> <span>message</span>
    </div>
    <div>
        <br />
        <br />
    </div>
    <div>
        <a href="#">button</a> <span>top message</span> <span>1MB
            .rar </span>
    </div>
    <div>
    </div>
    <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
</body>
</html>

btn1.csscss

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

btn3.csshtml

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

focus.cssjava

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。