html - CSS动画渐变
问题描述
您好,我正在尝试在 CSS 中使渐变的角度(度)变化更平滑。我想让它像滚动一样动画。
视频展示: https ://imgur.com/a/IM3o7qK
body {
min-height: 100vh;
min-width: 100vw;
margin:0;
background: linear-gradient(115deg, #007fff 55%, #f5fafa 45%);
}
@media only screen and (max-width: 800px) {
body {
background: linear-gradient(340deg, #f5fafa 60%, #007fff 40%);
}
}
解决方案
您不能使用渐变来执行此操作,但您可以使用如下旋转:
html::before {
content: "";
position: fixed;
top: 50%;
left: 50%;
height: 150vmax;
width: 150vmax;
background: linear-gradient(0deg, #007fff 55%, #f5fafa 45%);
transform: translate(-50%, -50%) rotate(115deg);
transition: transform 1s;
}
@media only screen and (max-width: 800px) {
html::before {
transform: translate(-50%, -50%) rotate(155deg);
}
}
推荐阅读
- css - 如何控制粘性元素的子元素的 z-index
- c - 指针表达式何时“基于”另一个指针?
- javascript - 如何克隆/复制 DOM 节点的影子 Dom?
- asp.net-core - .NET Core Razor 路由到 REST 样式路由
- php - 将 PDF 从 MySql DB 检索到 android(使用 Volley)
- java - java - 如何在Java的嵌套for循环中用字母递增值?
- debian - glibc 破坏的所有 debian 主要命令
- react-native - StackNavigator 与 createStackNavigator
- swift - 使用受信任的服务器验证 IAP 收据。如果返回的 JSON 不包含“latest_receipt_info”键,如何确定试用资格?
- javascript - 如何使 scrollIntoView() 在第一次单击时工作(Angular 6)?