<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
overflow: hidden;
height: 100%;
}
.pic{
width: 100%;
height: 100%;
position: relative;
z-index: 0;
}
.pic li{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: 100% 100%;
}
.pic li:nth-child(1){
background: url(images/bg1.jpg);
}
.pic li:nth-child(2){
background: url(images/bg2.jpg);
}
.pic li:nth-child(3){
background: url(images/bg3.jpg);
}
.btn{
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 20px;
z-index: 1;
width: 240px;
}
.btn li{
width: 60px;
height: 60px;
margin-right: 20px;
float: left;
list-style: none;
}
li a{
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 20px;
background: red;
color: #000;
display: block;
text-decoration: none;
border-radius: 50%;
}
.pic li:target{
z-index: 99;
}
.pic li:nth-child(1):target{
animation: move 1s;
}
.pic li:nth-child(2):target{
animation: run 1s;
}
.pic li:nth-child(3):target{
animation: go 1s;
}
@keyframes move{
from{
transform: translateX(-2000px);
}
to{
transform: translateX(0px);
}
}
@keyframes run{
from{
transform: scale(0.7);
}
to{
transform: scale(1);
}
}
@keyframes go{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<ul class="pic">
<li id="t1"></li>
<li id="t2"></li>
<li id="t3"></li>
</ul>
<ul class="btn">
<li>
<a href="#t1">1</a>
</li>
<li>
<a href="#t2">2</a>
</li>
<li>
<a href="#t3">3</a>
</li>
</ul>
</body>
</html>
全屏切换案例
猜你喜欢
转载自blog.csdn.net/weixin_43750162/article/details/87374721
今日推荐
周排行