学习地址:
https://github.com/hakimel/css/tree/master/device-loop
通过案例理解position:relative和position:absolute: https://segmentfault.com/a/1190000006924181#articleHeader3
- 不管是块级元素还是行内元素,应用了position:absolute之后,display为block:可以设置width和height, 没有设置的话,width默认为auto。设置成 position:absolute;脱离文档流,所以是“不占位”的。
- 设置了position:absolute;如果没有设置TRBL( top,left,bottom和left),则默认浮动在父元素的content-box。紧接着,元素脱离文档流,由于没有设置width,所以width变成了auto
- 同级的元素,如果都设置了 position:absolute, 则后面的 元素将会 覆盖 前面的元素,因为默认 代码越靠后的 z-index 越大
- 不管是块级元素display:block还是内联元素display:inline, 应用position:absolute并且不设置TRBL,它都会默认在父级元素的content-box区浮动。原来的起点位置也是应用绝对定位后的起点位置,只不过如果应用了position:absolute的内联元素左边也有内联元素的话,它的起点位置会变得更靠前,直到紧挨左边内联元素的边界。
- 父元素 position: relative或absolute, 此时 子元素 position:absolute;left:0;top:0; 子元素寻找 距离最近的一个使用了position:relative/absolute的 父元素(如果找不到,就使用 body的)
代码如下:
index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>device-loop</title>
<meta name="description" content="">
<meta name="author" content="Suwei">
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
</head>
<body>
<!--通过data-animation-step来切换-->
<div class="animation" data-animation-step="1">
<div class="device">
<div class="phone-home-button"></div>
<div class="tablet-home-button"></div>
<div class="screen-stand">
<div class="leg"></div>
<div class="foot"></div>
</div>
<div class="display">
<div class="slide1"><div>Works on <em>desktops</em></div></div>
<div class="slide2"><div>Works on <em>tablets</em></div></div>
<div class="slide3"><div>Works on <em>phones</em></div></div>
</div>
</div>
</div>
<script>
var duration = 7000, steps = 3, step = 1;
setInterval( function() {
document.querySelector( '.animation' ).setAttribute( 'data-animation-step'
, step = ++step > steps ? 1 : step );
}, duration / steps );
</script>
</body>
</html>
style.css
html, body {
margin: 10px;
font-family: helvetica sans-serif;
}
.animation {
position: relative;
display: inline-block;
width: 460px;
height: 377px;
margin: 0 auto;
}
.animation .device {
position: absolute;
width: 100%;
height: 100%;
background: #111;
-webkit-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-moz-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-ms-transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.animation .device .display {
position: relative;
width: 100%;
height: 100%;
/*隐藏溢出*/
overflow: hidden;
}
.animation .device .display div {
position: absolute;
width: 100%;
height: 100%;
/*这里初始设置为left:100%; 之后切换的时候变成 left: -100%; 就会有从右到左过渡的效果*/
left: 100%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.animation .device .display div div {
position: absolute;
width: 100%;
color: #fff;
top: 50%;
/*文字还是要显示的*/
left: 0;
margin-top: -14px;
/*1.1em表示当前字体的 1.1倍大小,例如当前字体如果为10px的话,1.1em就是 11px*/
font-size: 1.1em;
text-align: center;
}
.animation .device .display div div em {
font-weight: bold;
}
.animation[data-animation-step="1"] .device {
width: 70%;
height: 60%;
padding: 24px;
border-radius: 10px;
}
/*电视的支撑脚架*/
.animation[data-animation-step="1"] .device .screen-stand {
opacity: 1;
position: absolute;
width: 100%;
top: 100%;
}
.animation[data-animation-step="1"] .device .screen-stand .leg {
position: absolute;
width: 12px;
height: 16px;
left: 44%;
margin-left: -6px;
background: #111;
}
.animation[data-animation-step="1"] .device .screen-stand .foot {
position: absolute;
width: 120px;
height: 4px;
top: 15px;
left: 27.5%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background: #111;
}
.animation[data-animation-step="1"] .device .slide1 {
/*移动*/
left: 0%;
background: #34495e;
}
.animation[data-animation-step="1"] .device .slide2 {
}
.animation[data-animation-step="1"] .device .slide3{
}
.animation[data-animation-step="2"] .device {
width: 45%;
height: 72%;
padding: 24px;
border-radius: 10px;
}
.animation[data-animation-step="2"] .device .tablet-home-button {
opacity: 1;
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: #444;
left: 48%;
bottom: 7px;
}
.animation[data-animation-step="2"] .device .slide1 {
left: -100%;
}
.animation[data-animation-step="2"] .device .slide2 {
left: 0%;
background: #16a085;
}
.animation[data-animation-step="2"] .device .slide3{
}
.animation[data-animation-step="3"] .device {
width: 54%;
height: 38%;
padding: 10px 36px;
border-radius: 6px; }
.animation[data-animation-step="3"] .device .phone-home-button {
opacity: 1;
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #444;
z-index: 1;
right: 10px;
top: 45%;
}
.animation[data-animation-step="3"] .device .slide1 {
left: -100%;
}
.animation[data-animation-step="3"] .device .slide2 {
left: -100%;
}
.animation[data-animation-step="3"] .device .slide3{
left: 0%;
background: #3498db;
}