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

avatar 2016年03月15日16:20:08 1 3808 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
初学者整理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，与上面对应*/
  18. }
  19.     </style>
  20. </head>
  21. <body>
  22.     <center>
  23.         <div class="abc"></div>
  24.     </center>
  25. </body>
  26. </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);
  15.     transform: translate3d(50px,6,5);
  16.     transform: rotate3d(111,12,13,36000deg);
  17.     transform: scale3d(1,1.2,15);
  19. }

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



本文地址：http://liuyanzhao.com/3421.html

转载请注明
历史上的今天
三月
15日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0