实现效果:
拉动滑动条,表情由愤怒到满意,并且颜色也由红色逐渐变更成绿色
如下图:
实现思路:
- 利用clip-path实现多边形蒙版对眼睛部分进行绘制
.eye {
position: absolute;
top: 45px;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
clip-path: polygon(0 70%, 100% 0, 100% 100%, 0 100%);
}
- 利用 box-shadow 的 insert 属性可以绘制内部阴影的特性,对圆形绘制内阴影形成嘴部表情
.mouse {
height: 60px;
width: 70px;
position: absolute;
left: calc(50% - 35px);
top: 86px;
/* border-radius: 30px; */
border-radius: 50%;
box-shadow: inset 0 6px 0 #fff;
clip-path: inset(0% 0% 0% 0%);
transform: translateY(30px);
animation: mouse 1s linear var(--delay) 1 forwards paused;
}
- 对滑动条样式修改,动态计算滑过的部分,并设置渐变条
#rangeInput {
-webkit-appearance: none;
margin-top: 40px;
height: 24px;
width: 180px;
border-radius: 12px;
box-shadow: 0px 0px 8px 0px rgb(125, 125, 125);
animation: face 1s linear var(--delay) 1 forwards paused;
background-size: var(--slide) 100%;
background-repeat: no-repeat;
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>表情变化动画</title>
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
--delay: 0;
--slide: 0%;
}
#rangeInput {
-webkit-appearance: none;
margin-top: 40px;
height: 24px;
width: 180px;
border-radius: 12px;
box-shadow: 0px 0px 8px 0px rgb(125, 125, 125);
animation: face 1s linear var(--delay) 1 forwards paused;
background-size: var(--slide) 100%;
background-repeat: no-repeat;
}
/*拖动块的样式*/
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 24px;
width: 24px;
background: #fff;
border-radius: 50%;
border: solid 1px #ddd;
}
.container {
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.face {
position: relative;
background-color: red;
width: 180px;
height: 180px;
border-radius: 50%;
animation: face 1s linear var(--delay) 1 forwards paused;
}
.eye {
position: absolute;
top: 45px;
width: 40px;
height: 40px;
background-color: #fff;
border-radius: 50%;
}
.left {
left: 36px;
animation: leftEye 1s linear var(--delay) 1 forwards paused;
}
.right {
right: 36px;
animation: rightEye 1s linear var(--delay) 1 forwards paused;
}
.mouse {
height: 60px;
width: 70px;
position: absolute;
left: calc(50% - 35px);
top: 86px;
/* border-radius: 30px; */
border-radius: 50%;
box-shadow: inset 0 6px 0 #fff;
clip-path: inset(0% 0% 0% 0%);
transform: translateY(30px);
animation: mouse 1s linear var(--delay) 1 forwards paused;
}
@keyframes face {
0% {
background-image: linear-gradient(to left top, #ff0000, #f36400);
}
20% {
background-image: linear-gradient(to left top, #f36400, #dd9200);
}
40% {
background-image: linear-gradient(to left top, #dd9200, #c1b700);
}
60% {
background-image: linear-gradient(to left top, #c1b700, #d5a700);
}
80% {
background-image: linear-gradient(to left top, #d5a700, #9fd600);
}
100% {
background-image: linear-gradient(
to left top,
#9fd600,
#8fe000,
#7aea00,
#5af50a,
#00ff21
);
}
}
@keyframes mouse {
50% {
height: 6px;
box-shadow: inset 0 6px 0 #fff;
clip-path: inset(0% 0% 0% 0%);
transform: translateY(40px);
}
50.1% {
height: 6px;
box-shadow: inset 0 -6px 0 #fff;
clip-path: inset(50% 0% 0% 0%);
transform: translateY(40px);
}
100% {
height: 60px;
box-shadow: inset 0 -40px 0 #fff;
clip-path: inset(50% 0% 0% 0%);
transform: translateY(0);
}
}
@keyframes leftEye {
from {
clip-path: polygon(0 70%, 100% 0, 100% 100%, 0 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@keyframes rightEye {
from {
clip-path: polygon(0 0, 100% 70%, 100% 100%, 0 100%);
}
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
</style>
<div class="container">
<div class="face">
<span class="left eye"></span>
<span class="right eye"></span>
<span class="mouse"></span>
</div>
<input type="range" id="rangeInput" min="0" max="1" step="0.01" />
</div>
<script>
const input = document.querySelector("#rangeInput");
const move = () => {
document.body.style.setProperty("--delay", `-${input.value}s`);
document.body.style.setProperty(
"--slide",
`${input.value * 156 + 12}px`
);
};
move();
input.oninput = move;
</script>
</body>
</html>
欢迎关注我的技术站