admin管理员组

文章数量:1530516

文章目录

  • 1. CSS3 perspective 属性
    • 1.1 属性定义及使用说明
    • 1.2 语法
  • 2. perspective-origin 属性
    • 2.1 属性定义及使用说明
    • 2.2 语法
  • 3.animation （动画） 属性
    • 3.1语法
  • 4. animation-name 属性
    • 4.1 标签定义及使用说明:
    • 4.2 语法
  • 5. animation-duration 属性
    • 5.1 标签定义及使用说明
    • 5.2 语法
  • 6.animation-timing-function 属性（重点）
    • 6.1 实例
    • 6.2 标签定义及使用说明
    • 6.3 语法
  • 7. animation-delay 属性
    • 7.1 实例：
    • 7.2 标签定义及使用说明
    • 7.3 语法
  • 8. animation-iteration-count 属性
    • 8.1 标签定义及使用说明
  • 9. animation-direction 属性
    • 9.1 定义和用法
    • 9.2 CSS 语法
  • 10. animation-fill-mode 属性
    • 10.1 实例
    • 10.2 定义和用法
    • 语法
  • 11. animation-play-state 属性
    • 11.1 实例
    • 11.2 标签定义及使用说明
    • 11.3 语法

1. CSS3 perspective 属性

设置从何处查看一个元素的角度：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title> 
<style>
#div1
{
	position: relative;
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150px;
	

#div2
{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transform: rotateX(45deg);
	
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>

1.1 属性定义及使用说明

多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。

定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。

注意：perspective 属性只影响 3D 转换元素。
提示: 请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。

1.2 语法

2. perspective-origin 属性

设置一个3D元素的基数位置：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title>
<style>
#div1
{
	position: relative;
	height: 150px;
	width: 150px;
	margin: 50px;
	padding:10px;
	border: 1px solid black;
	perspective:150;
	perspective-origin: 10% 10%;
	-webkit-perspective:150; /* Safari and Chrome */
	-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}

#div2
{
	padding:50px;
	position: absolute;
	border: 1px solid black;
	background-color: red;
	transform: rotateX(45deg);
	-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}

</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>

2.1 属性定义及使用说明

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

2.2 语法

perspective-origin: x-axis y-axis;

3.animation （动画） 属性

3.1语法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

4. animation-name 属性

为 @keyframes 动画指定一个名称：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title>
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:mymove;
	animation-duration:5s;

	
}

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>

<div></div>

<p><b>注释：</b>始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</p>

</body>
</html>

4.1 标签定义及使用说明:

animation-name 属性为 @keyframes 动画指定名称。

4.2 语法

animation-name: keyframename|none;
值说明
keyframename指定要绑定到选择器的关键帧的名称
none指定有没有动画（可用于覆盖从级联的动画）

5. animation-duration 属性

设置动画在两秒内完成:

<html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove infinite;
	animation-duration:2s;

	
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}


</style>
</head>
<body>

<p><strong>注意:</strong>  animation-duration属性不兼容 Internet Explorer 9 以及更早版本的浏览器.</p>

<div></div>

<p><b>注意:</b> 要指定动画属性。否则时间若是0,动画不会进行。</p>

</body>
</html>

5.1 标签定义及使用说明

animation-duration属性定义动画完成一个周期需要多少秒或毫秒。

5.2 语法

animation-duration: time;

6.animation-timing-function 属性（重点）

6.1 实例

从开始到结束以相同的速度播放动画:

6.2 标签定义及使用说明

  • animation-timing-function指定动画将如何完成一个周期。

  • 速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。

  • 速度曲线用于使变化更为平滑。

6.3 语法

animation-timing-function: value;

animation-timing-function使用的数学函数，称为三次贝塞尔曲线，速度曲线。使用此函数，您可以使用您自己的值，或使用预先定义的值之一：

值描述
linear动画从头到尾的速度是相同的。
ease默认。动画以低速开始，然后加快，在结束前变慢。
ease-in动画以低速开始。
ease-out动画以低速结束。
ease-in-out动画以低速开始和结束。


animation-timing-function 除了上面的几种常用方式之外，还有个一实用的函数，

steps(number_of_steps, direction)

这个函数叫做阶梯函数，这个函数能够起到定格动画的效果。

阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡。

他有两个参数：

  • number_of_steps ：阶梯数（必须是一个正整数），他将动画的总时长按照阶梯数等距划分
  • direction ：可选值为start或end，默认end，也可以不写；
  • start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script>
   #pic {
  height:90px;
  width:65;
  background-position: -40px -44px;
  background-image: url("https://static.runoob/images/mix/space-to-top.png");
  animation: .6s go steps(7) infinite;
}

 @keyframes go  {
   0% {
      background-position-x: -40px;
   }
   100% {
      background-position-x: -1040px;
   }
}
   
   </script>
    
</head>
<body>
  <div id="pic"></div>

   
</body>
</html>

运行结果：

7. animation-delay 属性

7.1 实例：

等待两秒，然后开始动画：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	animation-delay:2s;
}

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}


</style>
</head>
<body>

<p><strong>注意:</strong> animation-delay 属性不兼容Internet Explorer 9 以及更早版本的浏览器</p>

<div></div>

</body>
</html>

7.2 标签定义及使用说明

animation-delay 属性定义动画什么时候开始。

animation-delay 值单位可以是秒（s）或毫秒（ms）。

提示: 允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。

7.3 语法

animation-delay: time;

8. animation-iteration-count 属性

播放三次动画：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob)</title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 3s;
	animation-iteration-count:3;

	
}

@keyframes mymove
{
	from {top:0px;}
	to {top:200px;}
}


</style>
</head>
<body>

<p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。</p>

<div></div>

</body>
</html>

8.1 标签定义及使用说明

animation-iteration-count属性

定义动画应该播放多少次。


animation-iteration-count: value;

9. animation-direction 属性

先执行一遍动画，然后再反向执行一遍动画：

9.1 定义和用法

animation-direction 属性定义是否循环交替反向播放动画。

注意：如果动画被设置为只播放一次，该属性将不起作用。

9.2 CSS 语法

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;

10. animation-fill-mode 属性

10.1 实例

把物体动画地从一个地方移动到另一个地方，并让它停留在那里：

10.2 定义和用法

animation-fill-mode 属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。

语法

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

11. animation-play-state 属性

11.1 实例

暂停动画：

11.2 标签定义及使用说明

animation–play-state属性指定动画是否正在运行或已暂停。

注意：在JavaScript中使用此属性在一个周期中暂停动画。

11.3 语法

animation-play-state: paused|running;

本文标签： 属性常用动画cssperspective

版权声明：本文标题：CSS常用的动画属性：perspective 属性和animation属性 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725894467a1047461.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。