如何使用css画一个冰墩墩？

已于 2023-09-28 18:22:41 修改
阅读量122 收藏 1
点赞数
文章标签： css 前端
于 2023-09-28 18:12:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhhhh2187/article/details/133388035
版权

冰墩墩，可爱的雪人形象，给人带来了冰凉清爽的冬日氛围。现在让我们用 CSS 来画一个可爱的冰墩墩吧！

实现效果：

以下是全部代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {

            /* background-image: linear-gradient(pink, #e4f3f6)  */
            background: no-repeat linear-gradient(pink, #e4f3f6);
            color: #000;
            width: 100%;
            height: 100%;
            overflow: hidden;

        }

        /* 设置冰墩墩的大概范围 */
        .conter {
            position: absolute;
            /* margin: 100px auto; */
            left: 40%;
            top: -200px;
        }

        .er1,
        .er2 {
            background: #393939;
            width: 81px;
            height: 115px;
            border-radius: 50%;
            position: absolute;
            z-index: -1;
        }

        .er1 {
            position: relative;
            top: 280px;
            left: 29px;
        }

        .er2 {
            position: relative;
            top: 160px;
            left: 197px;

        }

        .body {
            position: absolute;
            width: 300px;
            /* height: 400px; */
            height: 350px;
            background-color: #fff;
            border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
            border: 8px solid #000;
            margin: 50px auto;
        }

        .quan1 {
            position: relative;
            top: 90px;
            left: 30px;
            width: 250px;
            height: 170px;
            border: 4px solid yellow;
            border-radius: 60% 60% 50% 50%;
        }

        .conter .quan2 {
            position: relative;
            top: 2px;
            left: 1px;
            width: 242px;
            height: 159px;
            border: 4px solid rebeccapurple;
            border-radius: 60% 60% 50% 50%;
        }

        .conter .quan3 {
            position: relative;
            top: 0px;
            left: 0px;
            width: 234px;
            height: 151px;
            border: 4px solid green;
            border-radius: 60% 60% 50% 50%
        }

        .conter .quan4 {
            position: relative;
            top: 0px;
            left: -2px;
            width: 228px;
            height: 143px;
            border: 4px solid #32cbf3;
            border-radius: 60% 60% 50% 50%;
        }

        .eye1,
        .eye2 {
            width: 70px;
            height: 90px;
            background-color: #393939;
            border-radius: 50%;
            position: absolute;
            /* z-index: 21; */
        }

        .eye1 {
            top: 356px;
            left: 65px;
            transform: rotate(50deg);
        }

        .eye2 {
            top: 356px;
            left: 180px;
            transform: rotate(-50deg);

        }

        .eye1:before,
        .eye2:before {
            content: "";
            width: 40px;
            height: 40px;
            border: #fff 5px solid;
            border-radius: 100%;
            position: absolute;
        }

        .eye1:before {
            right: 5px;
            top: 10px;
        }

        .eye2:before {
            left: 6px;
            top: 9px;

        }

        .eye1:after,
        .eye2:after {
            content: "";
            width: 10px;
            height: 10px;
            background: #fff;
            border-radius: 100%;
            position: absolute;
        }

        .eye1:after {
            right: 22px;
            top: 19px;

        }

        .eye2:after {
            left: 38px;
            top: 31px;
        }


        .bizi {
            position: relative;
            top: 0;
            left: 149px;
            width: 20px;
            height: 12px;
            background-color: #393939;
            border-radius: 38% 38% 50% 50%;
        }

        .shou1,
        .shou2 {
            background: #333;
            position: absolute;
            width: 60px;
            height: 80px;
            border-radius: 0 0 30px 30px;
            z-index: -1;
        }

        .shou1 {
            transform: rotate(50deg);
            left: -40px;
            top: 459px;
        }

        .shou2 {
            position: absolute;
            transform: rotate(37deg);
            left: 279px;
            top: 336px;
            height: 120px;
            border-radius: 40% 50% 50% 20%;
            animation: dong 2s infinite alternate linear;
            transform-origin: left bottom;
        }


        @keyframes dong {
            form {
                transform: rotate(27deg);
            }

            to {
                transform: rotate(67deg);
            }
        }

        .shou2:before {
            content: "";
            width: 16px;
            height: 24px;
            background: #bc242c;
            position: absolute;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            transform: rotate(45deg);
            left: 25px;
            top: 21px;

        }

        .shou2:after {
            content: "";
            width: 16px;
            height: 24px;
            background: #bc242c;
            position: absolute;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            transform: rotate(-45deg);
            left: 18px;
            top: 20px;
        }




        .leg1,
        .leg2 {
            background: #333;
            position: absolute;
            width: 63px;
            height: 80px;
            /* border-radius: 0 0 30px 30px; */
            z-index: -1;
        }

        .leg1 {
            left: 72px;
            top: 626px;
            border-radius: 0 0 11px 22px;
        }

        .leg1:after,
        .leg2:after {
            content: "";
            width: 43px;
            height: 30px;
            position: absolute;
            background: #333333;
            border-radius: 30px;
        }

        .leg1:after {
            top: 50px;
            left: 23px;
        }

        .leg2:after {
            top: 50px;
            left: -3px;
        }

        .leg2 {
            left: 180px;
            top: 626px;
            border-radius: 0 0 22px 11px;

        }




        .text {
            position: relative;
            top: 94px;
            left: 114px;
            font: 700 30px '';

        }

        .zuiba {
            position: relative;
            top: -27px;
            left: 132px;
            width: 55px;
            height: 40px;
            background-color: #393939;
            border-radius: 50% 50%;
            z-index: 10;
        }

        .zuiba1 {
            position: relative;
            top: -79px;
            left: 146px;
            width: 25px;
            height: 20px;
            background-color: #fff;
            border-radius: 50% 50%;
            z-index: 10;
        }

        .zuiba2 {
            position: relative;
            top: -70px;
            left: 143px;
            width: 35px;
            height: 20px;
            background-color: #bc242c;
            border-radius: 50% 50%;
            z-index: 10;
        }

        .huan1,
        .huan2,
        .huan3,
        .huan4,
        .huan5 {
            position: relative;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            z-index: 10;

        }

        .huan1 {
            top: 50px;
            left: 117px;
            border: 2px solid #32cbf3;
        }

        .huan2 {
            top: 26px;
            left: 142px;
            border: 2px solid #333;
        }

        .huan3 {
            top: 2px;
            left: 167px;
            border: 2px solid red;
        }

        .huan4 {
            top: -14px;
            left: 129px;
            border: 2px solid tan;
        }

        .huan5 {
            top: -38px;
            left: 155px;
            border: 2px solid green;
        }
    </style>
</head>

<body>
    <div class="conter">
        <!-- 耳朵 -->
        <div class="er1"></div>
        <div class="er2"></div>
        <!-- 身体 -->
        <div class="body"></div>
        <!-- 脸上的圈圈 -->
        <div class="quan1">
            <div class="quan2">
                <div class="quan3">
                    <div class="quan4"></div>
                </div>
            </div>
        </div>
        <!-- 眼睛 -->
        <div class="eye1"></div>
        <div class="eye2"></div>
        <!-- 鼻子 -->
        <div class="bizi"></div>
        <!-- 手 -->
        <div class="shou1"></div>
        <div class="shou2">
            <div id="outer">
                <div id="div1">
                </div>
                <div id="div2">
                </div>
                <div id="div3">
                </div>
            </div>
        </div>
        <!-- 脚 -->
        <div class="leg1"></div>
        <div class="leg2">

        </div>
        <div class="text">冰墩墩</div>
        <!-- 嘴巴 -->
        <div class="zuiba"></div>
        <div class="zuiba1"></div>
        <div class="zuiba2"></div>
        <!-- 奥运五环 -->
        <div class="huan1"></div>
        <div class="huan2"></div>
        <div class="huan3"></div>
        <div class="huan4"></div>
        <div class="huan5"></div>
    </div>
</body>
<script>
    function snow() {
        // 1、定义一片雪花模板
        var flake = document.createElement('div');
        // 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
        flake.innerHTML = '❅';
        flake.style.cssText = 'position:absolute;color:#fff;';

        //获取页面的高度 相当于雪花下落结束时Y轴的位置
        var documentHieght = window.innerHeight;
        //获取页面的宽度，利用这个数来算出，雪花开始时left的值
        var documentWidth = window.innerWidth;

        //定义生成一片雪花的毫秒数
        var millisec = 10;
        //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
        setInterval(function () { //页面加载之后，定时器就开始工作
            //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
            var startLeft = Math.random() * documentWidth;

            //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
            var endLeft = Math.random() * documentWidth;

            //随机生成雪花大小
            var flakeSize = 3 + 20 * Math.random();

            //随机生成雪花下落持续时间
            var durationTime = 4000 + 7000 * Math.random();

            //随机生成雪花下落 开始 时的透明度
            var startOpacity = 0.7 + 0.3 * Math.random();

            //随机生成雪花下落 结束 时的透明度
            var endOpacity = 0.2 + 0.2 * Math.random();

            //克隆一个雪花模板
            var cloneFlake = flake.cloneNode(true);

            //第一次修改样式，定义克隆出来的雪花的样式
            cloneFlake.style.cssText += `
      left: ${startLeft}px;
      opacity: ${startOpacity};
      font-size:${flakeSize}px;
      top:-25px;
       transition:${durationTime}ms;`;

            //拼接到页面中
            document.body.appendChild(cloneFlake);

            //设置第二个定时器，一次性定时器，
            //当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
            setTimeout(function () {
                //第二次修改样式
                cloneFlake.style.cssText += `
       left: ${endLeft}px;
       top:${documentHieght}px;
       opacity:${endOpacity};`;

                //4、设置第三个定时器，当雪花落下后，删除雪花。
                setTimeout(function () {
                    cloneFlake.remove();
                }, durationTime);
            }, 0);

        }, millisec);
    }
    snow();
</script>

</html>

HHHHH2187
关注
HTML和CSS知识点总结（包括H5和C3)
qq_42349528的博客
07-28 7685
HTML和CSS知识点总结 1.常用的HTML标签 标题标签 <h1></h1>~<h6></h6> 段落标签<p></p>和换行标签<br/> 文本格式化标签 加粗<strong></strong>和<b></b> 倾斜和<i></i> 删除线<del></del>和<s&gt
javaMailSender
weixin_47952625的博客
05-19 2586
使用javaMailSender发送附件,邮件中没有正文信息 原有写法: // 设置附件 if (!CollectionUtils.isEmpty(attachPathList)) { Multipart multipart = new MimeMultipart(); for (String attachPath : attachPathList) {
用html+css+js实现一个挥手的冰墩墩的动画效果，并且添加了雪花降落效果
YYH1214的博客
04-13 1749
用html+css+js实现一个挥手的冰墩墩的动画效果，并且添加了雪花降落效果
「CSS畅想」好友想回忆童年，安排~为她做了一个果宝特攻的换装
banxianongtang的博客
10-13 289
端技术从业者与非技术好友互动，好友想回忆童年，我为她用CSS技术做了一个果宝特攻的换装。
css学习笔记
weixin_52798101的博客
07-19 163
通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
动画效果：实现卡片翻转抽奖动画（正反面内容不一样）
小多的博客
09-16 1228
根据不同条件动态添加实现动画效果首先，为卡片列表添加一个是否翻转的元素 分别设置正反两面的样式及内容翻转 动画一： 完整代码 动画二： 完整代码
html5+Css3+JavaScript+jQuery：HTML5篇
weixin_46048259的博客
10-22 1179
html5+Css3+JavaScript+jQuery：HTML5篇
java判断是否为5的倍数,编写一个Java程序，提示用户输入一个数字，然后告诉用户该数字是否是5的偶倍数。使用Scanner从用户...
weixin_36149065的博客
03-11 907
编写一个Java程序，提示用户输入一个数字，然后告诉用户该数字是否是5的偶倍数。使用Scanner从用户更多相关问题【单选题】10．传人末梢释放在脊髓能介导痛的主要物质If you want to get the job, you must be good ______ children.【单选题】“ Bright Sparks ” is an agency that helps school l...
前端HTML和CSS绘制的可爱冰墩墩和两个爱心
10-08
前端HTML和CSS绘制的 一个可爱冰墩墩和两个爱心 是动图哦 前端HTML和CSS绘制的 一个可爱冰墩墩和两个爱心 是动图哦 前端HTML和CSS绘制的 一个可爱冰墩墩和两个爱心 是动图哦 前端HTML和CSS绘制的 一个可爱冰墩墩...
5000个常用汉字(完整版) 繁体&简体
热门推荐
pandaClose的博客
01-06 6万+
现在网络上的信息真的是参差不齐，连复制5000个常用汉字要不就是需要登陆，要不就是注册什么的，太麻烦了，还不容易找到一个看起来可以直接复制的，又发现有近一半的重复文字，心累，不得已，去google了下5000个常用汉字，真的心累，我们常用的东西要去外网找，不说了，直接把5000个常用放在下面，如果需要，直接复制就是； 的是不我一有大在人了中到資要可以這個你會好為上來就學交也用能如文時沒說他看提那問生過下請天們所多麼小想得之還電出工對都機自後子而訊站去心只家知國台很信成章何同道地發法無然但嗎...
如何用CSS画一个平行四边形？
越陌度阡
11-14 3315
利用CSS 3.0中的 skew特性，第一个参数为x轴倾斜的角度，第二个参数为y轴倾斜的角度。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib.
如何用CSS画一个五角星？
越陌度阡
11-14 3875
对于这个五角星而言，我们可以拆分成三个部分，如下所示： 将五角星分成三部分， 对于最上面的三角，利用边框就可以快速实现，这个不难。但是下面的两个如何实现呢？ 其实也非常的简单，想一想，下面这两个是不是就是一个向上的三角形旋转而来呢？明白了这一点，就可以动手实现了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
如何利用CSS画一个聊天消息对话框？
越陌度阡
11-14 2668
要画一个对话框，首先来学习做一个三角形。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
CSS-Day3
m0_74039531的博客
09-29 352
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS画出三角形的做法
mingangel的博客
10-01 355
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
【CSS】position
小秀的博客
10-02 293
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
深入浅出 CSS 定位：全面解析与实战指南
最新发布
2301_79175212的博客
10-04 823
在当今互联网时代，网页设计不仅需要具备美观的视觉效果，还需确保用户体验的流畅与便捷。而实现这一目标的关键，往往隐藏在细节之中。CSS（层叠样式表）作为前端开发的重要组成部分，其定位（Positioning）机制在布局设计中扮演着至关重要的角色。无论你是初涉前端世界的新手，还是希望提升技能的开发者，掌握 CSS 定位的各种技巧与应用，无疑会为你的网页设计增色不少。本文将以通俗易懂的语言，详细解析 CSS 定位的各类属性，并通过实际案例，助你轻松驾驭这一强大工具。CSS 定位允许你控制 HTML 元素在页面上的
如何使用js和css和html绘制出一个带有动画的冰墩墩
04-01
以下是一个使用HTML、CSS和JavaScript绘制带有动画的冰墩墩的示例： HTML代码： ```html <div class="ice-container"> <div class="ice-block"></div> <div class="ice-block"></div> <div class="ice-block"></div> <div class="ice-block"></div> <div class="ice-block"></div> <div class="ice-block"></div> <div class="ice-block"></div> <div class="ice-block"></div> </div> ``` CSS代码： ```css .ice-container { position: relative; width: 200px; height: 400px; margin: 50px auto; perspective: 1000px; } .ice-block { position: absolute; width: 100px; height: 100px; background-color: #e0ffff; border-radius: 50%; transform-style: preserve-3d; animation: spin 10s linear infinite; } .ice-block:nth-child(1) { top: 0; left: 50px; transform: rotateX(90deg) translateZ(50px); } .ice-block:nth-child(2) { top: 50px; left: 0; transform: rotateY(90deg) translateZ(50px); } .ice-block:nth-child(3) { top: 100px; left: 50px; transform: rotateX(-90deg) translateZ(50px); } .ice-block:nth-child(4) { top: 50px; left: 100px; transform: rotateY(-90deg) translateZ(50px); } .ice-block:nth-child(5) { top: 50px; left: 50px; transform: translateZ(150px); } .ice-block:nth-child(6) { top: 150px; left: 50px; transform: rotateX(-90deg) translateZ(250px); } .ice-block:nth-child(7) { top: 150px; left: 50px; transform: translateZ(350px); } .ice-block:nth-child(8) { top: 250px; left: 50px; transform: rotateX(-90deg) translateZ(450px); } @keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } ``` JavaScript代码： ```javascript // 为冰墩墩添加鼠标悬停事件 document.querySelector('.ice-container').addEventListener('mouseover', function() { // 将所有冰块的背景色变为白色 document.querySelectorAll('.ice-block').forEach(function(block) { block.style.backgroundColor = '#fff'; }); }); // 为冰墩墩添加鼠标离开事件 document.querySelector('.ice-container').addEventListener('mouseout', function() { // 将所有冰块的背景色变回原来的颜色 document.querySelectorAll('.ice-block').forEach(function(block, index) { block.style.backgroundColor = '#e0ffff'; // 为每个冰块设置不同的延迟时间，使它们逐个变回原来的颜色 setTimeout(function() { block.style.transition = 'background-color 0.5s ease'; }, index * 100); }); }); ``` 这段代码定义了一个.container元素，其中包含八个.ice-block元素，每个元素表示冰墩墩的一个面。通过CSS的transform属性和animation属性，可以使这些元素旋转并形成3D效果。同时，JavaScript代码为这个冰墩墩添加了鼠标悬停和离开事件，使其可以响应用户的交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值