CSS3之动画相关_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS3之动画相关_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:51 AM

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:矩阵变换

例子：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>CSS3</title>    <style  type="text/css">        div{            width:100px;            height:100px;            background:#3385ff;             margin: 60px;        }        #rotate{             transform:rotate(30deg);        }        #scale{            transform:scale(2,1.5);        }        #skew{            transform:skew(30deg,10deg);        }        #translate{            transform:translate(50%,80%);        }    </style></head><body>    <div id="rotate">Rotate</div>    <div id="scale">Scale</div>    <div id="skew">Skew</div>    <div id="translate">Translate</div></body></html>

登录后复制

图：

过渡Transition

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

例子：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>CSS3</title>    <style  type="text/css">        div{            width:100px;            height:100px;            background:#3385ff;             margin: 60px;        }        #transition{             transition:width 2s,height 2s;        }          div:hover{            width:200px;            height:200px;            transform:rotate(180deg);        }</style></head><body>    <div id="transition">Transition</div></body></html>

登录后复制

图1

图2（鼠标放上去）

动画Animation

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7346

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1265

PHP教程

1214

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，