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