輪播圖CSS

時間 2019-11-12

標籤 css 欄目 CSS 简体版

原文原文鏈接

css3中的animation:動畫名持續時間動畫的速度曲線動畫開始以前的延遲動畫播放的次數是否應該輪流反向播放動畫javascript

動畫播放次數：n（定義應該播放多少次動畫）； infinite（無限循環）
動畫延遲：ns （默認爲零）
是否反向播放： normal alterna
動畫的速度曲線; linear (勻速)；ease（默認先快而後加速，最後變慢）；ease-in（以低速開始）；ease-out（以低速結束）；ease-in-out（動畫一低速開始和結束）
cubic-bezier（n，n，n，n）css

@keyframes（用來改變更畫軌跡或者效果）和animate
1須要建立一個名字，後面綁定動畫時須要
2.from 起始時0%
3 to到達終點時等同於100%html

box-sizing屬性：content-box（border和padding值不計算在width以內）；padding-box（padding計算在width以內）；border-box（border和padding計算在width以內）
content屬性：
a:after
{
content: " (" attr(href) ")";
}java

HTML：css3

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="main">
        <div class="imgs">
            <a href="javascript:void(0);" class="first-img"><img src="img/img1.jpg"></a>
            <a href="javascript:void(0);"><img src="img/img2.jpg"></a>
            <a href="javascript:void(0);"><img src="img/img3.jpg"></a>
            <a href="javascript:void(0);"><img src="img/img4.jpg"></a>
            <a href="javascript:void(0);"><img src="img/img5.jpg"></a>
        </div>

        <div class="controller">
            <div class="show-static"></div>
            <div class="show-run"></div>
            <a class="controller-tag1" href="javascript:void(0);"><img src="img/img1.jpg"></a>
            <a class="controller-tag2" href="javascript:void(0);"><img src="img/img2.jpg"></a>
            <a class="controller-tag3" href="javascript:void(0);"><img src="img/img3.jpg"></a>
            <a class="controller-tag4" href="javascript:void(0);"><img src="img/img4.jpg"></a>
            <a class="controller-tag5" href="javascript:void(0);"><img src="img/img5.jpg"></a>

    </div>

</body>
</html>

CSS：

* {    margin: 0;    padding: 0;}.main {    position: relative;    width: 1200px;    margin: 50px auto;    border: solid 1px #ccc;}.imgs {    position: relative;    width: 100%;    height: 600px;    overflow: hidden;}.main a {    display: block;    width: 100%;    height: 100%;}.imgs a:first-child{    animation: imgAnimate 18s linear infinite alternate;}.imgs:hover > .first-img,.imgs:hover + .controller .show-run {    animation-play-state: paused;}.imgs a img {    width: 100%;    height: 100%;}.controller {    position: absolute;    top: 0px;    right: 0px;    left: 0px;    bottom: 0px;    width: 80%;    height: 40px;    margin: 0 auto;    margin-top: 560px;}.controller .show-run {    margin-bottom: -17px;    height: 16px;    width: 20%;    background: #FDB024;    animation: showAnimate 18s linear infinite alternate;}.controller .show-static {    margin-bottom: -17px;    height: 17px;    width: 100%;    background: #575757;}.controller a {    display: block;    box-sizing: border-box;    float: left;    width: 20%;    height: 17px;    margin: 0px;    border: solid 1px #CCC;}.controller a img {    display: none;    box-sizing: border-box;    width: 100%;    height: 150px;    margin-top: -160px;    border: solid 1px #FDB024;}.controller a::after {    position: relative;    content: "";    display: none;    margin-left: -20px;    left: 50%;    width: 10px;    height: 0px;    border-left:20px solid transparent;    border-right:20px solid transparent;    border-top: solid 10px #FDB024;}.controller-tag1:hover > img,.controller-tag1:hover::after{    display: block;}.controller-tag2:hover > img,.controller-tag2:hover::after{    display: block;}.controller-tag3:hover > img,.controller-tag3:hover::after{    display: block;}.controller-tag4:hover > img,.controller-tag4:hover::after{    display: block;}.controller-tag5:hover > img,.controller-tag5:hover::after{    display: block;}@keyframes imgAnimate{    0% {        margin-top: 0px;    }    11.11% {        margin-top: 0px;    }    22.22% {        margin-top: -600px;    }    33.33% {        margin-top: -600px;    }    44.44% {        margin-top: -1200px;    }    55.55% {        margin-top: -1200px;    }    66.66% {        margin-top: -1800px;    }    77.77% {        margin-top: -1800px;    }    88.88% {        margin-top: -2400px;    }    100% {        margin-top: -2400px;    }}@keyframes showAnimate{    0% {        margin-left: 0px;    }    11.11% {        margin-left: 0px;    }    22.22% {        margin-left: 20%;    }    33.33% {        margin-left: 20%;    }    44.44% {        margin-left: 40%;    }    55.55% {        margin-left: 40%;    }    66.66% {        margin-left: 60%;    }    77.77% {        margin-left: 60%;    }    88.88% {        margin-left: 80%;    }    100% {        margin-left: 80%;    }}

1. css實現輪播圖
2. 輪播圖 html+css+js
3. 純CSS實現輪播圖
4. 圖片輪播css實現
5. HTML+CSS +JS 輪播圖
6. 純CSS 多圖片輪播
7. 輪播圖 html + css + js
8. 純css實現輪播圖
9. Jquery圖片輪播和CSS圖片輪播
10. 純css輪播
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• Flink 數據傳輸及反壓詳解
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

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