【css】动画彩色条纹。

没有太多的技巧，就着一些代码。


html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    body{
      background-color: black;
      margin: 0;
      padding: 0;
      text-align: center;
 
    }
    .key{
      height: 20px;
      width: 50px;
      float: left;
      animation: key 1s infinite steps(2)  ;
    }
    /*alternate both step-start*/
 
    .key:nth-child(6n+1) {
      animation-delay: .1s;
      background-color: #ffb8c9;
    }
 
    .key:nth-child(6n+2) {
      animation-delay: .2s;
      background-color: #ffd6b8;
    }
 
    .key:nth-child(6n+3) {
      animation-delay: .3s;
      background-color: #ddffb8;
    }
 
    .key:nth-child(6n+4) {
      animation-delay: .4s;
      background-color: #b8fff9;
    }
 
    .key:nth-child(6n+5) {
      animation-delay: .5s;
      background-color: #b8ccff;
    }
 
    .key:nth-child(6n) {
      animation-delay: .6s;
      background-color: #d2b8ff;
    }
    @keyframes key {
      0%{
 
      }100%{
         background-color: transparent;
      }
    }
    .piano{
      display: inline-block;
      margin-top: 100px;
    }
    .piano::after{
      content: '';
      display: block;
      clear: both;
    }
  style>
head>
<body>
<div class="piano">
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
  <div class="key">div>
div>
body>
html>

相关阅读:
OpenCV每日函数图像过滤模块 (10) getGaborKernel计算Gabor 滤波器函数
Matlab之数组、包含分配给类别的值函数categorical
浏览器渲染原理以及重排与重绘
【编程之路】常见的排序算法（一）
手把手教你搭建K8S集群
力扣240.搜索二维矩阵II
常用应届生Java开发笔试面试题(更新中)
ES6:Map
.NET面试宝典130道经典面试真题及答案
在项目管理中，项目经理必须学会合理放权

原文地址：https://blog.csdn.net/qq_33014695/article/details/126118031