我记得在很早之前，我分享过一组用CSS实现的动画人物的插画效果，《纯CSS制作辛普森一家卡通人物》，截图如下：
今天，我们再来看一个关于CSS实现的插画矢量图效果：
HTML代码：
<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】180—CSS实现一个漂亮的矢量插画效果</title>
<link rel=”stylesheet” href=”style.css”></head>
<body><div id=”bubbles”></div>
<div id=”shark”>
<div class=”shark-body”></div>
<div class=”shark-eye”></div>
<div class=”aleta”></div>
<div class=”tail”></div>
<div class=”fin”></div>
<div class=”gill gill-1″></div>
<div class=”gill gill-2″></div>
<div class=”gill gill-3″></div>
</div></body>
</html>
CSS代码：
html, body {
margin: 0;
padding: 0;
border: 0;
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
background: linear-gradient(#adf, #bef 20%, #9de 0)
}#bubbles {
position: absolute;
width: 2vmin;
height: 2vmin;
border-radius: 50%;
background: rgba(255,255,255,0.4);
top: 50%;
left: 50%;
transform: translate(12vmin, -8vmin);
box-shadow: -2vmin -1.25vmin 0 -0.5vmin rgba(255,255,255,0.3), -0.75vmin -2.75vmin 0 -0.25vmin rgba(255,255,255,0.5);
}#shark {
width: 30vmin;
height: 10vmin;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}#shark div {
position: absolute;
box-sizing: border-box;
}.shark-body {
left: 0vmin;
width: 30vmin;
height: 20vmin;
background: red;
border-radius: 50%;
transform: translate(0, -50%);
clip-path: polygon(0% 50%, 100% 50%, 100% 90%, 70% 70%, 90% 100%, 0% 100%);
background: #aaa;
}.shark-eye {
width: 1.5vmin;
height: 1.5vmin;
border-radius: 50%;
background: white;
box-shadow: inset -0.2vmin -0.45vmin 0 0.6vmin;
top: 1.5vmin;
right: 4vmin;
}.aleta, .tail, .fin {
width: 10vmin;
height: 8vmin;
box-shadow: 4vmin -0.5vmin #aaa;
border-radius: 50%;
top: -1vmin;
transform: translate(-130%, -3vmin) rotate(10deg);
}.aleta {
box-shadow: 5vmin 0vmin #999;
top: 5vmin;
left: 3vmin;
transform: none;
clip-path: polygon(0% 50%, 200% 40%, 200% 100%, 0% 100%);
}.fin {
box-shadow: 5vmin 0vmin #aaa;
left: 15vmin;
}.gill {
width: 6vmin;
height: 9vmin;
border-radius: 100%;
box-shadow: -2vmin 0 0 -1.7vmin rgba(0,0,0,0.25);
left: 18.5vmin;
}.gill-2 {
transform: translate(-1vmin, 0) scale(0.9);
}.gill-3 {
transform: translate(-2vmin, 0) scale(0.8);
}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
