欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS中transform\transition\animation

程序员文章站 2024-03-24 23:18:40
...

参考:http://www.cnblogs.com/aimyfly/p/3195898.html

1. transform

transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形
常用属性:

  • translateX/Y/Z 控制元素在页面上的三轴的位置
  • rotate(angel) 控制元素旋转角度
  • scaleX/Y/Z()控制元素放大缩小效果
  • skew(angel)控制元素倾斜角度

2.transition

transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。
transition需要触发一个事件才会随着时间改变其CSS属性 可用:hover

语法 transition: property duration timing-function delay;

  • transtion-property 规定设置过渡效果的 CSS 属性的名称。
  • transition-duration 规定完成过渡效果需要多少秒或毫秒
  • transition-timing-function 规定速度效果的速度曲线 ease/ease-in/ease-out/ease-in-out-linear
  • transtion-delay 规定过渡效果何时开始

例子

      .app{
        width: 200px;
        height: 200px;
        background: red;
      }
      .app:hover{
        width: 300px;
        height: 400px;
        transition: all 0.6 ease;
      }

3.animation

语法：animation : name duration timing-function delay iteration-count direction;

  • animation-name 规定需要绑定到选择器的 keyframe 名称
  • animation-duration 规定完成动画所花费的时间，以秒或毫秒计
  • animation-timing-function 规定动画的速度曲线
  • animation-delay 规定在动画开始之前的延迟
  • animation-iteration-count 规定动画应该播放的次数
  • animation-direction 规定是否应该轮流反向播放动画
    例子
     .test1{
        width: 200px;
        height: 200px;
        background: red;
        animation: myfirst 0.5s ease;
      }
      @keyframes myfirst{
        from {background: red;}
        to {background: yellow;}
      }

这里写一下浏览器兼容8

  • @-moz-keyframes firefox
  • @-webkit-keyframes Safari和Chrome
  • @-o-keyframes Opera
  1. 火狐浏览器Mozilla Firefox 内核是Gecko
  2. 谷歌浏览器： Google Chrome一开始用的是苹果的webkit内核，后来用的是自己开创的blink内核
  3. Opera：内核 blink
  4. Safari：内核是自己的webkit
  5. IE浏览器 是微软出品的浏览器 Trident内核

关于运用动画的一个小例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <style>
    *{
      margin: 0px;
      padding: 0px;
      list-style: none;
    }
    body{
      background-color: pink;
    }
    .taiji{
      height: 200px;
      width: 0;
      border-radius: 100px;
      border-left: 100px solid #000000;
      border-right: 100px solid #ffffff;
      animation: rotation 2.5s linear infinite;
    }
    .taiji::before{
      content: "";
      width: 100px;
      height: 100px;
      border-radius: 50px;
      position: absolute;
      left: -50px;
      box-shadow: 0 100px #000;
      background-color: #ffffff;
    }
    .taiji::after{
      content: "";
      width: 20px;
      height: 20px;
      border-radius: 10px;
      background-color: #000000;
      box-shadow: 0 100px #fff;
      position: absolute;
      top: 40px;
      left: -10px;
    }
    @keyframes rotation{
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>
<body>
  <div class="taiji">
  </div>
</body>
</html>

上一篇： Android获取蓝牙设备类型

下一篇： Android 使用经典蓝牙

推荐阅读