css+div实现垂直彩色条幅闪动动画效果代码-html代码-BFW代码库

css+div实现垂直彩色条幅闪动动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div实现垂直彩色条幅闪动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
* {
        margin: 0;
        padding: 0;
}
.container {
        display: flex;
        
}

.box {
        width: 20%;
        height: 100vh;
        background-image: radial-gradient(circle, #f21392, #ff3c61, #ff7031, #ee9f00, #c6c600, #93d147, #5ed779, #00d9a7, #00becf, #009dff, #0072ff, #1a1be5);
        
        box-shadow:2px 0 3px rgba(0,0,0,0.1) inset,-5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
        cursor: pointer;
        
}

.box:hover {
  box-shadow: 0 0 15px rgba(0,0,0,0.5), inset 0 0 15px rgba(255,255,255,0.3);
}


.box:nth-child(2n) {
        filter:hue-rotate(50deg)
        animation: fade 1s alternate-reverse infinite;
}

.box:nth-child(3n) {
        filter:hue-rotate(70deg);
        animation: fade 3s alternate-reverse  infinite;
}

.box:nth-child(5n) {
        filter:hue-rotate(90deg);
        animation: fade 5s alternate-reverse  infinite;
}

.box:nth-child(11n) {
        filter:hue-rotate(110deg);
        animation: fade 7s alternate-reverse  infinite;
}

.box:nth-child(13n) {
        filter:hue-rotate(130deg);
        animation: fade 11s alternate-reverse  infinite;
}

.box:nth-child(17n) {
        filter:hue-rotate(150deg);
        animation: fade 13s alternate-reverse  infinite;
}

.box:nth-child(19n) {
        filter:hue-rotate(170deg);
        animation: fade 17s alternate.........完整代码请登录后点击上方下载按钮下载查看