CSS 画冰墩墩~
前端瓶子君
共 740字,需浏览 2分钟
· 2022-02-20
前端瓶子君,关注公众号
回复算法,加入前端编程面试算法每日一题群
抢不上冰墩墩就自己画一个!
在线预览
代码:
冰墩墩
\* {
box-sizing: border-box;
margin: 0;
}
body {
padding-top: 100px;
overflow: hidden;
}
.wrapper {
width: 477px;
height: 555px;
margin: 0 auto;
position: relative;
}
.body {
width: 100%;
height: 100%;
border: 3px solid #333333;
border-radius: 46% 46% 49% 49%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
background-color: #fff;
}
.ear {
width: 73px;
height: 73px;
background-color: #0F0F10;
border-radius: 50px;
position: absolute;
}
.ear\_l {
left: 66px;
top: 11px;
}
.ear\_r {
right: 66px;
top: 11px;
}
.arm {
width: 172px;
height: 88px;
background-color: #0F0F10;
border-radius: 50px;
position: absolute;
}
.arm\_l {
left: -143px;
top: 225px;
transform-origin: 172px 39px;
transform: rotate(-55deg);
border-radius: 50% 30% 50px 50px;
animation: 2s ease-in-out 1.1s infinite lRotate;
}
@keyframes lRotate {
0% {
transform: rotate(-55deg);
}
10% {
transform: rotate(-60deg);
box-shadow: 0 10px 10px rgba(15,15,16, .3);
}
20% {
transform: rotate(-50deg);
}
30% {
transform: rotate(-58deg);
}
40%,50%,60%,70%,80%,90%,100% {
transform: rotate(-55deg);
}
}
.arm\_r {
right: -140px;
top: 202px;
transform: rotate(-58deg);
border-radius: 80% 50px 80px 80%;
transform-origin: 0 39px;
animation: 2s ease-in-out 1s infinite rRotate;
}
@keyframes rRotate {
0% {
transform: rotate(-58deg);
}
10% {
transform: rotate(-72deg);
box-shadow: 0px -10px 10px rgba(15,15,16, .3);
}
20% {
transform: rotate(-45deg);
box-shadow: 0 10px 10px rgba(15,15,16, .3);
}
30% {
transform: rotate(-70deg);
box-shadow: 0px -10px 10px rgba(15,15,16, .3);
}
40%,50%,60%,70%,80%,90%,100% {
transform: rotate(-58deg);
}
}
.heart {
position: absolute;
right: 54px;
top: 25px;
transform: rotate(30deg);
}
.heart\_l {
width: 45px;
height: 30px;
background-color: #ad2025;
position: absolute;
top: 0;
left: 0;
border-radius: 0 50% 50% 0;
}
.heart\_r {
width: 45px;
height: 30px;
background-color: #ad2025;
position: absolute;
top: -8px;
left: -8px;
border-radius: 0 50% 50% 0;
transform: rotate(-90deg);
}
.leg {
width: 100px;
height: 145px;
background-color: #0F0F10;
position: absolute;
bottom: -60px;
}
.leg\_l {
left: 96px;
border-radius: 16% 70% 30% 50px;
transform: rotate(-3deg);
}
.leg\_r {
left: 269px;
bottom: -63px;
border-radius: 70% 16% 50px 30%;
transform: rotate(4deg);
}
.face {
width: 400px;
height: 352px;
position: absolute;
left: 44px;
top: 34px;
border: 3px solid #66E085;
border-radius: 93% 90% 75% 74%;
z-index: 5;
}
.line {
position: absolute;
left: 0;
top: 0;
border-radius: 93% 90% 75% 74%;
}
.line1 {
width: 394px;
height: 346px;
border: 2px solid #F921E7;
}
.line2 {
width: 390px;
height: 342px;
border: 3px solid #EDEC59;
left: 2px;
top: 2px;
}
.line3 {
width: 378px;
height: 330px;
left: 8px;
top: 8px;
background-color: #fff;
}
.line3::after {
position: absolute;
content: '';
top: -3px;
bottom: -3px;
left: -3px;
right: -3px;
background: linear-gradient(217deg, rgba(1,129,200, .3), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(1,129,200, 1), rgba(0,255,0,0) 70.71%),
linear-gradient(60deg, rgba(1,129,200, .1), rgba(0,0,255,0) 70.71%),
linear-gradient(336deg, rgba(33,41,238, 1), rgba(0,0,255,0) 70.71%);
border-radius: 30px;
z-index: -1;
border-radius: 93% 90% 75% 74%;
}
.line4 {
width: 378px;
height: 330px;
left: 8px;
top: 8px;
border: 3px solid #A3F1FE;
}
.eye {
width: 172px;
height: 110px;
background-color: #0F0F10;
border-radius: 60%;
position: absolute;
}
.eye\_l {
left: 24px;
top: 80px;
transform: rotate(-45deg);
}
.eye\_r {
right: 8px;
top: 80px;
transform: rotate(-135deg) scaleY(-1);
}
.eye .eye-c1 {
width: 70px;
height: 70px;
background-color: #fff;
border-radius: 50%;
position: absolute;
right: 33px;
top: 26px;
}
.eye .eye-c2 {
width: 60px;
height: 60px;
background-color: #423e37;
border-radius: 50%;
position: absolute;
right: 4px;
top: 5px;
}
.eye .eye-c3 {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
position: absolute;
right: 7px;
top: 11px;
}
.eye\_r .eye-c3 {
right: 11px;
top: 6px;
}
.nose {
width: 43px;
height: 34px;
border-radius: 100%;
background-color: #0F0F10;
position: absolute;
top: 140px;
left: 189px;
z-index: 8;
}
.nose-c {
width: 26px;
height: 15px;
border-radius: 100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
margin: 0 auto;
margin-top: 4px;
}
.mouth {
width: 110px;
height: 40px;
position: absolute;
top: 160px;
left: 151px;
z-index: 3;
/\* 设置border-bottom在ios手机上边也会有一点点边框颜色 \*/
/\* border-bottom: 3px solid #0F0F10; \*/
box-shadow: 0 2px #0F0F10;
border-radius: 100%;
background-color: #fff;
}
.mouth-c {
width: 88px;
height: 36px;
position: absolute;
top: 172px;
left: 162px;
border-bottom: 2px solid #0F0F10;
border-radius: 100%;
margin: 0 auto;
z-index: 1;
background-color: #A51320;
}
来自: 望记
https://segmentfault.com/a/1190000041385432
最后
评论
原来Matplotlib能画股票K线图!!附代码
之前在一篇文章中提到Matplotlib可视化,甚至可以用来画股票K线图,许多同学也在问代码,这次来发个文回应下。Python用matplotlib绘制K线图,需要配合talib、numpy、mpl_finance等第三方库来使用,效果展示如下:简单讲讲K线图的结构,我不搞股票,所以不太懂,特地查了
Python大数据分析
9
8则实用的纯CSS布局排版技巧 | 网易4年实践
「链接和长图失效,请大家点击阅读原文查看详情」前言开发每一张网页都离不开布局排版,基于良好布局排版打下基础,才能使后续的开发更顺利。当然不能停留在IExplorer时代那种局限思维上,没办法解决的布局排版都用JS实现😂。今时不同往日,现代CSS属性能更好地快速实现各种布局排版,节约更多时间去摸鱼😉。
前端迷
10
【CSS】2018- 不一样的SVG!SVG在 CSS 中的应用
介绍一些你可能没用过的SVG小技巧。在平时开发中,很多时候都会用到SVG。大部分情况我们都不必关注SVG里面到底是什么,直接当成图片资源引入就行,比如常见的图标资源我们可以通过多种方式使用这个特殊的图片<img src="a.svg">.icon{ background: url("a
前端自习课
96
【每日一练】306—HTML、CSS和JS实现一款简易风时钟效果
作者 | 杨小爱 写在前面 关于时钟的效果,我们前面刚刚写过一期,《【每日一练】304—用 HTML、CSS和JavaScript 实现一款时钟效果》那是一个圆形钟表的效果,今天我们再来写一款,这个风格比较简易,就是纯数字时钟,...
web前端开发
0
【CSS】1995- 15个CSS 常见错误,请一定要注意避免
在不断发展的 Web 开发领域,掌握 CSS(层叠样式表)对于制作视觉上令人惊叹且响应迅速的网站至关重要。 然而,陷阱比比皆是,即使是经验丰富的开发人员也可能会发现自己陷入了常见的 CSS 错误中。 本文剖析了 15 个...
前端自习课
0
object-fit CSS 属性
object-fit CSS 属性指定可替换元素(例如:<img> 或 <video>)的内容应该如何适应到其使用高度和宽度确定的框。<div class="box"> <img class="pic" src="https://interactive-exam...
前端精髓
0
这年头,高低也要画几张架构图!
本文转载于稀土掘金技术社区,作者:清水河畔 什么是架构图? 架构图的定义及作用 什么是架构图?维基百科、百度百科其实都没有关于它的直接定义。不过我们可以进行拆分理解: 架构图=架构+图 这样问题就转化成,什...
全栈前端精选
0
【总结】1958- 登录页面一些有趣的 css 效果,太好看了!
作者:刘圣凯 https://juejin.cn/post/7294908459002331171 前言 今天无意看到一个登录页,input框focus时placeholder上移变成label的效果,无聊没事干就想着自己来实现一下,登录页面能做文章的,普遍的就是按钮动...
前端自习课
0