【html5和css3】transition属性整理

来源：互联网发布：速读训练软件app 编辑：程序博客网时间：2024/06/07 09:47

初学者整理transition属性，以为笔记，防止遗忘

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <link rel="stylesheet" href="a.css" type="text/css">    <title>transition</title>    <style>        .abc{width:520px;            height:520px;            background: #22e340;            margin-top:70px;            border-radius:50%;            transition: transform 5s ease 2s; /*这里可以填四个值，标志为①②③④*/ }        .abc:hover{ background-color: red;                    transform: skew(400deg,400deg);  /*这里写的是transform，与上面对应*/}    </style></head><body>    <center>        <div class="abc"></div>    </center></body></html>这里写代码片

①可以填以下值：
这里写图片描述

也许这些还不全，例如还有 box-shadow（边框阴影），transform（旋转角度）等等

②表示进行的时间：
例如 5s 20s

③表示进行的速度变化，可以有以下值：
这里写图片描述

④表示将何时进行
例如，3s表示3s后才开始变化

这里再补充一下transform（用来旋转角度的）
当①为transform时

.abc:hover{transform:Ⅰ}

这里的Ⅰ可以为：
这里写图片描述

.abc{    background-color:#333;    width: 400px;    height: 400px;    border-radius: 50%;    transition: transform 2s ease-in-out;}.abc:hover{     transform: translate(50px,60px);      transform: rotate(30deg);     transform: scale(0.5,0.5);     transform: skew(360deg,360deg);     transform:matrix(1.66,0.5,-0.5,0.866,12,0);    transform: translate3d(50px,6,5);    transform: rotate3d(111,12,13,36000deg);    transform: scale3d(1,1.2,15);}

其中rotate，skew可以用来制作几何图形

参考资料
http://www.ziqiangxuetang.com/cssref/css3-pr-transition.html

0 0