你的位置:首页 > 软件开发 > 网页设计 > CSS3的变形transform、过渡transition、动画animation学习

CSS3的变形transform、过渡transition、动画animation学习

发布时间:2016-09-19 18:00:04
学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-、-moz-、-ms-、-o-),本文为简化内容,直接使用了原版属性根据不同属性的支持度,在实际使 ...

CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform、过渡transition的知识

这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-、-moz-、-ms-、-o-),本文为简化内容,直接使用了原版属性

根据不同属性的支持度,在实际使用的时候需要添加相应的浏览器前缀支持

目录:

  1. 变形transform
  2. 过渡transition
  3. 动画animation

 

一、变形transform

变形有rotate旋转、scale缩放、translate位移、skew倾斜、matrix矩阵变形、perspective透视几种操作,通过例子来了解各个操作

1. 初始页面结构

  <style type="text/css">    html {      font-family: Arial;    }    .box {      position: relative;      margin: 200px auto;      width: 100px;      height: 20px;      text-align: center;      border: 1px solid #ddd;      background-color: #75e275;      cursor: pointer;    }    .left,    .right {      position: absolute;      top: -10px;      width: 10px;      height: 40px;      background-color: #4d8aeb;    }    .left {      left: 0;    }    .right {      right: 0;    }    .box:hover {      transform: rotate(-30deg);    }  </style>  

原标题:CSS3的变形transform、过渡transition、动画animation学习

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。