龙空技术网

「前端-CSS动画」制作圣诞节彩灯

镜心的小树屋 74

前言:

今天姐妹们对“css定义动画关键词”可能比较关切,你们都想要剖析一些“css定义动画关键词”的相关资讯。那么小编同时在网摘上汇集了一些有关“css定义动画关键词””的相关知识,希望各位老铁们能喜欢,咱们一起来了解一下吧!

css动画 animationcss动画 keyframesbox-shadow一、效果

二、代码

index.html

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title></title>  <link rel="stylesheet" href="style.css">   <link rel="stylesheet"          href=";></head><body>  <ul id="wire">      <li></li>      <li></li>        <li></li>        <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>    <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>    <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>    <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>    <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>      <li></li>        <ul>  <h2>Merry Christmas!</h2>v</body></html>

style.css

body {  background: #111;  margin: 0;}h2{  color: #fff;  position: relative;  margin-top:200px;  text-align: center;  letter-spacing: 0.2em;  font-size: 4em;  font-family: 'Mountains of Christmas';  text-shadow: 0px 0px 8px rgba(255,65,185,1);}#wire{  text-align:center;  white-space:nowrap;  position: absolute;  padding: 0;  width: 100%;  top:-80px;  border-bottom: 3px solid #222;  height: 100px;}#wire li {  position: relative;  list-style: none;  margin: 0 15px;  padding: 0;  display: inline-block;  width: 15px;  height: 30px;    border-radius: 50%;    top: 102px;    background: #fff;    /* animations*/    animation-name: even-flash;    animation-duration: 1s;    animation-iteration-count: infinite;    animation-fill-mode: both;}#wire li:nth-child(odd){  animation-name: odd-flash;}#wire li:before{  content: "";  position: absolute;  width: 14px;  height: 10px;  border-radius: 4px;  top:-5px;  left: 0;  background:#444;}@keyframes even-flash {  0% ,100%{    background:rgba(255,230,65,1);    box-shadow: 0px 2px 20px 4px rgba(255,230,65,1);  }  50%{    background:rgba(255,230,65,.5);    box-shadow: 0px 2px 20px 4px rgba(255,230,65,.5);  }}@keyframes odd-flash {  50%{    background:rgba(255,65,185,1);    box-shadow: 0px 2px 20px 4px rgba(255,65,185,1);  }  0% ,100%{    background:rgba(255,230,65,.5);    box-shadow: 0px 2px 20px 4px rgba(255,65,185,.5);  }}

三、详解

CSS3,我们可以创建动画,它可以取代许多网页动画图像,Flash 动画,和 Javascripts。

CSS3 @keyframes 规则

要创建CSS3动画,你将不得不了解@keyframes规则。

@keyframes规则是用来创建动画。 @keyframes规则内指定一个 CSS样式和动画将逐步从目前的样式更改为新的样式。

注意:Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。

CSS3 动画

当在@keyframe创建动画,把它绑定到一个选择器,否则动画不会有任何效果。

指定至少这两个 CSS3 的动画属性绑定向一个选择器:

规定动画的名称规定动画的时长

例子:

CSS3动画是什么?动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

例子:

常用属性

属性描述CSSDemo@keyframes规定动画。3

animation所有动画属性的简写属性,除了 animation-play-state 属性。3

animation-name规定 @keyframes 动画的名称。3

animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。单位s或ms3

animation-timing-function规定动画的速度曲线。默认是 "ease"。

其他还有:

- linear

- ease-in

- ease-out

- ease-in-out

- step-start

- step-end

- steps(int, start/end)

- cubic-bezier(n,n,n,n): 三次贝塞尔

3

animation-delay规定动画何时开始。默认是 0。3negative-animation-delay点击预览

负值 animation-delay —— 进阶点击预览animation-iteration-count规定动画被播放的次数。默认是 1。3

animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3

animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3

类似例子示例01:

示例02:

示例03 running hourse:

steps(int, start|end) 算是 step-startstep-end 的进化型,

step 等同于 steps(1, start) step-end 等同于 steps(1, end)

因为只走了 一步 ,如果我们把int步数增加,就会看到每个关键影格之间多了一些演算出来的影格,当然如果步数设定越多,看到的动画也会越流畅。(但需要这样,不用step就好了)

比如:如果把上面的 step-start 改成 steps(3, start) , step-end 改成 steps(3,end) 会得到下面的结果

点击预览

如果熟练 steps 的用法,就能够很简单的使用 sprite 图片来做动画,什麽是 sprite 图片 呢?就是将许多图案集合成一张图,接著透过 CSS 的语法使这些图案分别呈现在网页裡,这样就能大幅减少多张图片载入的 request 数量。

上图是一张经典的 sprite 图片 ( Leland Stanford 所拍摄 ),只要透过 CSS 动画的 steps,我们也能很简单的让图片中的马儿跑起来。

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>css动画 示例3 running hourse | ;/title>  <style>    html,    body {      height: 100%;      width: 100%;      margin: 0;      padding: 0;    }    div {      display: block;    }    #hourse {      width: 186px;      height: 141px;      position: absolute;      background-image: url("image/hourse.jpg");      animation-name: run;      animation-duration: 1s;      animation-iteration-count: infinite;      animation-timing-function: step-start;    }    @keyframes run {      0% {        background-position: -15px -13px;      }      6.25% {        background-position: -210px -13px;      }      12.5% {        background-position: -403px -13px;      }      18.75% {        background-position: -592px -13px;      }      25% {        background-position: -15px -165px;      }      31.25% {        background-position: -210px -165px;      }      37.5% {        background-position: -403px -165px;      }      43.75% {        background-position: -592px -165px;      }      50% {        background-position: -15px -320px;      }      56.25% {        background-position: -210px -320px;      }      62.5% {        background-position: -403px -320px;      }      68.75% {        background-position: -592px -320px;      }      75% {        background-position: -15px -470px;      }      81.25% {        background-position: -210px -470px;      }      87.5% {        background-position: -403px -470px;      }      93.75% {        background-position: -592px -470px;      }      100% {        background-position: -592px -470px;      }    }  </style></head><body>  <div id="hourse">  </div></body></html>

四、参考

Get Started with the Google Fonts API :

CSS教程:CSS(高级):

标签: #css定义动画关键词