페이지를 확장하지 않고 스팬의 높이를 조정하는 방법은 무엇입니까?

그래서 나는 "스타 필드"라는 애니메이션을 만들었습니다. 두 개의 작은 회전, 방사형 그래디언트로 만들어졌습니다.페이지를 확장하지 않고 스팬의 높이를 조정하는 방법은 무엇입니까?

이제 회전 할 때 정지/끝 지점을 명확하게 볼 수 있습니다. 배경의 높이를 높이면이 문제는 해결되지만 전체 페이지 높이도 증가합니다.

어쨌든 배경 높이를 높이려면 페이지 중앙에 배치하십시오. body에 https://codepen.io/twanmulder/pen/GNLRWo

<!doctype html> 
<html> 
<head></head> 
<body> 
<div class="starfield"> 
<span></span> 
<span></span> 
<span></span> 
<span></span> 
</div> 
</body> 
<html>

출처

2016-12-21 twanmulder

.starfield에 position: absolute 및 overflow: hidden (또는 .starfield의 부모) :

다음은 codepen입니다.

body, html { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #000; 
 
} 
 

 
body { 
 
    overflow: hidden; 
 
} 
 

 
.starfield { 
 
    position: absolute; 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    -webkit-animation: fadein 15s; /* Safari, Chrome and Opera > 12.1 */ 
 
    -moz-animation: fadein 15s; /* Firefox < 16 */ 
 
     -ms-animation: fadein 15s; /* Internet Explorer */ 
 
     -o-animation: fadein 15s; /* Opera < 12.1 */ 
 
      animation: fadein 15s; 
 
} 
 

 
.starfield > * { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.starfield > * { 
 
    background-size: 200px 200px; 
 
    background-image: radial-gradient(2px 2px at 40px 60px, #ccc, rgba(0,0,0,0)), 
 
    radial-gradient(2px 2px at 20px 50px, #ddd, rgba(0,0,0,0)), 
 
    radial-gradient(2px 2px at 30px 100px, #eee, rgba(0,0,0,0)), 
 
    radial-gradient(2px 2px at 40px 60px, #fff, rgba(0,0,0,0)), 
 
    radial-gradient(2px 2px at 110px 90px, #ccc, rgba(0,0,0,0)), 
 
    radial-gradient(2px 2px at 190px 150px, #ddd, rgba(0,0,0,0)); 
 
    background-repeat: repeat; 
 
} 
 

 
.starfield > * { 
 
    transform-origin: 50% 50%; 
 
    animation-name: starfieldRotate; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
    } 
 

 
    .starfield > *:nth-child(1){ 
 
    animation-duration: 25s; 
 
    animation-delay: -15; 
 
    } 
 
    .starfield > *:nth-child(2){ 
 
    animation-duration: 35s; 
 
    animation-delay: -50s; 
 
    } 
 
    .starfield > *:nth-child(3){ 
 
    animation-duration: 50s; 
 
    } 
 
    .starfield > *:nth-child(4){ 
 
    animation-duration: 70s; 
 
    } 
 
    .starfield > *:nth-child(5){ 
 
    animation-duration: 120s; 
 
    } 
 

 
@keyframes starfieldRotate { 
 
    from {transform:rotate(0deg);} 
 
    to {transform: rotate(360deg);} 
 
}

<div class="starfield"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div>

출처

2016-12-21 18:48:25 Turnip

감사합니다! 이것은 나를 위해 그것을 고정! – twanmulder

페이지를 확장하지 않고 스팬의 높이를 조정하는 방법은 무엇입니까?

답변

관련 문제