电话
13363039260
如何使用纯CSS实现一只会动的手
2024-01-17 14:35 小编
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，容器中的5个.finger元素代表5根手指，.thumb元素代表大拇指，.palm元素代表手掌：
<divclass="hand">
<spanclass="fingerthumb"></span>
<spanclass="finger"></span>
<spanclass="finger"></span>
<spanclass="finger"></span>
<spanclass="finger"></span>
<spanclass="palm"></span>
</div>
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:radial-gradient(white,lightcyan);
}
定义容器尺寸，其中outline属性是辅助线：
.hand{
width:16em;
height:8em;
font-size:10px;
outline:1pxdashedblack;
}
画出手掌：
.hand{
position:relative;
color:darksalmon;
}
.palm{
position:absolute;
width:8em;
height:6em;
background-color:currentColor;
border-radius:1em4em;
right:0;
}
画出大拇指的轮廓：
.thumb{
position:absolute;
width:9.6em;
height:3.2em;
background-color:currentColor;
border-radius:3em2em2em1em;
right:0;
bottom:1em;
transform-origin:calc(100%-2em)2em;
transform:rotate(-20deg);
border-bottom:0.2emsolidrgba(0,0,0,0.1);
border-left:0.2emsolidrgba(0,0,0,0.1);
}
画出大拇指上的指甲：
.thumb::before{
content:'';
position:absolute;
width:1.9em;
height:1.9em;
background-color:rgba(255,255,255,0.3);
border-radius:60%10%10%30%;
bottom:-0.3em;
left:0.5em;
border-right:0.1emsolidrgba(0,0,0,0.1);
}
画出食指靠近手掌的后半部分：
.finger:not(:first-child){
position:absolute;
width:6.4em;
height:3.5em;
background-color:currentColor;
right:5.2em;
bottom:4em;
transform-origin:100%2em;
transform:rotate(10deg);
}
画出食指的前半部分：
.finger:not(:first-child)::before{
content:'';
position:absolute;
width:9em;
height:3em;
background-color:currentColor;
right:4.2em;
top:0.2em;
border-radius:2em;
transform-origin:calc(100%-2em)2em;
transform:rotate(-60deg);
}
为除大拇指以外其他4根手指设置下标变量，从食指到小指逐渐缩小并且颜色加深：
.finger:not(:first-child){
--scale:calc(1-(5-var(--n))*0.2);
transform:rotate(10deg)scale(var(--scale));
filter:brightness(calc(100%-(5-var(--n))*10%));
}
.finger:nth-child(2){--n:2;}
.finger:nth-child(3){--n:3;}
.finger:nth-child(4){--n:4;}
.finger:nth-child(5){--n:5;}
用伪元素画出手的阴影：
.hand::before{
content:'';
position:absolute;
width:14em;
height:4.5em;
background-color:black;
border-radius:4em1em;
top:4em;
filter:blur(1em)opacity(0.3);
}
增加手指敲击桌面的动画效果：
.finger:not(:first-child){
animation:tap-upper1.2sease-in-outinfinite;
animation-delay:calc((var(--n)-2)*0.1s);
}
@keyframestap-upper{
0%,50%,100%{
transform:rotate(10deg)scale(var(--scale));
}
40%{
transform:rotate(50deg)scale(var(--scale));
}
}
猜你喜欢
联络方式：
13363039260
微信二维码 