아이스크림을 직접 만들어 여름의 즐거움을 느껴보세요

자세한 내용은 "Early Summer Creative Contest"에 참여하고 있습니다. 참조: Early Summer Creative Contest

무더운 여름, 수박, 아이스크림 등 시원하고 맛있는 음식들이 많이 있는데요, 오늘은 함께 아이스크림 손잡이를 구현해보도록 하겠습니다. 그 전에 최종 효과부터 살펴볼까요?

구현 프로세스

아이스크림을 구현하는 과정은 다음과 같습니다.

1. 정의 dom, 컨테이너에는 ice-lolly전체 아이스크림 영역을 그리는 데 사용되는 2개의 요소가 포함되어 있습니다. flavors아이스크림 stick은 아이스크림 영역입니다.

<div class="ice-lolly">
    <div class="flavors"></div>
    <div class="stick"></div>
</div>
复制代码

2. 그런 다음 쉽게 표시할 수 있도록 본체 중앙에

# 内容居中显示
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    //background-color: darkslategray;
}
复制代码

3. 아이스크림 모양 그리기: .flavors, 크기와 너비를 조정할 수 있으며 아이스크림을 더 동그랗게 만들도록 설정하여 아이스 캔디를 설정할 수 border-radius있습니다 .

.flavors {
    width: 19em;
    height: 26em;
    font-size: 10px;
    border-radius: 8em 8em 1em 1em;
}
复制代码

4. 팝시클 색칠하기: .flavors,.flavors::before

.flavors {
    position: relative;
    overflow: hidden;
}
.flavors::before {
    content: '';
    position: absolute;
    width: 140%;
    height: 120%;
    background: linear-gradient(
        hotpink 0%,
        hotpink 25%,
        deepskyblue 25%,
        deepskyblue 50%,
        gold 50%,
        gold 75%,
        lightgreen 75%,
        lightgreen 100%);
    z-index: -1;
    left: -20%;
    transform: rotate(-25deg);
}
复制代码

5. 조명 효과 추가:.flavors::after

.flavors::after {
    content: '';
    position: absolute;
    width: 2em;
    height: 17em;
    background-color: rgba(255, 255, 255, 0.5);
    left: 2em;
    bottom: 2em;
    border-radius: 1em;
}
复制代码

6. 아이스크림 젓가락 그리기:.stick

.stick {
    position: relative;
    width: 6em;
    height: 8em;
    background-color: sandybrown;
    left: calc(50% - 6em / 2);
    border-radius: 0 0 3em 3em;
}
复制代码

7. 3차원 효과를 높이려면 아이스 캔디 젓가락에 약간의 그림자를 추가하세요..stick::after

stick::after {
    content: '';
    position: absolute;
    width: inherit;
    height: 2.5em;
    background-color: sienna;
}
复制代码

8. 아이스 캔디 롤 컬러 .flavors::before, 더 생생한

.flavors::before {
    animation: moving 100s linear infinite;
}
复制代码

9. 마우스 플로팅 및 애니메이션 중지 .ice-lolly:hover, 아이스크림에 간단한 애니메이션 효과 부여

.flavors::before {
    animation-play-state: paused;
}
.ice-lolly:hover .flavors::before {
    animation-play-state: running;
}
复制代码

마지막으로 전체 아이스크림 개발을 마치고 여름 무더위에 시원함을 느끼셨나요?

효과를 보다

우리는 马上掘金기능 , 그것은 css + html의 쓰기를 지원할 뿐만 아니라 시험 작업도 지원하므로 매우 편리합니다. 효과는 다음과 같습니다.

참고문헌

• github.com/comehope/fr…