网赚妈妈

 找回密码
 立即注册
搜索
查看: 1078|回复: 2

[新手网赚] 纯CSS风云变幻动画图

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-10-19 20:06:17 | 显示全部楼层 |阅读模式
    PKY7LNIx8unKKxEl.jpg


    怎么样制作这么一个简单的(CSS3动画)静态网页动态图呢?

    当然如果不限制使用的语言,那实现的方法有很多啦,简单的javaScript语言就可以很容易实现,当然使用框架的话就会更加简单啦。现在让我们用一些更简单单纯的CSS语言来实现。

    m1Xw0s0tgoo6tvn0.jpg

    实现这样的(CSS3动画)静态网页动态图,需要用到哪些东西呢?

    1、素材:云层

    image:云层1.png 云层2.png 云层3.png 也就是需要几张不同的云层图片。

    ZQcw8wW3lF8B6x4h.jpg

    云层1.png

    aw3WzTMs09mWWb9t.jpg

    云层2.png

    fYlnJ4E1X1LSzcLD.jpg

    云层3.png

    这看似什么也没有的云层,能作出这样美丽的变化图,也是一种美的艺术。

    Bwy8W7d7OV0UW0EW.jpg

    细看之下的云层

    2、文档编辑软件:Sublime Text3

    Sublime Text3 是一款非常强大的,且非常好用前端常用开发工具之一。大家可以尝试一下。

    oICo8d4aOtRbddiD.jpg

    界面

    WsyZk26SC4y5cpp0.jpg

    快捷方式

    3、HTML部分: 放置云层图片

    主要实现三张图片的布局,所以用三个div标签即可。

    <div class="sky">	<div class="clouds_one"></div>	<div class="clouds_two"></div>	<div class="clouds_three"></div></div>

    4、CSS部分:

    CSS3动画是什么?

    动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。而且为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

    该云彩变换过程:

    通过在设定的开始时间和结束时间之间的特定时间段,设置背景的随时间的样式变换来实现。

    解决兼容性问题部分:

    第一部分:CSS常见兼容性问题解决

    html,body{margin:0;padding:0;height:100%;}

    第二部分:CSS中动画标签animation 属性兼容性问题解决:

    -webkit-animation:; //代表Safari、Chrome等浏览器的私有属性 -moz-animation: ; //代表火狐firefox浏览器私有属性 -o-animation: ; //代表欧朋Opera浏览器私有属性-ms-animation:; //代表IE浏览器的私有属性 animation: ;//自身兼容IE10、Firefox 以及 Opera 等浏览器。

    还有其他CSS兼容性问题可参考:CSS样式浏览器兼容性问题归纳

    CSS3动画animation标签

    该标签由三部分组成:

    1、关键帧(keyframes) - 定义动画在不同阶段的状态。

    2、动画属性(properties) - 决定动画的播放时长,播放次数,以及用何种函 数式去播放动画等。(可以类比音视频播放器)

    3、css属性 - 就是css元素不同关键帧下的状态。

    lEDj7JrP3j53I3wR.jpg

    Animation

    VkMZKBw106k1iMWB.jpg

    @Keyframes属性

    TrCmR7fGR7DafkD1.jpg

    animation-timing-function

     -webkit-animation: sky_background 50s ease-out infinite;/*动画过程 时间 以慢速结束 无限循环*/ -webkit-transform: translate3d(0, 0, 0); /*兼容Safari、Chrome等浏览器内核,将其定义为3d转换*/
    DIJIKS93I73QqF33.jpg

    div盒子模型及布局方式:

    div盒子的五大主要属性:height、width、padding、margin、border。

    div盒子常用布局属性:position: ; 、overflow: ; 等

    大div容器.sky的样式如下:

    .sky { height: 100%; background: #007fd5; position: relative; /*相对定位*/ overflow: hidden; /*超出隐藏*/ -webkit-animation: sky_background 50s ease-out infinite;/*动画播放过程:50s(播放时长)以慢速结束(ease-out) 无限循环(infinite)*/ -moz-animation: sky_background 50s ease-out infinite;  -o-animation: sky_background 50s ease-out infinite; animation: sky_background 50s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); //-webkit- Safari、Chrome等 -ms-transform: translate3d(0, 0, 0); //-ms- 代表IE浏览器的私有属性 -o-transform: translate3d(0, 0, 0);//-o- 代表欧朋Opera浏览器私有属性 transform: translate3d(0, 0, 0);}

    云层1div块的设置如下:

    注意:

    1、width:300% ; 是为了在播放之时保证能够充分的衔接。

    2、position:absolute; 绝对定位。

    .sky .clouds_one { background: url("../images/cloud_one.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%;// -webkit-animation: cloud_one 50s linear infinite; //linear:匀速 -moz-animation: cloud_one 50s linear infinite; -o-animation: cloud_one 50s linear infinite; animation: cloud_one 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

    云层2div块的设置如下:

    注意:

    1、width:300% ; 是为了在播放之时保证能够充分的衔接。

    2、position:absolute; 绝对定位。

    .sky .clouds_two { background: url("../images/cloud_two.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_two 75s linear infinite; -moz-animation: cloud_two 75s linear infinite; -o-animation: cloud_two 75s linear infinite; animation: cloud_two 75s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

    云层3div块的设置如下:

    注意:

    1、width:300% ; 是为了在播放之时保证能够充分的衔接。

    2、position:absolute; 绝对定位。

    .sky .clouds_three { background: url("../images/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_three 100s linear infinite; -moz-animation: cloud_three 100s linear infinite; -o-animation: cloud_three 100s linear infinite; animation: cloud_three 100s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}

    设置动画的关键帧@KeyFrames:

    开始-中间-结束按钮 转化为 0%--50%--100%,我们又可叫做进度条。在不同阶段设置不同的背景色,是整个过程 呈现渐变动画状态。

    注意:@ :千万不能丢掉

    大的div(.sky)关键帧设置:

    @-webkit-keyframes sky_background { //可以把其他几个兼容内核按照这个模板罗列 0% { //-o- 、-ms-、-moz- 和自身兼容	background: #007fd5; // 起点	color: #007fd5 ; //起点 } 50% {	background: #000; //转折点	color: #a3d9ff ; //转折点 } 100% {	background: #007fd5; //起点	color: #007fd5; //起点 }}

    云层div块的关键帧设置:

    云层设置只用设置开始和结束的位置即可

    @-webkit-keyframes cloud_one { //同上 0% {	left: 0 } 100% {	left: -200% //保证完美衔接 }}@-webkit-keyframes cloud_two { 0% {	left: 0 } 100% {	left: -200% }}@-webkit-keyframes cloud_three { 0% {	left: 0 } 100% {	left: -200% }}

    经过这些简单的设置,一个云彩变换的动画就可以展示出来了。 总结一下用到的动画关键属性:

    animation:

    animation: name duration timing-function delay iteration-count direction;

    transform:

    transform: none|transform-functions;

    keyframes:

    @keyframes animationname {keyframes-selector {css-styles;}/*0%{} 50%{} 100%{}*/}

    position:

    position:absolute /relative;

    注意: 一般动画animation 和 @KeyFrames是联合使用的。

    点击扩展链接可查看源码。

    本文部分内容参考网络,如有错误,感谢指出,如有侵权,请联系修改。

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-19 20:07:15 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-19 21:06:52 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-17 21:11 , Processed in 0.183961 second(s), 14 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表