网站首页 > 技术文章正文

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

hmc789 2024-11-26 03:42:49 技术文章 3 ℃

css动画 animation
css动画 keyframes
box-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="https://fonts.googleapis.com/css?family=Tangerine">
</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：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation.html

示例02：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_2.html

示例03 running hourse：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_3.html

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

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

因为只走了一步，如果我们把int步数增加，就会看到每个关键影格之间多了一些演算出来的影格，当然如果步数设定越多，看到的动画也会越流畅。（但需要这样，不用step就好了）
比如：如果把上面的 step-start 改成 steps(3, start) , step-end 改成 steps(3,end) 会得到下面的结果
https://codepen.io/AlexZ33/pen/PowpKLb点击预览

如果熟练 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 | https://alexz33.github.io/</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 ：https://developers.google.com/fonts/docs/getting_started

CSS教程：CSS（高级）： https://segmentfault.com/a/1190000021902412

上一篇：单页面vue制作网页的电子数字时间动态显示
下一篇：再见 HTML，你好Canvas

网站首页 > 技术文章 正文