나는 css로 html 요소를 구부려 곰돌이를 만들었다

18822 단어 화사CSS
한번 해보고 싶어요.
그뿐이야.
요즘은 SVG를 사용하면 이렇게 작은 공예품이 필요 없지만 HTML 요소를 구부려 보려고 합니다.
만약 네가 커서를 멈추면, 그것은 위로 향하는 화살표를 들고 있을 것이다. (웃음소리)
오른쪽 아래 페이지 맨 위로 자주 비틀어지는 거.
[프레젠테이션]
https://jsfiddle.net/ahwo3yqb/
만약 수요가 있다면 자유롭게 안배하여 사용하십시오
  • 아무것도 안 했을 때

  • * 커서가 멈추면

    bear.html
    <div class="animal-wrapper">
      <div class="bear animal">
        <div class="bear-head">
          <div class="bear-eyes"></div>
          <div class="bear-face"></div>
        </div>
        <div class="bear-body">
          <div class="bear-item">
            <div class="bear-item-arrow"></div>
          </div>
          <div class="bear-hands"></div>
        </div>
      </div>
    </div>
    
    bear.css
    .animal-wrapper {
      float: left;
      width: 50px;
      margin: 2px 0;
      zoom: 3;
    }
    
    .bear-item {
      visibility: hidden;
      transform: rotate(-45deg);
      position: absolute;
      background: #fff;
      border: solid 1px #333;
      width: 12px;
      height: 12px;
      top: -12px;
      left: -20px;
    }
    
    .animal-wrapper:hover .bear-item {
      visibility: visible;
    }
    
    .bear {
      margin: 0 auto;
      height: 50px;
      position: relative;
      width: 25px;
    }
    
    .bear-head {
      width: 30px;
      height: 22px;
      border-radius: 47%;
      background-color: #E39F58;
      position: relative;
    }
    
    .bear-face {
      background-color: #FCB96A;
      position: absolute;
      width: 22px;
      height: 10px;
      border-radius: 20px 20px 16px 16px;
      bottom: 1px;
      left: 4px;
    }
    
    .bear-face::before {
      width: 5px;
      height: 2px;
      border-radius: 1px 1px 3px 3px;
      position: absolute;
      content: "";
      left: 8.5px;
      display: block;
      background-color: #4B2D0B;
    }
    
    .bear-face::after {
      width: 2px;
      height: 1px;
      content: "";
      display: block;
      position: absolute;
      top: 6px;
      left: 10px;
      background-color: #F24B1F;
      border-radius: 0 0 1px 1px;
    }
    
    .bear-head::before, .bear-head::after {
      content: "";
      display: block;
      background-color: #FCB96A;
      border-radius: 50%;
      border: 2px solid #E39F58;
      width: 4px;
      height: 4px;
      position: absolute;
      top: -2px;
    }
    
    .bear-head::after {
      right: 0;
    }
    
    .bear-body {
      position: absolute;
      width: 15px;
      height: 11px;
      top: 15px;
      background-color: #F9B667;
      left: 7.8px;
      z-index: -1;
      border-radius: 50% 50% 5% 5%;
      box-shadow: inset 0 3px 0 4px #E29E57;
    }
    
    .bear-body::before, .bear-body::after, .bear-hands::before, .bear-hands::after {
      background-color: #CB8B4D;
      content: "";
      display: block;
      position: absolute;
      height: 3px;
      width: 4.7px;
      border-radius: 0 0 3px 3px;
      bottom: -3px;
    }
    
    .bear-hands::before, .bear-hands::after {
      top: 6px;
    }
    
    .bear-hands::before {
      left: -3.8px;
      transform: rotate(90deg);
    }
    
    .bear-hands::after {
      right: -3.8px;
      transform: rotate(-90deg);
    }
    
    .bear-body::before {
      left: 1px;
    }
    
    .bear-body::after {
      right: 1px;
    }
    
    .bear-eyes::before, .bear-eyes::after {
      content: "";
      display: block;
      background-color: #3B1F14;
      height: 3px;
      width: 3px;
      border: 2px solid white;
      border-radius: 50%;
      position: absolute;
      top: 4px;
      left: 7px;
    }
    
    .bear-eyes::after {
      left: 16px;
    }
    
    .bear-item::before {
      width: 2px;
      height: 10px;
      background: black;
      position: absolute;
      left: 4px;
      top: 13px;
      content: "";
    }
    
    .bear-item-arrow {
      transform: rotate(45deg);
      border: 6px solid transparent;
      border-bottom-color: #333;
      position: absolute;
      top: -4px;
      left: 4px;
    }
    
    .bear-item-arrow::after {
      content: "";
      background-color: #333;
      width: 6px;
      height: 5px;
      top: 5px;
      position: absolute;
      left: -3px;
    }
    

    좋은 웹페이지 즐겨찾기