美文网首页
点击缩略图切换背景(纯css3动画)

点击缩略图切换背景(纯css3动画)

作者: w_wx_x | 来源:发表于2018-12-28 13:36 被阅读2次
    效果.gif

    html结构

    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>CSS3 Full Background Slider </title>
            <link rel="stylesheet" href="./css/test.css" />
        </head>
    
        <body>
            <div class="slider">
                <ul class="clearfix">
                    <li><a href="#bg1">Hipster Fashion Haircut </a></li>
                    <li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>
                    <li><a href="#bg3">My haire is sooo fantastic!</a></li>
                    <li><a href="#bg4">Eat healthy &amp; excersice!</a></li>
                    <li><a href="#bg5">Lips so kissable I could die ...</a></li>
                </ul>
            </div>
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2927464136,30546800&fm=15&gp=0.jpg" alt=""
                class="bg slideLeft" id="bg1" />
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=135197569,3162678290&fm=15&gp=0.jpg" alt=""
                class="bg slideBottom" id="bg2" />
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2761419731,1583069470&fm=27&gp=0.jpg" alt=""
                class="bg zoomIn" id="bg3" />
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1800437085,3697988398&fm=27&gp=0.jpg" alt=""
                class="bg zoomOut" id="bg4" />
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2547491788,3355958735&fm=27&gp=0.jpg" alt=""
                class="bg rotate" id="bg5" />
        </body>
    </html>
    

    css样式

    @font-face {
        font-family: 'Yesteryear';
        font-style: normal;
        font-weight: 400;
        src: local('Yesteryear'), local('Yesteryear-Regular'), url(http://fonts.gstatic.com/s/yesteryear/v6/dg4g_p78rroaKl8kRKo1n7sNTg.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    
    html,
    body {
        height: 100%;
    }
    
    @keyframes slideLeft {
        0% {
            left: -500px;
        }
        100% {
            left: 0;
        }
    }
    
    @keyframes slideBottom {
        0% {
            top: 350px;
        }
        100% {
            top: 0;
        }
    }
    @keyframes zoomIn {
        0% {
            transform: scale(0.1);
        }
        100% {
            transform: none;
        }
    }
    @keyframes zoomOut {
        0% {
            transform: scale(2);
        }
        100% {
            transform: none;
        }
    }
    @keyframes rotate {
        0% {
            transform: rotate(-360deg) scale(0.1);
        }
        100% {
            transform: none;
        }
    }
    @keyframes notTarget {
        0% {
            z-index: 75;
        }
        100% {
            z-index: 75;
        }
    }
    
    
    
    .slider {
        position: absolute;
        width: 100%;
        text-align: center;
        z-index: 999;
        bottom: 100px;
    }
    
    .slider li {
        display: inline-block;
        width: 170px;
        height: 130px;
        margin-right: 15px;
    }
    
    .slider a {
        display: inline-block;
        width: 170px;
        padding-top: 70px;
        padding-bottom: 20px;
        cursor: pointer;
        border: 2px solid #fff;
        border-radius: 5px;
        text-decoration: none;
        font-size: 22px;
        font-family: 'Yesteryear', cursive;
        color: #fff;
        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8), -2px -2px 1px rgba(0, 0, 0, 0.3), -3px -3px 1px rgba(0, 0, 0, 0.3);
        vertical-align: top;
        position: relative;
    }
    
    .slider li:nth-child(1) a {
        background-color: #02646e;
    }
    
    .slider li:nth-child(2) a {
        background-color: #eb0837;
    }
    
    .slider li:nth-child(3) a {
        background-color: #67b374;
    }
    
    .slider li:nth-child(4) a {
        background-color: #e6674a;
    }
    
    .slider li:nth-child(5) a {
        background-color: #e61061;
    }
    
    .slider li a::after{
        content:"";
        display: block;
        width: 120px;
        height: 120px;
        border: 5px solid #fff;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: -80px;
        margin-left: -60px;
    }
    .slider li a::before{
        content: "";
        display: block;
        width: 120px;
        height: 120px;
        border: 5px solid #fff;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: -80px;
        margin-left: -60px;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.3)
    }
    .slider li a:hover::before{
        opacity: 0;
    }
    
    /* 设置缩略图背景图像 */
    .slider li:nth-of-type(1) a::after {
        background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2927464136,30546800&fm=15&gp=0.jpg) no-repeat center;
    }
    
    .slider li:nth-of-type(2) a::after {
        background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=135197569,3162678290&fm=15&gp=0.jpg) no-repeat center;
    }
    
    .slider li:nth-of-type(3) a::after {
        background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2761419731,1583069470&fm=27&gp=0.jpg) no-repeat center;
    }
    
    .slider li:nth-of-type(4) a::after {
        background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1800437085,3697988398&fm=27&gp=0.jpg) no-repeat center;
    }
    
    .slider li:nth-of-type(5) a::after {
        background: url(https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2547491788,3355958735&fm=27&gp=0.jpg) no-repeat center;
    }
    
    img.bg {
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 50%;
        z-index: 1;
        transform: translateX(-50%);
    }
    
    #bg1:target{
        z-index: 100;
        animation: slideLeft 1s 1;
    }
    #bg2:target{
        z-index: 100;
        animation: slideBottom 1s 1;
    }
    #bg3:target{
      z-index: 100;
      animation: zoomIn 1s 1;
    }
    #bg4:target{
      z-index: 100;
      animation: zoomOut 1s 1;
    }
    #bg5:target{
      z-index: 100;
      animation: rotate 1s 1;
    }
    img:not(:target){
      animation: notTarget 1s 1;
    }
    

    相关文章

      网友评论

          本文标题:点击缩略图切换背景(纯css3动画)

          本文链接:https://www.haomeiwen.com/subject/ipmslqtx.html