연말까지 매일 웹 사이트를 꾸준히 만드는 대학생~ 33일째 CSS에서 시소 만들기~

10336 단어 CSS

입문


안녕하세요.@70days_js.
알아차리면 11월은 이미 마지막 단계다.
그럼 오늘 css로 시소를 만들어 봤어요.
오른쪽으로 이 버튼은 오른쪽으로, 왼쪽으로 왼쪽으로 기울어져 있습니다.
오늘이 33일째다.(2019/11/20)
잘 부탁드립니다.

사이트 URL

  • https://sin2cos21.github.io/day33.html

    • 한 일


    css로 시소를 만들었어요.↓

    html은 이런 느낌이에요.(전체)↓
    <body>
    <div id="left-button">left</div>
    <div id="right-button">right</div>
    <div class="bar-wrapper">
        <span id="right-human"><img src="day33L.jpeg" alt="ガンジーの画像"></span>
        <div class="bar"></div>
        <span id="left-human"><img src="day33R.jpeg" alt="サンタクロースの画像"></span>
    </div>
    <div class="triangle"></div>
</body>
    바디에서 4개의div를 만들고 위 2개는 버튼, 3번은 초밥&사람, 4번은 시소대(삼각형)를 만든다.
    어떻게 시소의 몽둥이와 인간을 동시에 기울일 수 있습니까
    단지 css일 뿐, 버튼 호버로 다른 요소를 이동하면 어떻게 해야 하나요?
    다방면의 고려를 거쳐 결국 이 구조가 형성되었다.
    다음으로 우리는 중요한 부분만 순서대로 css를 설명한다.
    우선 시소와 인간은 absolute와relative로 위치를 조정한다.
    .bar-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 30px;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

#right-human {
    position: relative;
    top: -30px;
    right: -100px;
}

#left-human {
    position: relative;
    top: -30px;
    right: 100px;
}
    호버에서 다른 요소를 이동하는 방법은 좀 번거롭지만 이런 느낌이다.↓
    #left-button:hover + #right-button + .bar-wrapper {
    animation-name: left;
    animation-duration: 3s;
}
#right-button:hover + .bar-wrapper {
    animation-name: right;
    animation-duration: 3s;
}
    간접 선택기를 사용하기 때문에 html 측면에서 요소의 위치를 이동하면 움직이지 않습니다.이 근처에는 솔직히 미묘해서 앞으로 다른 방법을 생각해 보고 싶다고 쓰여 있다.
    애니메이션은 매우 간단하다.↓
    @keyframes left {
    0%{
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    80%{
        transform: translateX(-50%) translateY(-50%) rotate(-15deg);
    }
    100%{
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
}
}
@keyframes right {
    0%{
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
    80%{
        transform: translateX(-50%) translateY(-50%) rotate(15deg);
    }
    100%{
        transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
}
    그냥 로테이트로 돌려요.
    마지막으로 시소를 지탱하는 삼각형의 제작 방법이다.
    정삼각형이 아니라 좀 뾰족하게 썼다.
    .triangle {
    border-top: 80px solid transparent;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
    border-bottom: 80px solid black;
}
    border의 top,right,left를 투명하게 하여 삼각형처럼 보입니다.
    정삼각형이 아닌 top와bottom은 크게 설정하고right와left는 작게 설정합니다.

    감상


    나는 더 활발한 것을 하고 싶지만, 기술이 좀 부족하다.
    호버를 떠나면 순조롭게 돌아오는 게 아니라 돌아오는 곳을 개량하고 싶어요.
    끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

    참고 자료

  • 아이콘 소재 다운로드 사이트'icooon-mono｜상용 아이콘 소재를 무료로 다운로드할 수 있는 사이트｜6000개 이상의 아이콘 소재를 무료로 다운로드할 수 있는 사이트 ICOON MONOhttps://icooon-mono.com/
    • 그림을 사용할 수 있도록 해 주십시오.아주 좋은 느낌의 아이콘이에요!
    정말 감사합니다.
    탭 전환 등을 통해 내용 내용의 높이를 변경합니다. 디스플레이:none로 전환할 때 이 전환된 내용 아래의 위치에서 스크롤 위치를 유지합니다.
    Flexbox로 요소 자유 변종 정렬

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage