1.我感觉这是我听过最好的前端课了,真是爱上了这个老师。
2.不BB了,下边我要用css来实现动画,敲了俩遍代码算是搞得清楚了,有注释,大家有不懂得地儿可以评论。
3.先给大家看一下效果图(PS:其实是动图的)
4.首先,看一下项目的结构:
5.用到的一些图片如下:
6.html代码如下:
!DOCTYPEhtmlhtmlheadmetacharset"UTF-8"metaname"viewport"content"widthdevice-width,initial-scale1.0"metahttp-equiv"X-UA-Compatible"content"ieedge"title梦幻西游/titlestylehtml,body,.container{height:100%;overflow:hidden;/*溢出了影藏*/}*{margin:0;padding:0;}.container{background:url('image/pic.png')no-repeat;/*背景图不重复*/background-size:cover;/*图片以最合适的尺寸铺满屏幕*/}.content{display:flex;/*变为块级元素才可设置宽和高*/margin:200pxauto0;/*上左右下auto代表水平方向居中*/width:780px;}.contentdiv{height:180px;width:200px;}.monkey{background:url('image/1.png');/*每一个图片得重复,因为要形成动图,背景图在走动,所以需要重复*/background-position:00;/*起始位置是(0,0)*/animation:monkeyMove1ssteps(8)infiniteboth;/*播放动画各参数代表含义是:动画名,动画时间,分8步把整个动画播放完,无限次数播放,播放完停留在最后一帧并且有延迟的话处在第一帧*/}/*制作动画移动轨迹monkeyMove是动画名*/@keyframesmonkeyMove{0%{background-position:00;}100%{/*移动了整个图片的宽度,保证第一帧和最后出现的画面是一样的*/background-position:-1600px0;}}.pig{background:url('image/2.png');/*每一个图片得重复,因为要形成动图,背景图在走动,所以需要重复*/background-position:00;/*起始位置是(0,0)*/animation:pigMove1ssteps(8)infiniteboth;/*播放动画各参数代表含义是:动画名,动画时间,分8步把整个动画播放完,无限次数播放,播放完停留在最后一帧并且有延迟的话处在第一帧*/}/*制作动画移动轨迹monkeyMove是动画名*/@keyframespigMove{0%{background-position:00;}100%{/*移动了整个图片的宽度,保证第一帧和最后出现的画面是一样的*/background-position:-1600px0;}}/*div.person(没有空格):代表当前div样式名为person的元素div.person(有空格):代表div的后代样式名为person的元素*/.contentdiv.person{width:170px;height:240px;;}.person{background:url(image/3.png);background-position:00;animation:personMove1ssteps(8)infiniteboth;/*为保证他们在同一水平线上,你可以把下边的样式去掉看一下其区别*/transform:translateY(-30px);}@keyframespersonMove{0%{background-position:00;}100%{background-position:-1360px0;}}.contentdiv.shasen{height:200px;width:210px;}.shasen{background:url('image/4.png');background-position:00;animation:shasenMove1ssteps(8)infiniteboth;}@keyframesshasenMove{0%{background-position:00;}100%{background-position:-1680px0;}}/style/headbodydivclass"container"divclass"content"divclass"monkey"/divdivclass"pig"/divdivclass"person"/divdivclass"shasen"/div/div/div/body/html7.怎么样,小伙伴们,动手试一试吧!
用CSS写动画西游记案例-西游记原著在线听免费-喜马拉雅小程序
浏览量:1687
时间:
来源:meetbetterhc
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

最新资讯
-
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
抖音再现本地生活服务,咫尺同城圈商业变现新通道
短视频成为本地生活探店网红营销变现引流的新阵地,每一位网红都渴望在短视频内“一夜爆红”。即速应用团队对多商家小程序进行升级,打造了咫尺同城圈:“同城探店营销助手”,不仅完善商家营销技巧,还助力探店网红玩转本地生活服务。 -
阿坝小程序代理
阿坝藏族羌族小程序代理公司有哪些?阿坝藏族羌族小程序代理平台哪个好?阿坝藏族羌族小程序代理商怎么收费,代理政策如何?下面就让即速应用产品经理jisuapp.cn来告诉你吧!