时间：2023-09-12 21:06:01 | 来源：网站运营
时间：2023-09-12 21:06:01 来源：网站运营
【前端-CSS动画】制作圣诞节彩灯：
在线咨询
<!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.cssbody { 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); }}三、详解@keyframes规则。@keyframes规则是用来创建动画。 @keyframes规则内指定一个 CSS样式和动画将逐步从目前的样式更改为新的样式。@keyframes 规则和 animation 属性。Chrome 和 Safari 需要前缀 -webkit-。@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。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) 会得到下面的结果<!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>running house 动画的区别， 用js （jquery）的animate函数来做帧动画的控制关键词：圣诞节
