css - 使背景动画响应的问题
问题描述
我为我的背景制作了一个动画,但没有响应,我不知道如何制作它。我使用 Bootstrap 4 和 CSS 作为我的主要设计资源。
我起诉的CSS如下:
/* Animation GLitch */
.animation {
position: relative;
width: 100%;
height: 100vh;
background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
max-width: 100%;
max-height: 100%;
margin: 0 auto;
overflow: hidden;
}
.animation:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("https://images.unsplash.com/photo-1487174244970-cd18784bb4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2252&q=80");
opacity: 0.5;
mix-blend-mode: hard-light;
display: block;
}
.animation:hover:before {
animation: animate 0.2s linear infinite;
}
@keyframes animate {
0% {
background-position: 0 0;
filter: hue-rotate(0deg);
}
10% {
background-position: 5px 0;
}
20% {
background-position: -5px 0;
}
30% {
background-position: 15px 0;
}
40% {
background-position: -5px 0;
}
50% {
background-position: -25px 0;
}
60% {
background-position: -50px 0;
}
70% {
background-position: 0 -20px;
}
80% {
background-position: -60px -20px;
}
81% {
background-position: 0 0;
}
100% {
background-position: 0 0;
filter: hue-rotate(360deg);
}
}
动画由 2 张相同的图片组成,它们会产生这种故障效果,但我不知道如何让它响应。
它在这里工作的片段: https ://codepen.io/Jakub41/pen/abbwxWb
我尝试使用大小,但它正在修改我的效果我想在所有屏幕上保持相同的效果
解决方案
推荐阅读
- java - 在当前“while (iterator.hasNext())”循环中添加到迭代器
- php - 为什么后备语言环境就像 Laravel 中的默认语言环境?
- python - 为什么这个 Python 代码在我的类函数下不起作用?
- c# - 无法在 Unity 中实例化 UI 对象
- c++ - 如何将双精度列表作为 C++ 中的客户端 TCP 发送到 Matlab 中的 TCP 服务器?
- c++ - main() 总是在堆栈上吗?
- c# - .NET 客户端中 Google 表格中的条件格式请求
- javascript - 通过 renderUI 创建的自动调整 textAreaInput 的大小
- django - Django- 使用相同的 html 模板用于相同的目的但针对不同的用户- 博客网站
- java - 传递类型参数的类,它本身可以在 Java 中进行参数化