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

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

带刀侍卫杨晁跃

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

阅读量128

点赞数

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

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;

}

30% {

background-color: royalblue;

}

40% {

background-color: violet;

}

50% {

background-color: steelblue;

}

60% {

background-color: crimson;

}

70% {

background-color: gold;

}

80% {

background-color: skyblue;

}

90% {

background-color: greenyellow;

}

@keyframes color {