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

其他 2018-06-20 20:14:32 阅读次数: 3

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

猜你喜欢

转载自blog.csdn.net/u010359143/article/details/50380741
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022