聲明：歡迎轉(zhuǎn)載，但請注明由林立鎮(zhèn)創(chuàng)作
image.png
通過CSS3新屬性實(shí)現(xiàn)
- animation，@keyframes實(shí)現(xiàn)滑動，旋轉(zhuǎn)，放大縮小動畫
- nth-of-type，更方便的操作元素
- backgorund，控制圖片覆蓋方式，位置，覆蓋區(qū)域，是否跟隨文檔
- Flex，實(shí)現(xiàn)布局：居中，填充，橫向排列
- :target偽類，當(dāng)點(diǎn)擊文字時(shí)，切換背景圖片的操作
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="slider">
<ul class="clearfix">
<li><a href="#bg1">這是我的兩把槍<br>一把叫“射!”，另一把叫“啊!”<br>怎么樣，喜歡么?</a></li>
<li><a href="#bg2">我是該讓你們的心跳加快呢，還是，讓它們停止！</a></li>
<li><a href="#bg3">想要再來一發(fā)么？我可不會留下任何懸念!</a></li>
<li><a href="#bg4">我沒開玩笑，把那個(gè)蘋果放到頭上去!我瞄得很穩(wěn),正對眉心!</a></li>
<li><a href="#bg5">我在為我的激光充能!照亮所有敵人……驅(qū)逐所有暗影……點(diǎn)亮他們!</a></li>
</ul>
</div>
</body>
</html>
CSS文件
*,*::after{
box-sizing:border-box;//使用border-box盒子模型
margin: 0;
padding: 0;
}
html,body{
height:100%;
background:url(bg.jpg);
background-size:cover;//實(shí)現(xiàn)背景圖片的完全覆蓋
}
.bg{
min-height: 100vh;
min-width: 100vw;
width: 100%;
position: fixed;
top: 0;
left: -100vw;
z-index:1;
}
.slider{
width:1024px;
position:absolute;
top:0;
left:50%;
z-index:9999;
margin-top:250px;
margin-left: -512px;
}
.slider>ul{
display: flex;
text-align: center;
}
.slider li{
flex: 1 0;
list-style: none;
display: flex;
flex-direction: column;
margin:0 7px;
align-items: center;
}
/*背景縮略圖*/
.slider li::before{
position: absolute;
top:50px;
z-index: 9999;
content:"";
display:block;
width:150px;
height: 150px;
border-radius: 50%;
border: 5px solid #fff;
//縮略圖設(shè)置
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-origin: padding-box;
}
.slider li:nth-of-type(1)::before{
background-image: url(./bg1.jpg);
background-position: center;//背景縮略圖位置設(shè)置
}
.slider li:nth-of-type(2)::before{
background-image: url(./bg2.jpg);
background-position: right center;
}
.slider li:nth-of-type(3)::before{
background-image: url(./bg3.jpg);
background-position: right center;
}
.slider li:nth-of-type(4)::before{
background-image: url(./bg4.jpg);
background-position: right center;
}
.slider li:nth-of-type(5)::before{
background-image: url(./bg5.jpg);
background-position: right center;
}
/*背景縮略圖，文本介紹*/
.slider li>a{
margin-top:150px;
flex-grow: 1;
cursor: pointer;//鼠標(biāo)樣式
text-decoration: none;
color: white;
font-weight: normal;
font-family: cursive,fantasy ;
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);
padding-top: 70px;
padding-bottom: 20px;
border:2px solid #fff;
border-radius: 5px;
}
.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;
}
@keyframes leftSlide{
0% {top:0;left: -100vw;}
50% {top:0;left: 20vh;}
100% {top:0;left: 0;}
}
.leftSlide:target {
animation-name: leftSlide;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
}
@keyframes slideBottom {
0% { top: 100vh;left:0; }
50% { top: -20vh;left:0;}
100% { top: 0;left:0;}
}
.bottomSlide:target{
z-index: 100;
animation-name: slideBottom;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
}
@keyframes zoomIn {
0% { top: 0;left:0;transform: scale(0.1); }
50% { top: 0;left:0;transform: scale(2); }
100%{top: 0;left:0;transform: scale(1);}
}
.zoomIn:target{
z-index: 100;
animation-name: zoomIn;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
}
@keyframes zoomOut {
0% { top: 0;left:0;transform: scale(2); }
50% { top: 0;left:0;transform: scale(0.5); }
100%{top: 0;left:0;transform: scale(1);}
}
.zoomOut:target{
z-index: 100;
animation-name: zoomOut;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
}
@keyframes rotate {
0% { top: 0;left:0;transform: rotate(-360deg) scale(0.1);}
100% { top: 0;left:0;transform: rotate(360deg) scale(1);}
}
.rotate:target{
z-index: 100;
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
}
