순수 CSS 정적 별표

-19

별이 움직이지 않는 CSS 만 사용하여 별표를 만드는 방법을 알고 싶습니다. 애니메이션 스타 필드의 예제를 찾았지만 애니메이션 부분은 원하지 않습니다. 이 유형의 정적 배경을 이미지 파일을 사용하지 않고 어떻게 만들 수 있는지 이해해주십시오.순수 CSS 정적 별표

출처

2014-07-09 snuggles08

왜 내가 즉각 downvote를 얻을 수 있습니까? – snuggles08

나는 우주선을 원합니다! 그러나 진지하게,이 질문은 노력과 이해가 부족합니다. 코드는 어디에 있습니까? 시도한 것은 무엇입니까? – mikedidthis

당신이 달성하고자하는 것에 대한 세부 사항이나 명확한 지시 사항이 없으므로 올바른 질문을하지 않으려 고합니다. – jagmitg

"다음과 같은 상황이 발생합니다 ..."의 연습에서 다음 코드를 here에서 직접 도용하여 약간 정적으로 수정했습니다. 결과는 예측 가능합니다 : 기본적이고 반복적 인 별 필드.

<html> 
<head> 
    <title>Testing a starfield</title> 
    <style> 
#space, .stars { 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

.stars { 
    background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)), 
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)), 
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)), 
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)), 
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)), 
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0)); 
    background-repeat: repeat; 
    background-size: 200px 200px; 
} 

body { 
    background: #000; 
} 
    </style> 
</head> 
<body> 
    <div id="space"> 
    <div class="stars"></div> 
    <div class="stars"></div> 
    <div class="stars"></div> 
    <div class="stars"></div> 
    <div class="stars"></div> 
    </div> 
</body> 
</html>

물론,이 CSS의 기능적인 부분은 radial-gradient 결과로 이루어진 조각의 background-image을 구축하고있다.

출처

2014-07-09 20:52:37 abiessu

그게 효과가 있습니다! 감사! – snuggles08

순수 CSS 정적 별표

답변

관련 문제