纯css3实现点击缩略图切换背景图

时间：2021-08-08 20:29:24

1：html页面部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css3实现背景图片切换效果</title>

    <!--Main css-->
    <link rel="stylesheet" href="css/main.css">

</head>
<body>
<main role="main">

    <!--缩略图【start】-->
    <div class="slider">
        <ul class="clearfix">
            <li>
                <a href="#bg1">从左往右切换</a>
            </li>
            <li>
                <a href="#bg2">从下往上</a>
            </li>
            <li>
                <a href="#bg3">从小到大</a>
            </li>
            <li>
                <a href="#bg4">从大到小</a>
            </li>
            <li>
                <a href="#bg5">旋转进入</a>
            </li>
        </ul>
    </div>
    <!--缩略图【end】-->

    <!--背景图【start】-->
    <div class="bac_img">
        <img src="img/bg1.jpg" alt="" id="bg1">
        <img src="img/bg2.jpg" alt="" id="bg2">
        <img src="img/bg3.jpg" alt="" id="bg3">
        <img src="img/bg4.jpg" alt="" id="bg4">
        <img src="img/bg5.jpg" alt="" id="bg5">
    </div>
    <!--背景图【end】-->
</main>
</body>
</html>
2：css部分 

/*
    背景图切换 css
*/
.clearfix {
clear: both;
}
.slider {
width: 100%;
position: absolute;
z-index: 999;
text-align: center;
bottom: 200px;
}
.slider > ul {
list-style: none;
}
.slider > ul > li {
width: 170px;
height: 130px;
display: inline-block;
margin-right: 15px;
}
.slider > ul > li > a {
width: 100%;
display: inline-block;
position: relative;
border: 2px solid #fff;
border-radius: 5px;
color: #fff;
font-size: 22px;
padding-top: 70px;
padding-bottom: 20px;
font-family: 'Yesteryear', cursive;
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);
}
.slider > ul > li > a:after {
content: '';
width: 120px;
height: 120px;
display: block;
border-radius: 50%;
border: 5px solid #fff;
position: absolute;
top: -80px;
left: 50%;
margin-left: -60px;
z-index: 1001;
}
.slider > ul > li > a:before {
content: '';
width: 120px;
height: 120px;
display: block;
border-radius: 50%;
border: 5px solid #fff;
position: absolute;
top: -80px;
left: 50%;
margin-left: -60px;
z-index: 1002;
background: rgba(0, 0, 0, 0.3);
}
.slider > ul > li > a:hover:before {
opacity: 0;
}
.slider > ul > li:nth-of-type(1) > a {
background: #02646e;
}
.slider > ul > li:nth-of-type(1) > a:after {
background: url(../img/sbg1.jpg) no-repeat center;
}
.slider > ul > li:nth-of-type(2) > a {
background: #eb0837;
}
.slider > ul > li:nth-of-type(2) > a:after {
background: url(../img/sbg2.jpg) no-repeat center;
}
.slider > ul > li:nth-of-type(3) > a {
background: #67b374;
}
.slider > ul > li:nth-of-type(3) > a:after {
background: url(../img/sbg3.jpg) no-repeat center;
}
.slider > ul > li:nth-of-type(4) > a {
background: #e6674a;
}
.slider > ul > li:nth-of-type(4) > a:after {
background: url(../img/sbg4.jpg) no-repeat center;
}
.slider > ul > li:nth-of-type(5) > a {
background: #e61061;
}
.slider > ul > li:nth-of-type(5) > a:after {
background: url(../img/sbg5.jpg) no-repeat center;
}
.bac_img img {
position: fixed;
top: 0;
width: 100%;
height: auto !important;
height: 100%;
z-index: 1;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
.bac_img img:not(:target) {
-webkit-animation: notTarget 1s 1;
-moz-animation: notTarget 1s 1;
-ms-animation: notTarget 1s 1;
-o-animation: notTarget 1s 1;
animation: notTarget 1s 1;
}
#bg1:target {
z-index: 100;
animation: slideLeft 1s 1;
-o-animation: slideLeft 1s 1;
-ms-animation: slideLeft 1s 1;
-moz-animation: slideLeft 1s 1;
-webkit-animation: slideLeft 1s 1;
}
#bg2:target {
z-index: 100;
animation: topTop 1s 1;
-o-animation: topTop 1s 1;
-ms-animation: topTop 1s 1;
-moz-animation: topTop 1s 1;
-webkit-animation: topTop 1s 1;
}
#bg3:target {
z-index: 100;
animation: topBig 1s 1;
-o-animation: topBig 1s 1;
-ms-animation: topBig 1s 1;
-moz-animation: topBig 1s 1;
-webkit-animation: topBig 1s 1;
}
#bg4:target {
z-index: 100;
animation: topSmall 1s 1;
-o-animation: topSmall 1s 1;
-ms-animation: topSmall 1s 1;
-moz-animation: topSmall 1s 1;
-webkit-animation: topSmall 1s 1;
}
#bg5:target {
z-index: 100;
animation: rotate 1s 1;
-o-animation: rotate 1s 1;
-ms-animation: rotate 1s 1;
-moz-animation: rotate 1s 1;
-webkit-animation: rotate 1s 1;
}
/*切换动画(从左往右)*/
@keyframes slideLeft {
0% {
left: -100%;
  }
50% {
left: -50%;
  }
100% {
left: 0;
  }
}
@-moz-keyframes slideLeft {
0% {
left: -100%;
  }
50% {
left: -50%;
  }
100% {
left: 0;
  }
}
@-ms-keyframes slideLeft {
0% {
left: -100%;
  }
50% {
left: -50%;
  }
100% {
left: 0;
  }
}
@-webkit-keyframes slideLeft {
0% {
left: -100%;
  }
50% {
left: -50%;
  }
100% {
left: 0;
  }
}
@-o-keyframes slideLeft {
0% {
left: -100%;
  }
50% {
left: -50%;
  }
100% {
left: 0;
  }
}
/*切换动画(从下往上)*/
@keyframes topTop {
0% {
top: 350px;
  }
100% {
top: 0;
  }
}
@-moz-keyframes topTop {
0% {
top: 350px;
  }
100% {
top: 0;
  }
}
@-ms-keyframes topTop {
0% {
top: 350px;
  }
100% {
top: 0;
  }
}
@-webkit-keyframes topTop {
0% {
top: 350px;
  }
100% {
top: 0;
  }
}
@-o-keyframes topTop {
0% {
top: 350px;
  }
100% {
top: 0;
  }
}
/*切换动画(从小变大)*/
@keyframes topBig {
0% {
transform: scale(0.1);
  }
100% {
transform: none;
  }
}
@-moz-keyframes topBig {
0% {
-moz-transform: scale(0.1);
  }
100% {
-moz-transform: none;
  }
}
@-ms-keyframes topBig {
0% {
-ms-transform: scale(0.1);
  }
100% {
-ms-transform: none;
  }
}
@-webkit-keyframes topBig {
0% {
-webkit-transform: scale(0.1);
  }
100% {
-webkit-transform: none;
  }
}
@-o-keyframes topBig {
0% {
-o-transform: scale(0.1);
  }
100% {
-o-transform: none;
  }
}
/*切换动画(从大变小)*/
@keyframes topSmall {
0% {
transform: scale(2);
  }
100% {
transform: none;
  }
}
@-moz-keyframes topSmall {
0% {
-moz-transform: scale(2);
  }
100% {
-moz-transform: none;
  }
}
@-ms-keyframes topSmall {
0% {
-ms-transform: scale(2);
  }
100% {
-ms-transform: none;
  }
}
@-webkit-keyframes topSmall {
0% {
-webkit-transform: scale(2);
  }
100% {
-webkit-transform: none;
  }
}
@-o-keyframes topSmall {
0% {
-o-transform: scale(2);
  }
100% {
-o-transform: none;
  }
}
/*切换动画(旋转进入)*/
@keyframes rotate {
0% {
transform: rotate(-360deg) scale(0.1);
  }
100% {
transform: none;
  }
}
@-moz-keyframes rotate {
0% {
-moz-transform: rotate(-360deg) scale(0.1);
  }
100% {
-moz-transform: none;
  }
}
@-ms-keyframes rotate {
0% {
-ms-transform: rotate(-360deg) scale(0.1);
  }
100% {
-ms-transform: none;
  }
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(-360deg) scale(0.1);
  }
100% {
-webkit-transform: none;
  }
}
@-o-keyframes rotate {
0% {
-o-transform: rotate(-360deg) scale(0.1);
  }
100% {
-o-transform: none;
  }
}
/*设置背景图像不显示动画效果*/
@-webkit-keyframes notTarget {
0% {
z-index: 75;
  }
100% {
z-index: 75;
  }
}
@-moz-keyframes notTarget {
0% {
z-index: 75;
  }
100% {
z-index: 75;
  }
}
@-ms-keyframes notTarget {
0% {
z-index: 75;
  }
100% {
z-index: 75;
  }
}
@-o-keyframes notTarget {
0% {
z-index: 75;
  }
100% {
z-index: 75;
  }
}
@keyframes notTarget {
0% {
z-index: 75;
  }
100% {
z-index: 75;
  }
}

标签：

相关文章