注册账号-全站资源免费下载
您需要 登录 才可以下载或查看，没有账号？注册账号
x
纯CSS3绘制卡通雪人特效代码是一款基于css3绘制的卡通可爱雪人冬天元素特效。css代码：body {
min-height: 500px;
height: 100vh;
position: relative;
background-color: #B0D0D3;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#snowman {
background-repeat: no-repeat;
width: 30em;
height: 30em;
background-image: radial-gradient(ellipse, black 46%, transparent 50%), radial-gradient(ellipse, silver 20%, slategray 35%, DarkSlateGray 45%, black 50%, transparent 50%), linear-gradient(black, black), radial-gradient(ellipse, silver 20%, slategray 35%, DarkSlateGray 45%, black 50%, transparent 50%), radial-gradient(ellipse, black 47%, transparent 50%), linear-gradient(RebeccaPurple, RebeccaPurple), linear-gradient(40deg, transparent 49.5%, RebeccaPurple 50%, RebeccaPurple 53.5%, transparent 54%), radial-gradient(circle, RebeccaPurple 41%, transparent 50%), radial-gradient(circle, RebeccaPurple 41%, transparent 50%), linear-gradient(-130deg, tomato 20%, transparent 21%), radial-gradient(circle, black 41%, transparent 50%), radial-gradient(circle, black 41%, transparent 50%), radial-gradient(circle, black 41%, transparent 50%), radial-gradient(circle, black 41%, transparent 50%), radial-gradient(circle, black 41%, transparent 50%), radial-gradient(circle, Snow 30%, #ededed 49%, transparent 50%), radial-gradient(circle, Snow 30%, #ededed 49%, transparent 50%), radial-gradient(circle, Snow 30%, #ededed 49%, transparent 50%), linear-gradient(30deg, transparent 49%, black 50%, black 53%, transparent 54%), linear-gradient(-30deg, transparent 49%, black 50%, black 53%, transparent 54%), linear-gradient(50deg, transparent 49%, black 50%, black 53%, transparent 54%), linear-gradient(10deg, transparent 49%, black 50%, black 53%, transparent 54%), linear-gradient(120deg, transparent 49%, black 50%, black 53%, transparent 54%), linear-gradient(177deg, transparent 49%, black 50%, black 53%, transparent 54%);
background-size: 20% 5%, 20% 5%, 14% 12%, 20% 5%, 30% 5%, 16% 3%, 6% 65%, 4.5% 4.5%, 4.5% 4.5%, 5% 10%, 3% 3%, 3% 3%, 3% 3%, 3% 3%, 3% 3%, 30% 30%, 40% 40%, 50% 50%, 15% 15%, 15% 15%, 16% 5%, 5% 15%, 14% 5%, 5% 15%;
background-position: 50% 12%, 50% 12.75%, 50% 16%, 50% 24%, 50% 26%, 50% 44.5%, 55% 45.5%, 42% 44.5%, 57.75% 44.5%, 49% 40%, 53% 32%, 47% 32%, 50%, 50% 55%, 50% 60%, 50% 30%, 50% 60%, 50% 110%, 25% 50%, 75% 50%, 20% 46%, 23% 48%, 80% 45%, 78% 47%;
} index.html代码： <!DOCTYPE html> <html lang="en" >
<head>
<meta charset="UTF-8">
<title>可爱的卡通雪人- 锦程资源网</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="snowman"></div>
</body>
</html>
|
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜