CSS3自适应全屏焦点图切换的特效怎么做-tutorial css-php.cn

CSS3自适应全屏焦点图切换的特效怎么做
php中世界最好的语言
Lepaskan： 2017-11-24 13:37:17
asal
1924 orang telah melayarinya
给大家带来用纯CSS3实现全屏背景切换焦点图效果，不参夹JS的代码，简单易懂还好用，需要的朋友可以直接搬运。下面我们来看一下
<!DOCTYPE html>
<html>
         <head>
                   <meta charset="utf-8" />
                   <title>自适应全屏焦点图切换CSS3特效代码</title>
                   <meta name="keywords" content="自适应,全屏,焦点图,切换,CSS3,特效代码" />
                   <meta name="description" content="自适应全屏焦点图切换CSS3特效代码，纯CSS实现不用任何js代码。" />
                   <style>
                            *{margin:0;padding:0;list-style: none;}
                            img.bg{min-width: 1024px;min-height: 100%;width: 100%;height: auto!important;height: 100%;position: fixed;top: 0;left: 0;z-index: 1;}
                            @media screen and (max-width: 1024px) {
                                     img.bg{
                                               left: 50%;
                                               margin-left: -512px;
                                     }
                            }
                            .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;
                                     position: relative;
                                     cursor: pointer;
                                     border:2px solid #fff;
                                     border-radius: 5px;
                                     vertical-align: top;/*设置元素的垂直对齐方式。*/
                                     color: #FFFFFF;
                                     text-decoration: none;
                                     font-size: 22px;
                                     font-family: "楷体";
                                     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 li:nth-of-type(1) a{
                                     background-color: #02646e;
                            }
                            .slider li:nth-of-type(2) a{
                                     background-color: #eb0837;
                            }
                            .slider li:nth-of-type(3) a {
                                     background-color: #67b374;
                            }
                            .slider li:nth-of-type(4) a {
                                     background-color: #e6674a;
                            }
                            .slider li:nth-of-type(5) a {
                                     background-color: #e61061;
                            }
                            .slider a::after{/*:after 选择器在被选元素的内容后面插入内容。*/
                                     content: "";
                                     display: block;
                                     height: 120px;
                                     width: 120px;
                                     border:5px solid #fff;
                                     border-radius: 50%;
                                     position: absolute;
                                     left: 50%;
                                     margin-left: -60px;
                                     z-index: 9999;
                                     top: -80px;
                            }
                            .slider li:nth-of-type(1) a::after {
                                     /*:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.*/
                                     background: url(img/sbg1.jpg) no-repeat center;
                            }
                            .slider li:nth-of-type(2) a::after {
                                     background: url(img/sbg2.jpg) no-repeat center;
                            }
                            .slider li:nth-of-type(3) a::after {
                                     background: url(img/sbg3.jpg) no-repeat center;
                            }
                            .slider li:nth-of-type(4) a::after {
                                     background: url(img/sbg4.jpg) no-repeat center;
                            }
                            .slider li:nth-of-type(5) a::after {
                                     background: url(img/sbg5.jpg) no-repeat center;
                            }
                            .slider a::before{
                                     content: "";
                                     display: block;
                                     height: 120px;
                                     width: 120px;
                                     border:5px solid #fff;
                                     border-radius: 50%;
                                     position: absolute;
                                     left: 50%;
                                     margin-left: -60px;
                                     z-index: 99999;
                                     top: -80px;
                                     background:rgba(0,0,0,0.3);
                            }
                            .slider a:hover::before{
                                     opacity: 0;
                            }
                            @-webkit-keyframes &#39;slideLeft&#39;{
                                     0%{
                                               left:-500px;
                                     }
                                     100%{
                                               left:0;
                                     }
                            }
                            .slideLeft:target{
                                     /*:target 选择器可用于选取当前活动的目标元素*/
                                     z-index: 100;
                                     animation: slideLeft 1s 1;
                                     -webkit-animation: slideLeft 1s 1;
                            }
                            @-webkit-keyframes &#39;slideBottom&#39;{
                                     0%{
                                               top:350px;
                                     }
                                     100%{
                                               top:0;
                                     }
                            }
                            .slideBottom:target{
                                     /*:target 选择器可用于选取当前活动的目标元素*/
                                     z-index: 100;
                                     animation: slideBottom 1s 1;
                                     -webkit-animation: slideBottom 1s 1;
                            }
                            @-webkit-keyframes &#39;zoomIn&#39; {
                             0% {
                            -webkit-transform: scale(0.1);
                            }
                             100% {
                            -webkit-transform: none;
                            }
                            }
                            .zoomIn:target {
                                     z-index: 100;
                                     -webkit-animation: zoomIn 1s 1;
                                     animation: zoomIn 1s 1;
                            }
                            /* Zoom Out */
                            @-webkit-keyframes &#39;zoomOut&#39; {
                             0% {
                            -webkit-transform: scale(2);
                            }
                             100% {
                            -webkit-transform: none;
                            }
                            }
                           
                            .zoomOut:target {
                                     z-index: 100;
                                     -webkit-animation: zoomOut 1s 1;
                                     animation: zoomOut 1s 1;
                           
                            }
                             
                            /* Rotate */
                             
                            @-webkit-keyframes &#39;rotate&#39; {
                             0% {
                            -webkit-transform: rotate(-360deg) scale(0.1);
                            }
                             100% {
                            -webkit-transform: none;
                            }
                            }
                            .rotate:target {
                                     z-index: 100;
                                     -webkit-animation: rotate 1s 1;
                                     animation: rotate 1s 1;
                                    
                            }
                            @-webkit-keyframes &#39;notTarget&#39; {
                                      0% {
                                     z-index: 75;
                            }
                                      100% {
                                     z-index: 75;
                            }
                            }
                            .bg:not(:target) {
                                               -webkit-animation: notTarget 1s 1;
                                               animation: notTarget 1s 1
                                     }
                                     .page {
                                               text-align:left;
                            }
                   </style>
         </head>
         <body>
                  
                            <div>
                                     <ul>
                                               <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="img/bg1.jpg" class="bg slideLeft" id="bg1" />
                            <img src="img/bg2.jpg" class="bg slideBottom" id="bg2" />
                            <img src="img/bg3.jpg" class="bg zoomIn" id="bg3" />
                            <img src="img/bg4.jpg" class="bg zoomOut" id="bg4" />
                            <img src="img/bg5.jpg" class="bg rotate" id="bg5" />
                  
         </body>
</html>
Salin selepas log masuk
自适应全屏焦点图切换的特效就这么多了。更多精彩请关注php中文网其它相关文章！