登录  /  注册
CSS3之动画相关_html/css_WEB-ITnose
php中文网
发布: 2016-06-24 11:51:20
原创
800人浏览过

CSS3动画相关的属性:transform,transition,animation.

变形Transform

语法:

transform: rotate | scale | skew | translate |matrix;

rotate:旋转,通过指定一个角度对原元素进行2D旋转,正值表示顺时针旋转,负值表示逆时针。默认原点是其中心位置,可以设置transform-origin.

scale:缩放,通过指定X和Y方向上的缩放倍数对原元素进行2D缩放。

skew:扭曲,通过指定X和Y方向上的斜切角度,对原元素进行斜切变换。

translate:移动,通过指定X和Y方向的移动长度对元素进行移动,正值是向右下移动的。

matrix:矩阵变换

例子:

        CSS3    
Rotate
Scale
Skew
Translate
登录后复制

图:

过渡Transition

transition主要包含四个属性值:执行过渡的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。

例子:

        CSS3    
Transition
登录后复制

图1

图2(鼠标放上去)

动画Animation

animation类似transition,不同的是transition需要触发事件才可以改变CSS属性,animaition不需要触发,就可以随时间变化改变CSS属性。

相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学