【每日一练】180—CSS实现一个漂亮的矢量插画效果

每日一练10个月前发布 admin
1,213 0

我记得在很早之前,我分享过一组用CSS实现的动画人物的插画效果,《纯CSS制作辛普森一家卡通人物》,截图如下:

【每日一练】180—CSS实现一个漂亮的矢量插画效果

 

今天,我们再来看一个关于CSS实现的插画矢量图效果:

【每日一练】180—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);
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...