css - CSS:重复的动画背景
问题描述
我正在尝试创建一个由两部分组成的重复背景。每个部分都是一个渐变,一个向上移动,另一个向下移动。
我得到的最好的是:
html {
background: black;
color: #4c4c4c;
}
body {
margin: 30vh auto;
max-width: 80vw;
}
.wave {
background: none;
height: 1rem;
width: 50%;
position: absolute;
z-index: 2;
animation: move 700ms 0ms steps(2) infinite both;
}
.color::after,
.color::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 100%;
top: 0;
}
.color {
background-image: linear-gradient(#fe0000 50%, #6531ff 0 100%);
}
.color::after {
background: linear-gradient(to bottom, #f4e04d, #3bceac 20%, rgba(22, 22, 22, 0) 100%), linear-gradient(to right, #042a2b 3rem, transparent 3rem, transparent 6rem);
}
.wave,
.color::after,
.color::before {
background-size: 5rem 1rem;
background-repeat: repeat-x;
}
@keyframes move {
0% {
margin-top: -3rem;
}
100% {
margin-top: -3.25rem;
}
}
<div class="color wave"></div>
我明白为什么这不起作用,但不知道如何继续。
首先(位置 1),所有奇数块都高于偶数块。在第一个动画之后,它是相反的(位置 2)等等。
解决方案
可能像下面这样:
.box {
height:100px;
background:linear-gradient(red,blue,yellow,red) 0 0/100% 200%;
animation:y 2s linear infinite;
}
.box::after {
content:"";
display:block;
height:100%;
background:linear-gradient(green,lightblue,pink,green) 0 0/100% 200%;
animation:inherit;
animation-direction: reverse;
-webkit-mask:linear-gradient(90deg,#fff 50%,transparent 0) 0 0/20% 100%;
}
@keyframes y {
to {
background-position:0 -200%;
}
}
<div class="box"></div>
推荐阅读
- django - Heroku-postgress 中与数据库的连接太多
- javascript - React Javascript - 复制的对象不包含任何更改
- azure - 如何以编程方式确定 Azure DSC 扩展的设置字符串
- php - 从函数返回特定的数组形式
- android - 我对响应式布局使用 ConstraintLayout 有问题
- reactjs - 仅当通过 curl 或 axios 调用 URL 时,才会由 react-scripts 代理 URL
- matlab - 如何使用 probplot、Matlab 获得与给定概率值对应的 X 值?
- python - 在python中创建可以返回对象的lambda函数
- java - 为什么我不能使用 MySQL 的 mysql.connector.java 库?
- amazon-web-services - AccessControl 属性 - s3 存储桶