【html和css进阶】transition属性整理

初学者整理transition属性,以为笔记,防止遗忘
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="a.css" type="text/css">
  6.     <title>transition</title>
  7.     <style>
  8.         .abc{width:520px;
  9.             height:520px;
  10.             background: #22e340;
  11.             margin-top:70px;
  12.             border-radius:50%;
  13.             transition: transform 5s ease 2s; /*这里可以填四个值,标志为①②③④*/
  14. }
  15.         .abc:hover{ background-color: red;
  16.                     transform: skew(400deg,400deg);  /*这里写的是transform,与上面对应*/
  17. }
  18.     </style>
  19. </head>
  20. <body>
  21.     <center>
  22.         <div class="abc"></div>
  23.     </center>
  24. </body>
  25. </html>
①可以填以下值: 这里写图片描述 这里写图片描述 也许这些还不全,例如还有 box-shadow(边框阴影),transform(旋转角度)等等 ②表示进行的时间: 例如 5s 20s ③表示进行的速度变化,可以有以下值: 这里写图片描述 ④表示将何时进行 例如,3s表示3s后才开始变化   这里再补充一下transform(用来旋转角度的) 当①为transform时 .abc:hover{transform:Ⅰ} 这里的Ⅰ可以为: 这里写图片描述
  1. .abc{
  2.     background-color:#333;
  3.     width: 400px;
  4.     height: 400px;
  5.     border-radius: 50%;
  6.     transition: transform 2s ease-in-out;
  7. }
  8. .abc:hover{
  9.      transform: translate(50px,60px);
  10.      transform: rotate(30deg);
  11.     transform: scale(0.5,0.5);
  12.      transform: skew(360deg,360deg);
  13.     transform:matrix(1.66,0.5,-0.5,0.866,12,0);
  14.     transform: translate3d(50px,6,5);
  15.     transform: rotate3d(111,12,13,36000deg);
  16.     transform: scale3d(1,1.2,15);
  17. }
其中rotate,skew可以用来制作几何图形   本文地址:http://liuyanzhao.com/3421.html 转载请注明

发表评论

目前评论:1