【纯CSS3-animation】实现背景动态切换
2017-05-31 本文已影响0人
林立镇
声明：欢迎转载，但请注明由林立镇创作
image.png
通过CSS3新属性实现
- animation，@keyframes实现滑动，旋转，放大缩小动画
- nth-of-type，更方便的操作元素
- backgorund，控制图片覆盖方式，位置，覆盖区域，是否跟随文档
- Flex，实现布局：居中，填充，横向排列
- :target伪类，当点击文字时，切换背景图片的操作
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">想要再来一发么？我可不会留下任何悬念!</a></li>
<li><a href="#bg4">我没开玩笑，把那个苹果放到头上去!我瞄得很稳,正对眉心!</a></li>
<li><a href="#bg5">我在为我的激光充能!照亮所有敌人……驱逐所有暗影……点亮他们!</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;//实现背景图片的完全覆盖
}
.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;
//缩略图设置
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;//背景缩略图位置设置
}
.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;//鼠标样式
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;
}
