CSS3变形的相关内容

2018-12-22 本文已影响0人晨曦诗雨

旋转 rotate()

旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转
扭曲 skew()
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<style>
    .wrapper div span{
        transform:skew(-45deg);
    }
</style>
<body>
<div class="wrapper">
  <div><span>我不想被扭曲(^_^)</span></div>
</div>
</body>
</html>

image.png

缩放 scale()

缩放 scale()函数让元素根据中心原点对对象进行缩放

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<style>
    .wrapper div:hover{
        transform:scale(0.8);
    }
</style>
<body>
<div class="wrapper">
  <div>我将缩小0.8</div>
</div>

</body>
</html>

位移 translate()

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

矩阵 matrix()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<style>
    .wrapper div{
        transform:matrix(1,0,0,1,50,50);
    }
</style>
<body>
<div class="wrapper">
  <div></div>
</div>
</body>
</html>

image.png

原点 transform-origin

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<style>
    .wrapper div{
       transform-origin:right top;
    }
</style>
<body>
<div class="wrapper">
  <div>我修改原点之后在进行15度的扭曲</div>
</div>
</body>
</html>

image.png

过渡属性 transition-property

早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。

在CSS中创建简单的过渡效果可以从以下几个步骤来实现：
第一，在默认样式中声明元素的初始状态样式；
第二，声明过渡元素最终状态样式，比如悬浮状态；
第三，在默认样式中通过添加过渡函数，添加一些不同的样式.

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间

先来看transition-property属性

transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：

image

transition-timing-function

ransition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：

image

Keyframes介绍

Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}

在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to。

浏览器的支持情况：

image Chrome 和 Safari 需要前缀 -webkit-；Foxfire 需要前缀 -moz-。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<style>
div {
  width: 300px;
  height: 200px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
    @keyframes changercolor{
        0%{
            background：red
            
        }
        20%{
            background:blue;
        }
        40%{
            background:orange;
        }
        80%{
            background:red;
        }
        
    }
    div:hover{
            animation:changercolor 5s ease .1s
        }
</style>
<body>
<div>鼠标放在我身上</div>

</body>
</html>

CSS3中调用动画

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div><span></span></div>

</body>
</html>


@keyframes around{
  0% {
    transform: translateX(0);
  }
  25%{
    transform: translateX(180px);
  }
  50%{
     transform: translate(180px, 180px); 
  }
  75%{
    transform:translate(0,180px);
  }
  100%{
    transform: translateY(0);
  }
}
div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 100%;
  animation-name:around;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count:infinite;
}

CSS3中设置动画播放时间

 animation-duration: 5s;

设置动画播放的方式

animation-timing-function:ease;

开始播放的时间

  animation-delay:3s;

播放动画的次数

animation-iteration-count属性主要用来定义动画的播放次数。
语法规则：
animation-iteration-count: infinite | <number> [, infinite | <number>]*
1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。
2、如果取值为infinite，动画将会无限次的播放。
举例：
通过animation-iteration-count属性让动画move只播放5次，代码设置为：

animation-iteration-count:5;

注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

设置动画播放方向

animation-direction属性主要用来设置动画播放方向，其语法规则如下：
animation-direction:normal | alternate [, normal | alternate]*
其主要有两个值：normal、alternate
1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。
例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为：

animation-direction:alternate;

注意：Chrome或Safari浏览器，需要加入-webkit-前缀！

CSS3中设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态。
参数：
其主要有两个值：running和paused。
其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。
例如，页面加载时，动画不播放。代码如下：

animation-play-state:paused;

CSS3中设置动画时间外属性

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个
属性值
none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
forwards:表示动画在结束后继续应用最后的关键帧的位置
backwards:会在向元素应用动画样式时迅速应用动画的初始帧
both:元素动画同时具有forwards和backwards效果
在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。
例如：让动画停在最一帧处。代码如下：

animation-fill-mode:forwards;

CSS3变形的相关内容

旋转 rotate()

缩放 scale()

位移 translate()

矩阵 matrix()

原点 transform-origin

过渡属性 transition-property

transition-timing-function

Keyframes介绍

CSS3中调用动画

CSS3中设置动画播放时间

设置动画播放的方式

开始播放的时间

播放动画的次数

设置动画播放方向

CSS3中设置动画的播放状态

CSS3中设置动画时间外属性

猜你喜欢

热点阅读