最后一个span位置

如图

RenuMou 2017-06-28

源自：CSS3图片切换特效 3-9 transition实现当前图片飘入动画

收起

2回答

提问者 RenuMou 2017-06-28 11:27:24

解决了写错了

收起回答

提问者 RenuMou 2017-06-28 11:19:42

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<style>
@font-face{
font-family: "BebasNeue";
src: url("fonts/BebasNeue-webfont.eot");
src:url("fonts/BebasNeue-webfont.woff") format("woff"),
url("fonts/BebasNeue-webfont.ttf") format("truetype"),
url("fonts/BebasNeue-webfont.svg") format("svg");
font-weight: normal;
font-style: normal;
}
body{background: url(img/bg.jpg);font-size: 15px;color:#3a2127;font-weight: 400;overflow-y:scroll; }
a{text-decoration: none;color: #333;}
.clr{width: 0;height: 0;overflow: hidden;clear: both;}
.container{width: 100%;height: 100%;text-align: center;position: relative;}
.container>header{padding: 20px 30px 10px 30px;margin: 0 20xp 10px 20px;text-shadow: 1px 1px 1px rgba(0,0,0,0.2)}
.container>header>h1{font-size: 35px;line-height: 35px;font-weight: 400;color:rgba(26,89,120,0.9);padding-bottom: 5px;
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);font-family: BebasNeue; }
.container>header>h1>span{color: #7cbcd6;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8)}
.codrops-demos{padding: 14px;}
.codrops-demos > a{display: inline-block;width: 60px;height: 60px;text-align: center;line-height: 60px;background: rgba(104, 171, 194, 0.5);
border-radius: 50%;font-weight: 800;font-size: 11px;font-style:italic;color: #fff;margin: 0 3px;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05) inset; }
.codrops-demos a.current-demo{background: rgba(255, 255, 255, 0.9);color: rgba(104, 171, 194, 1);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1)}
.codrops-demos a.current-demo:hover{background: rgba(255, 255, 255, 0.9);}
.codrops-demos a:hover{background:#4fa2c4;}
.cr-container{width: 600px;height: 400px;margin: 0 auto;position: relative;border: 20px solid #fff;}
.cr-container input{display: none}
.cr-container label{font-style: italic;width: 150px;height: 30px;cursor: pointer;color: #fff;font-size: 20px;text-align: center;line-height: 32px;
margin-top: 350px;float: left;position: relative;z-index: 1000}
.cr-container label::before{content: "";position: absolute; width: 34px;height: 34px;border-radius: 50%;background: rgba(130, 195, 217, 0.9);left:50%;
margin-left:-14px; z-index: -1;box-shadow:0 0 0 5px rgba(255, 255, 255, 0.3)}
.cr-container input:checked+label{color: #68abc2;}
.cr-container input:checked+label::before{background: #fff;box-shadow: 0 0 0 4px rgba(104, 171, 194, 0.5)}
.cr-container label::after{content: ""; width: 1px;height: 400px;position: absolute;right:0; bottom: -20px; background: linear-gradient(to bottom,rgba(255, 255, 255, 0),rgba(255, 255, 255, .3),rgba(255, 255, 255, 1))}
.cr-container label:last-child::after{width: 0}
.cr-bgimg { width: 600px;height: 400px;overflow: hidden;position: absolute;left: 0;top: 0;z-index: 1;background-repeat:no-repeat;}
.cr-bgimg > div {width: 150px;height: 100%;float: left;overflow: hidden;position: relative;}
.cr-bgimg div span{width: 100%;height: 100%;position: absolute;left:-150px;top: 0;z-index: 2;background-repeat: no-repeat;}
.cr-container input.cr-select-img-1:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(1){background: url(img/1.jpg)}
.cr-container input.cr-select-img-2:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(2){background: url(img/2.jpg)}
.cr-container input.cr-select-img-3:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(3){background: url(img/3.jpg)}
.cr-container input.cr-select-img-4:checked ~ .cr-bgimg,.cr-bgimg div span:nth-child(4){background: url(img/4.jpg)}
.cr-bgimg div:nth-child(1) span{background-position:0 0;}
.cr-bgimg div:nth-child(2) span{background-position:-150px 0;}
.cr-bgimg div:nth-child(3) span{background-position:-300px 0;}
.cr-bgimg div:nth-child(4) sapn{background-position:-450px 0;}
 
.cr-container input.cr-select-img-1:checked~.cr-bgimg div span:nth-child(1),
            .cr-container input.cr-select-img-2:checked~.cr-bgimg div span:nth-child(2),
            .cr-container input.cr-select-img-3:checked~.cr-bgimg div span:nth-child(3),
            .cr-container input.cr-select-img-4:checked~.cr-bgimg div span:nth-child(4){
z-index: 10;left:0;
}
 
 
</style>
</head>
<body>
<div class="container">
<header>
<h1>Hello <span>word</span></h1>
<p class="codrops-demos">
<a href="#" class="current-demo">demo1</a>
<a href="#">demo2</a>
<a href="#">demo3</a>
<a href="#">demo4</a>
</p>
</header> 
<section class="cr-container">
<input type="radio" name="radio-set" id="select-img-1" class="cr-select-img-1" checked>
<label for="select-img-1">1</label>
<input type="radio" name="radio-set" id="select-img-2" class="cr-select-img-2">
<label for="select-img-2">2</label>
<input type="radio" name="radio-set" id="select-img-3" class="cr-select-img-3">
<label for="select-img-3">3</label>
<input type="radio" name="radio-set" id="select-img-4" class="cr-select-img-4">
<label for="select-img-4">4</label>
<div class="clr"></div>    
<div class="cr-bgimg">
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</section>
</div>
</body>
</html>