纯CSS实现linear

您所在的位置：网站首页 › animate背景渐变色 › 纯CSS实现linear

纯CSS实现linear

2023-09-02 03:21| 来源: 网络整理| 查看: 265

话不多说，先上效果图

受制于网站的容量，最多只能上传4MB的动图，所以我调快了动画的速度，缩短了动图的时间，实际上动画是很缓和的。

说到动画，众所周知，渐变是不能够使用通过keyframes实现动画过渡效果的，只会突然的改变颜色。

例如，如果关键帧代码如下

@keyframes test { 0%{ background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%); } 100%{ background: linear-gradient(60deg, rgb(173, 162, 218) 0%, rgb(201, 14, 189) 100%); } }

可以看到背景色并不会平滑的过渡，只会非常僵硬突然的颜色变化，显然不是我们想要的效果。

换个想法，没必要局限于在keyframes中使用linear-gradient来实现渐变动画效果，linear-gradient不能够平滑过渡，但是position可以呀，所以我们先实现这样的效果

html代码如下

css代码如下

body { margin:0; } h1 { font-family: 'Lato', sans-serif; font-weight:300; letter-spacing: 2px; font-size:48px; user-select: none; } p { font-family: 'Lato', sans-serif; letter-spacing: 1px; font-size:14px; color: #333333; } .header { position: relative; text-align: center; background: linear-gradient( 45deg, rgb(84 58 181), rgb(84 58 181 / 70%), rgb(0 172 193 / 70%), rgb(87 228 246),rgb(255 255 255)); color: white; box-shadow: 1px 1px 6px #00000087; } .logo { width:50px; fill:white; padding-right:15px; display:inline-block; vertical-align: middle; } .inner-header { height:65vh; width:100%; margin: 0; padding: 0; } .flex { /*Flexbox for containers*/ display: flex; justify-content: center; align-items: center; text-align: center; } .waves { position:relative; width: 100%; height:15vh; margin-bottom:-7px; /*Fix for safari gap*/ min-height:100px; max-height:150px; } .content { position:relative; height:20vh; text-align:center; background-color: white; } /* Animation */ .parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; } .parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes move-forever { 0% { transform: translate3d(-90px,0,0); } 100% { transform: translate3d(85px,0,0); } } /*Shrinking for mobile*/ @media (max-width: 768px) { .waves { height:40px; min-height:40px; } .content { height:30vh; } h1 { font-size:24px; } }

再然后，我们把背景放大，也就是在.header中加上这一行代码background-size: 400%然后写一个背景移动的关键帧动画

@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

应用到.head中

.header { position: relative; text-align: center; background: linear-gradient( 45deg, rgb(84 58 181), rgb(84 58 181 / 70%), rgb(0 172 193 / 70%), rgb(87 228 246),rgb(255 255 255)); background-size: 400%; color: white; box-shadow: 1px 1px 6px #00000087; animation: gradient 5s linear infinite; }

调整动画速度只要修改animation中的5s就行了，随便改成什么数字就行。

底部的渐变波纹动画来自于该网站https://codepen.io/goodkatz/p...

【本文地址】

纯CSS实现linear

纯CSS实现linear

今日新闻

推荐新闻