css3之target選擇器
阿新 • • 發佈：2019-02-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: none; box-sizing: border-box; } .clearfix:after{ content: " "; display: block; clear: both; height: 0; } .clearfix { zoom: 1; } .container{ position: absolute; width: 100%; bottom: 100px; text-align: center; z-index: 999; } .list li{ display: inline-block; width: 174px; border: 2px solid #fff; font-size: 22px; border-radius: 5px; margin-right: 10px; vertical-align: top; } .list li a{ color: #fff; padding-top: 70px; padding-bottom: 20px; text-decoration: none; display: block; position: relative; } .list li a:after{ content: ''; display: block; position: absolute; width: 120px; height: 120px; left: 50%; margin-left: -60px; top:-80px; border-radius: 50%; border: 2px solid #fff; background: url("img/sbg1.jpg") no-repeat center; } .list li:nth-of-type(1) a{ background: #02646e; } .list li:nth-of-type(2) a{ background: #eb0837; } .list li:nth-of-type(3) a{ background: #67b374; } .list li:nth-of-type(4) a{ background: #e6674a; } .list li:nth-of-type(5) a{ background: #e61061; } .list li:nth-of-type(2) a:after{ background-image:url("img/sbg2.jpg"); } .list li:nth-of-type(3) a:after{ background-image:url("img/sbg3.jpg"); } .list li:nth-of-type(4) a:after{ background-image:url("img/sbg4.jpg"); } .list li:nth-of-type(5) a:after{ background-image:url("img/sbg5.jpg"); } .bg{ position: fixed; width: 100%; height: 100%; z-index: 9; } /*slideLeft*/ @-webkit-keyframes slideLeft { 0%{ left: -100%; } 100%{ left: 0; } } .slideLeft:target{ z-index: 99; animation:slideLeft 1s 1; -webkit-animation:slideLeft 1s 1; } /*slideBottom*/ @-webkit-keyframes slideBottom { 0%{ top:100%; } 100%{ top:0; } } .slideBottom:target{ z-index: 99; animation:slideBottom 1s 1; -webkit-animation:slideBottom 1s 1; } /*zoomIn*/ @-webkit-keyframes zoomIn { 0% { -webkit-transform: scale(0.1); } 100% { -webkit-transform: none; } } .zoomIn:target { z-index: 100; -webkit-animation: zoomIn 1s 1; animation: zoomIn 1s 1; } /*zoomOut*/ @-webkit-keyframes zoomOut { 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 rotate { 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; } </style> <body> <div class="container"> <ul class="list clearfix"> <li> <a href="#bg1">Hipster Fashion Haircut</a> </li> <li> <a href="#bg2">Cloud Computing Services & Consulting</a> </li> <li> <a href="#bg3">My haire is sooo fantastic!</a> </li> <li> <a href="#bg4">Eat healthy & 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>