html制作卡通图案代码,CSS画的卡通动画图案
CSS
语言:
CSSSCSS
确定
* {
padding: 0;
margin: 0;
}
body {
background: #26ad00;
}
.head {
background: #ff8cb2;
width: 70vw;
height: 50vw;
position: absolute;
top: calc(50% - 25vw);
left: calc(50% - 35vw);
z-index: 2;
border-radius: 90% 90% 80% 80% / 120% 120% 60% 60%;
animation: monster 1s infinite;
}
.head:after {
content: "";
background: #ffa1c7;
width: 25%;
height: 20%;
position: absolute;
top: 18%;
right: 15%;
border-radius: 100%;
transform: rotate(30deg);
}
.head > .eyes {
width: 100%;
height: 10vw;
position: absolute;
top: 45%;
}
.head > .eyes > .eye {
background: black;
width: 10vw;
height: 10vw;
border-radius: 100%;
position: absolute;
}
.head > .eyes > .eye:after {
content: "";
background: white;
width: 2.5vw;
height: 2.5vw;
position: absolute;
top: 20%;
right: 20%;
border-radius: 100%;
}
.head > .eyes > .eye.left {
left: 25%;
}
.head > .eyes > .eye.right {
right: 25%;
}
.head > .blushes {
width: 100%;
height: 10vw;
position: absolute;
top: 65%;
}
.head > .blushes > .blush {
background: #ff4a86;
width: 15vw;
height: 5vw;
border-radius: 100%;
position: absolute;
}
.head > .blushes > .blush.left {
left: 5%;
}
.head > .blushes > .blush.right {
right: 5%;
}
.head .mouth {
width: 25vw;
height: 7vw;
position: absolute;
bottom: 10%;
left: calc(50% - 12.5vw);
}
.head .mouth > .lip {
width: calc(12.5vw - 2.25vw);
height: calc(7vw - 1.5vw);
border: solid 1.5vw black;
border-top: none;
position: absolute;
border-radius: 0 0 100% 100% / 0 0 180% 180%;
}
.head .mouth > .lip.right {
right: 0;
}
.shadow {
background: #2f2f2f;
width: 70vw;
height: 20vw;
position: absolute;
top: calc(50% - 10vw + 25vw);
left: calc(50% - 35vw);
z-index: 1;
border-radius: 100%;
animation: shadow 1s infinite;
}
@keyframes monster {
0% {
width: 70vw;
height: 50vw;
left: calc(50% - 35vw);
border-radius: 90% 90% 80% 80% / 120% 120% 60% 60%;
}
50% {
width: 62vw;
height: 53vw;
margin-top: -10vw;
top: calc(50% - 26.5vw);
left: calc(50% - 31vw);
border-radius: 100% 100% 80% 80% / 150% 150% 60% 60%;
}
}
@keyframes shadow {
0% {
width: 70vw;
height: 20vw;
top: calc(50% - 10vw + 25vw);
left: calc(50% - 35vw);
}
50% {
width: 58.33333333vw;
height: 16.66666667vw;
top: calc(50% - 8.33333333vw + 25vw);
left: calc(50% - 29.16666667vw);
}
}
html制作卡通图案代码,CSS画的卡通动画图案相关推荐
- html css画小猪佩琪,【前端切图】用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- 用css画一个卡通形象-小猪佩奇
最近在腾讯云技术社区遇到了一位奇才,用css画出了一个社会人小猪佩奇,不得不服.研究了一下他的文章https://segmentfault.com/a/1190000014909658,感觉甚是有趣, ...
- css画一个卡通动画
1.效果图 2.代码 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- 太极图php代码,css画太极图(阴阳八卦)
复制代码代码如下: #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: ...
- css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路 怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...
- css html弄出哆啦a梦,用css画一个哆啦A梦
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! body{ background-color: #66B3FF; height: 300px; ov ...
- php爱心代码,使用CSS画爱心代码实例
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: css画桃心 .heart-body { width: 500px; margin ...
- python画-如何用Python画各种著名数学图案 | 附图+代码
原标题:如何用Python画各种著名数学图案 | 附图+代码 用Python绘制著名的数学图片或动画,展示数学中的算法魅力. Mandelbrot 集 代码:46 lines (34 sloc) 1. ...
- 用python画简单的图案-如何用Python画各种著名数学图案 | 附图+代码
原标题:如何用Python画各种著名数学图案 | 附图+代码 用Python绘制著名的数学图片或动画,展示数学中的算法魅力. Mandelbrot 集 代码:46 lines (34 sloc) 1. ...
最新文章
- python免费入门教程-python小白如何入门,第一步要做什么?(附带免费教程)
- SharePoint要在master page中动态显示List数据的几种方式
- 1900页Python系列PPT分享二:Python序列(列表、元组、字典、集合)(154页)
- python模块下载失败_ubuntu16.04安装python的requests模块失败,怎么解决?
- 在WCF中使用Ninject轻量级IOC框架 之 SOAP风格服务
- canvas width/height和style.width/style.height
- matlab+dds正弦表,FPGA模拟DDS正弦波信号源1
- 微信美食菜谱小程序系统毕业设计毕设(6)开题答辩PPT
- 计算机c盘用户里的APPDATA,Windows7系统C盘中的appdata文件夹是否可以删除
- 创建对象的几种常用写法
- MATLAB(1)MATLAB工作环境
- python 合并加速mp4文件(含对文件、目录的处理)
- 逼自己养成成长型思维模式
- 安装 stun/turn服务
- qzezoj 1665 虫洞路线
- docker 传递 profile
- 开启CDN 后网站出现 “ 您的连接不是私密连接 ”
- python爬取安居客网站上北京二手房数据
- 胡扯推荐算法(协同)及其dome实现
- HTML实现在线预览Excel,word,ppt
热门文章
- 企业微信H5_消息推送接收消息回调配置、内网穿透到本地
- 使用手机企业微信创建自己的企业(公司)
- java.lang.AbstractMethodError: org.apache.xerces.dom.DocumentImpl.setXmlVersion
- yarn vite vue3.x
- mybatisplus 一次性执行多条SQL语句插入(Oracle篇)
- Git 切换提交历史节点
- Spring boot + mybatis + oracle代码生成器
- linux所有文件打包压缩,Linux基础教程:对文件打包压缩
- 从当前元素继续寻找_169. 多数元素
- AVFoundation – AVAssetImageGenerator 截图