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

avatar 2016年03月15日16:20:08 1 3890 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,与上面对应*/
  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

转载请注明
  • 微信
  • 交流学习,资料分享
  • weinxin
  • 个人淘宝
  • 店铺名:言曌博客咨询部

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

发表评论

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

  

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