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%;
}
mysql workbench linux下配置文件
.head > .eyes > .eye { background: black; width: 10vw;
height: 10vw;
border-radius: 100%; position: absolute;
}
.head > .eyes > .eye:after { content: "";
mvc框架设计
background: white; width: 2.5vw;
height: 2.5vw;
position: absolute;
top: 20%;
right: 20%;
学生个人网页制作html代码cssborder-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%;
}
distinct finding.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;c语言程序设计何钦铭第四版pdf
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);
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。