이 글은 주로 커피머신의 효과를 얻기 위해 순수한 CSS를 사용하는 방법을 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다
Daily 프론트엔드 실습 시리즈의 모든 소스 코드를 github에서 다운로드하세요:
https://github.com/comehope/front-end-daily-challenges
dom을 정의하세요. 컨테이너에는 본문이 포함됩니다. 물 배출구 및 커피 컵, 버튼 및 커피:
<p> <span></span> <span></span> <span></span> <span></span> <span></span> </p>
중앙 디스플레이:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right bottom, sandybrown, darkred); }
용기 크기 정의:
.coffee-machine { width: 15em; height: 15em; background-color: white; font-size: 20px; border-radius: 50%; border: 2em solid white; }
몸체의 외부 틀 그리기:
.coffee-machine { position: relative; display: flex; justify-content: center; } .body { position: absolute; width: 8em; height: 12em; background-color: sandybrown; border-radius: 1.2em; top: 1.5em; border-right: 0.6em solid peru; }
의사 요소를 사용하여 몸의 중간 부분 그리기:
.body::after { content: ''; position: absolute; width: 8em; height: 8em; background-color: darkslategray; top: 2em; border-right: 0.6em solid black; }
물 배출구 그리기:
.spout { position: absolute; width: 3em; height: 1em; background-color: white; top: 3.5em; border-radius: 0.5em; border-right: 0.5em solid silver; }
커피잔 몸통 그리기:
.cup { position: absolute; width: 3em; height: 2em; background-color: white; bottom: 3.5em; border-radius: 0 0 1.4em 1.4em; border-right: 0.5em solid silver; }
의사 요소를 사용하여 커피잔 손잡이 그리기:
.cup::after { content: ''; position: absolute; width: 0.6em; height: 0.6em; border: 0.3em solid silver; border-radius: 50%; right: -1.2em; top: 0.2em; }
버튼 그리기:
.button { position: absolute; width: 1.2em; height: 1.2em; background-color: tomato; border-radius: 50%; bottom: 2em; right: 4.5em; }
커피 그리기:
.coffee::before, .coffee::after { content: ''; position: absolute; width: 0.7em; height: 5em; background-color: chocolate; top: 4.5em; left: calc((15em - 0.7em) / 2); }
다음으로, 그것을 닦으십시오.
커피 머신에 빛과 그림자 추가:
.coffee-machine { z-index: 1; } .coffee-machine::before, .coffee-machine::after { content: ''; position: absolute; width: 2em; height: 2em; border: 0.3em solid transparent; z-index: 2; border-radius: 50%; border-left-color: white; left: 3.8em; } .coffee-machine::before { top: 1.8em; transform: rotate(40deg); } .coffee-machine::after { bottom: 1.8em; transform: rotate(-40deg); }
커피 흐름 애니메이션의 전반부 정의, 즉 커피가 물 배출구에서 컵으로 흐르는 모습 정의:
.coffee::before { animation: 2s linear infinite; animation-name: pouring-before; transform-origin: top; } @keyframes pouring-before { 0%, 20% { transform: scaleY(0); } 30%, 100% { transform: scaleY(1); } 70%, 100% { visibility: hidden; } }
커피 흐름 애니메이션의 후반부 정의 , 즉, 물 배출구가 커피에서 흘러 나오지 않고 남은 커피가 컵으로 흘러 들어갑니다:
.coffee::after { animation: 2s linear infinite; animation-name: pouring-after; transform-origin: bottom; } @keyframes pouring-after { 0%, 70% { visibility: hidden; transform: scaleY(1); } 80%, 100% { transform: scaleY(0); } }
완료!
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
위 내용은 순수 CSS를 사용하여 커피 머신 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!