html+css写冰墩墩【旧文迁移】

前言

该文曾经在csdn上发表过，但由于一些原因审核未通过。
现在迁移至此。

前端写冰墩墩并实现简单动效

时间：2022-2-15 11:39:23

1.html

html简单实现框架，第一版时参照网上冰墩墩仿写。第二版自己绘图设计，分框架实现灯笼与云层。

2.css

主要在于css的编写，现在相比从前确实要顺手的多得多得多了。特别是在通读了一边html与css网页设计（并授课），对于h5和css的理解更加加深了。
从前只是知道怎么用怎么实现，现在也能知道为什么了。（虽然有的还是不清楚）

重点在与简单动效的实现，要灵活运用transform属性和animation属性。
包括过渡的transition，都是动画常用属性，要熟练。

3.迭代过程

初衷是只用一个html实现冰墩墩编写，方便又简介~
（就是懒，不想打包罢了，嫌麻烦，别人还要全下载才打得开）

第一版简单实现冰墩墩，只用到了过渡效果，使得鼠标浮于冰墩墩时，会有动效，会摆手，有文字出现。

第二版应“甲方”需求，添加小动画、小场景、文创文字、元宵节元素、以及指出书院出品。
这时才真正独立完成一个网页动态海报的编写，实现小动画。

第一版：

（由于之前图片版权问题违规了，审核未通过，所以去掉了logo，就请当他是一个普通的小熊猫叭大大们！！）
（单纯是为了技术分享及记录所以发表该文章（抱拳））

第二版：

※注：灯笼及云层有摆动动画，文字气泡为悬浮效果。

4.部分代码

1.动画实现

/* move start */

        .deng1,.deng2,.deng3,.deng4,.deng5,.deng6{
            -webkit-animation: sway 4s ease-in-out alternate infinite;
            animation: sway 4s ease-in-out alternate infinite;
        }

        @keyframes sway{
            0%{
                transform: rotate(-10deg);
                transform-origin: center top;
            }
            100%{
                transform: rotate(10deg);
                transform-origin: center top;
            }
        }
        @-webkit-keyframes sway{
            0%{
                -webkit-transform: rotate(-10deg);
                transform: rotate(-10deg);
                transform-origin: center top;
            }
            100%{
                -webkit-transform: rotate(10deg);
                transform: rotate(10deg);
                transform-origin: center top;
            }
        }

        .arm2{
            -webkit-animation: sayHi 1.5s ease-in-out alternate infinite;
            animation: sayHi 1.5s ease-in-out alternate infinite;
        }

        @keyframes sayHi{
            0%{
                -webkit-transform: rotate(37deg);
                transform: rotate(37deg);
                transform-origin: center bottom;
            }
            100%{
                -webkit-transform: rotate(65deg);
                transform: rotate(65deg);
                transform-origin: center bottom;
            }
        }

        .yun{
            animation: wave 2s ease-in-out alternate infinite;
        }

        @keyframes wave{
            0%{
                transform: translateY(-2px);
            }
            100%{
                transform: translateY(10px);
            }
        }

        /* move end */

2.过渡实现

.talk{
            width: 120px;
            height: 60px;
            padding-top: 5px;
            background-color: #fff;
            text-align: center;
            border-radius: 50%;
            border: 5px solid #202020;
            position: absolute;
            top: 60px;
            right: 80px;
            z-index: 1;
            transition: all 0.8s ease-in 0s;
}
.bdd:hover .talk{
            right: -180px;
 }

---

原文地址：https://www.yunliyunwai.cn/blog/detail/d9258a72659fe203056562d401bc36cf

---

以上为旧文。