前言
该文曾经在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
以上为旧文。