css实现多彩液体融合动态背景文字卡片效果代码
代码语言:html
所属分类:背景
代码描述:css实现多彩液体融合动态背景文字卡片效果代码
代码标签: css 多彩 液体 融合 动态 背景 文字 卡片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
/* Easily change colors here & remove the color cycle if you wish */
--background: #999;
--leftColor: #555;
--rightColor: black;
--textColor: white;
animation: 🛕 10s linear infinite;
}
@keyframes 🛕 {
0% {
--background: #999;
--leftColor: #555;
--rightColor: black;
--textColor: white;
}
10% {
--background: purple;
--leftColor: green;
--rightColor: orange;
--textColor: white;
}
20% {
--background: mediumspringgreen;
--leftColor: palegreen;
--rightColor: yellow;
--textColor: black;
}
30% {
--background: dodgerblue;
--leftColor: tomato;
--rightColor: deeppink;
--textColor: white;
}
40% {
--background: darkmagenta;
--leftColor: darkorange;
--rightColor: navy;
--textColor: white;
}
50% {
--background: gold;
--leftColor: blue;
--rightColor: red;
--textColor: white;
}
60% {
--background: deepskyblue;
--leftColor: greenyellow;
--rightColor: violet;
--textColor: black;
}
70% {
--background: seagreen;
--leftColor: mediumblue;
--rightColor: darkgoldenrod;
--textColor: white;
}
80% {
--background: hotpink;
--leftColor: darkorchid;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0