html5css重复径向渐变,CSS3基础知识 - 径向渐变和动画

最新推荐文章于 2023-01-05 09:30:29 发布

带刀侍卫杨晁跃

最新推荐文章于 2023-01-05 09:30:29 发布

阅读量139

点赞数

文章标签： html5css重复径向渐变

这篇博客深入探讨了如何使用CSS实现复杂的背景图案和动画效果。通过结合径向渐变、线性渐变、混合模式和背景大小、位置等属性，创建出一种动态的、视觉上吸引人的背景。同时，利用@keyframes规则制作了颜色变化的动画，为网页增添活力。

摘要由CSDN通过智能技术生成

CSS

语言：

CSSSCSS

确定

HTML {

height: 100%;

}

BODY {

background: gold;

background-image: -webkit-radial-gradient(#800080 10%, #800080 20%, #dc143c 20%, #dc143c 30%, #f00 30%, #f00 40%, #ff4500 40%, #ff4500 50%, #ffd700 50%, #ffd700 60%, #9acd32 60%, #9acd32 70%, #87ceeb 70%, #87ceeb 80%, #4682b4 80%, #4682b4 90%, #ee82ee 90%), -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 60%), -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 60%), -webkit-radial-gradient(#800080 10%, #800080 20%, #dc143c 20%, #dc143c 30%, #f00 30%, #f00 40%, #ff4500 40%, #ff4500 50%, #ffd700 50%, #ffd700 60%, #9acd32 60%, #9acd32 70%, #87ceeb 70%, #87ceeb 80%, #4682b4 80%, #4682b4 90%, #ee82ee 90%), -webkit-radial-gradient(#800080 10%, #800080 20%, #dc143c 20%, #dc143c 30%, #f00 30%, #f00 40%, #ff4500 40%, #ff4500 50%, #ffd700 50%, #ffd700 60%, #9acd32 60%, #9acd32 70%, #87ceeb 70%, #87ceeb 80%, #4682b4 80%, #4682b4 90%, #ee82ee 90%);

background-image: radial-gradient(#800080 10%, #800080 20%, #dc143c 20%, #dc143c 30%, #f00 30%, #f00 40%, #ff4500 40%, #ff4500 50%, #ffd700 50%, #ffd700 60%, #9acd32 60%, #9acd32 70%, #87ceeb 70%, #87ceeb 80%, #4682b4 80%, #4682b4 90%, #ee82ee 90%), linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 60%), linear-gradient(-45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 60%), radial-gradient(#800080 10%, #800080 20%, #dc143c 20%, #dc143c 30%, #f00 30%, #f00 40%, #ff4500 40%, #ff4500 50%, #ffd700 50%, #ffd700 60%, #9acd32 60%, #9acd32 70%, #87ceeb 70%, #87ceeb 80%, #4682b4 80%, #4682b4 90%, #ee82ee 90%), radial-gradient(#800080 10%, #800080 20%, #dc143c 20%, #dc143c 30%, #f00 30%, #f00 40%, #ff4500 40%, #ff4500 50%, #ffd700 50%, #ffd700 60%, #9acd32 60%, #9acd32 70%, #87ceeb 70%, #87ceeb 80%, #4682b4 80%, #4682b4 90%, #ee82ee 90%);

background-blend-mode: lighten, normal, normal, overlay, lighten;

background-size: 6em 6em, 2em 2em, 2em 2em, 12em 12em, 3em 3em;

-webkit-animation: color 10s infinite;

animation: color 10s infinite;

background-position: 50% 50%;

}

@-webkit-keyframes color {

10% {

background-color: purple;

}

20% {

background-color: yellowgreen;