나는 css로 html 요소를 구부려 곰돌이를 만들었다
그뿐이야.
요즘은 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;
}
Reference
이 문제에 관하여(나는 css로 html 요소를 구부려 곰돌이를 만들었다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rsuzuki/items/ec5e5b6b638e474ac66b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)