【五分钟CSS】纯CSS渐变背景效果

BGM:Moody – Jay Someday

Github 地址:https://github.com/FastChen/FiveMinutesCSSEffect
今天给大家分享一个纯CSS渐变背景效果

本期代码

<!--
    代码来源于网络 Code from the Internet
    复古派科技:https://fgpai.com
    灵工艺软件工作室:https://nullcraft.org
    项目文件开源地址:https://github.com/FastChen/FiveMinutesCSSEffect
	
    渐变色:
    #ee7752, #e73c7e, #23a6d5, #23d5ab
-->
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>五分钟玩转CSS - 渐变背景</title>
</head>
<style>
body{
    margin: 0;
    width: 100%;
    height: 100vh;
    color: #fff;
    background: linear-gradient(-45deg,#ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG{
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}
</style>
<body>

</body>
</html>

本视频由 复古派科技 官方制作 你可以前往 官方B站 获取更多教程

发表评论

登录后才能评论