css3中新特性的示例分析

这篇文章主要为大家展示了“css3中新特性的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3中新特性的示例分析”这篇文章吧。

十多年的什邡网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整什邡建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“什邡网站设计”,“什邡网站推广”以来,每个客户项目都认真落实执行。

css3被拆分成如下的小模块,选择器,盒模型,背景和边框,文字特效,2D/3D转换,动画,多列布局和用户界面

2D转换

使用transform:属性来为元素设置2D转换,兼容浏览器加前缀 –webkit-  -moz-

使用rotate()方法,让元素旋转一定的角度,参数:角度

例如:transform:rotate(30deg); deg是角度的单位

使用translate()方法,让元素位移,参数:x轴 ,y轴

例如:transform:translate(10px,10px);

使用scale()方法,改变元素的比例大小,参数:x轴比例,y轴比例

例如:transform:scale(2,2);

使用skew()方法,拉伸元素,参数:x轴角度,y轴角度

例如:transform:skew(20deg,20deg);

使用matrix()方法,多变换结合,参数:矩阵,我看不懂

3D转换

使用rotateX()和rotateY()方法,对元素进行旋转,浏览器很多都不支持,参数:角度

过渡效果

使用transition:属性为元素设置过渡动画效果,兼容浏览器加前缀 –webkit-  -moz-,必须是样式在被修改的时候才会生效,因此在:hover的时候修改元素的样式,可以看到效果

使用transition:属性,参数:css样式 持续时间

例如:transition:width 2s;

参数中使用逗号分隔多项改变,transition:样式 时间,样式2 时间2,。。。

动画

创建动画@keyframes规则,@keyframes 规则名称{}

内容里面,使用百分比来划分动画的进度,变化样式

0%{  一些样式  }

25%{  一些样式  }

50%{  一些样式  }

75%{         一些样式         }

100%{  一些样式  }

使用animation:属性设置动画规则,参数:规则名称,执行时间,速度曲线,延迟时间,播放次数,循环播放

例如: animation:bitch 2s ease 0s infinite;

@keyframes bitch{   
    0%{   
        opacity: 0;   
    }   
    50%{   
        opacity: 1;   
    }   
    100%{   
        opacity: 0;   
    }   
}   
#test{   
    width: 100px;   
    height: 100px;   
    background: red;   
    animation:bitch 2s ease 0s infinite;   
}

以上是“css3中新特性的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页名称:css3中新特性的示例分析
标题来源:http://scyanting.com/article/piegco.html