CSS设计风格兼容性设置问题总结

无需加好友免费技术支持

图片加载中...

自然，假如语言表达没有限制，有许多方式能够实现，简易javaScript语言非常容易完成，自然，应用架构会更方便。如今我们要用一些更简单的东西CSS语言表达完成。

原材料：云

image：云层1.png 云层2.png 云层3.png 换句话说，必须多张不同类型的云图片。

云层1.png

云层2.png

云层3.png

云层好像啥都没有，可以做出如此美妙的变化图，也是一门绝美的造型艺术。

看看下面的云

2、文档编辑手机软件：Sublime Text3

Sublime Text3 前面常见的开发环境之一是十分强大且便于所使用的。也可以试试。

页面

快捷方式图标

3、HTML一部分： 置放云图片

三张图片的规划关键完成，因而应用三张图片div标签就可以。

4、CSS一部分：

动画是把原素从一种设计风格慢慢转变成另一种的风格实际效果。可以选择一切的风格一切频次。用百分数来要求转变的时间也，或是用关键字 "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设计风格兼容性设置问题总结

标识由三部分组成：

1、关键帧(keyframes) - 在各个阶段界定动画状态。

2、动画属性(properties) - 确定动画的播放时长、播放频率和采用什么函 数式播放动画等。

3、css属性 - 就是css关键帧中的情况要素不一样。

Animation

@Keyframes属性

animation-timing-function

-webkit-animation: sky_background 50s ease-out infinite;/*动画全过程 时长 以慢速度完毕 不断循环*/

-webkit-transform: translate3d(0, 0, 0); /*适配Safari、Chrome将浏览器兼容性界定为3d变换*/

div盒子的五大关键属性：height、width、padding、margin、border。

div小盒子常见局属性：position: ; 、overflow: ; 等

.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);

}

留意：

1、width：300% ； 保证播放时能充足联接。

2、position：absolute; 相对定位。

.sky .clouds_one {

background: url("");

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);

}

留意：

1、width：300% ； 保证播放时能充足联接。

2、position：absolute; 相对定位。

.sky .clouds_two {

background: url("");

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);

}

留意：

1、width：300% ； 保证播放时能充足联接。

2、position：absolute; 相对定位。

.sky .clouds_three {

background: url("");

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);

}

逐渐-正中间-完毕按键 转化成 0%-50%-100%，我们可以称作时间轴。在各个阶段设定不同类型的背景颜色是全过程 展现渐变色动画情况。

留意：@ ：千万别丢掉

@-webkit-keyframes sky_background { ///能够按照这个模版列举其他几个适配核心

0% { //-o- 、-ms-、-moz- 与自身适配

background: #007fd5; // 起点

color: #007fd5 ; //起点

}

50% {

background: #000; //大转折

color: #a3d9ff ; //大转折

}

100% {

background: #007fd5; //起点

color: #007fd5; //起点

}

}

云设定只有设定开始与结束位置

@-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协同应用。

点一下扩展链接查看源码。

文中一些内容参照互联网，如有误，感激强调，如有侵权，可联系改动。