纯css3自动背景变换背景颜色，很炫酷

为人生而奋斗 · 发表于 2020-7-31 09:36

提示: 作者被禁止或删除内容自动屏蔽

TMTT · 发表于 2020-7-31 11:03

本帖最后由 TMTT 于 2020-8-1 12:59 编辑

提取的爱集的动态渐变代码，有小部分多余代码没删除。
此动态渐变比较占CPU，不推荐正式使用，有兴趣的可以试玩一下。本地新建一个.html文件就行。
确实喜欢渐变背景的可以删除动态部分的代码，只保留渐变背景，这样就比较不错了。

[Asm] 纯文本查看 复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>标题</title>
<meta name="keywords" content="关键词">
<style>
*{margin:0;padding:0;box-sizing:border-box;font-weight:normal;font-family:Microsoft YaHei,PingFang SC,Hiragino Sans GB,Helvetica Neue,Helvetica,Noto Sans CJK SC,Arial,sans-serif}a{text-decoration:none;display:inline-block;color:#666;cursor:pointer;-webkit-transition:color,border,background .2s,.2s,.2s;transition:color,border,background .2s,.2s,.2s}img{width:100%;border:0;display:block;overflow:hidden;height:auto}ul,li{list-style:none}input[type="text"]{-webkit-appearance:none;outline:0}button{border:0;outline:0}input::-ms-expand{display:none}:-moz-placeholder{color:#bebebe}::-moz-placeholder{color:#bebebe}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#bebebe}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#bebebe}header,section,footer,aside,nav,article{display:block}body{min-width:1200px;margin:0 auto}.block{display:block}.iblock{display:inline-block}.hide{display:none}.show{display:block}.clearfix{*zoom:1}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.fl{float:left}.fr{float:right}.ovh{overflow:hidden}.poa{position:absolute}.por{position:relative}.pof{position:fixed}.bg_fff{background:#fff}.bg_f5{background:#f5f5f5}.fc_b0{color:#b0b0b0}.fc_38{color:#383838}.fc_8f{color:#8f8f8f}.fc_fff{color:#fff}.fc_pink{color:#fa3c64}.fs_12{font-size:12px}.fs_14{font-size:14px}.fs_16{font-size:16px}.fs_18{font-size:18px}.fs_24{font-size:24px}@-webkit-keyframes gradient{50%{background-position:100% 0}}@keyframes gradient{50%{background-position:100% 0}}@font-face{font-family:"iconfont";src:url('img/iconfont.eot');src:url('img/iconfont.eot#iefix') format('embedded-opentype'),url('img/z77MA21BTFUWozlavGlSHfiuiG6kgV96XIwx2jxdXfCVaweKm5ZdU6Hh1Megku6OiDTzABLRSQc7YyfyAAA=') format('woff'),url('img/iconfont.ttf') format('truetype'),url('img/iconfont.svg') format('svg')}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[class*="icon-"]{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-bottom:before{content:"\e64a"}.icon-right:before{content:"\e64b"}.icon-left:before{content:"\e64c"}.icon-search:before{content:"\e64d"}.icon-close:before{content:"\e64e"}.icon-jiazai:before{content:"\e64f"}.icon-icon-test:before{content:"\e601"}.icon-tixing:before{content:"\e650"}.icon-qq:before{content:"\e651"}.icon-weixin:before{content:"\e652"}.icon-qq2:before{content:"\e653"}.icon-weixin-1:before{content:"\e654"}.icon-xuanzhong:before{content:"\e655"}.icon-weixuanzhong:before{content:"\e656"}.icon-chuangjian:before{content:"\e657"}.icon-chenggong:before{content:"\e658"}.icon-wodezhuye:before{content:"\e659"}.icon-tuichu:before{content:"\e65a"}.icon-shijian:before{content:"\e65b"}.icon-fou:before{content:"\e65c"}.icon-shi:before{content:"\e65d"}.icon-suo:before{content:"\e65e"}.icon-xing:before{content:"\e65f"}.icon-xing-1:before{content:"\e660"}.icon-duihao:before{content:"\e661"}.icon-weixin2:before{content:"\e662"}.icon-zan:before{content:"\e605"}.icon-xiangsi:before{content:"\e606"}.icon-xifen:before{content:"\e607"}.icon-remen:before{content:"\e608"}.icon-bottom-copy:before{content:"\e663"}.icon-tubiaozhizuomoban-:before{content:"\e60a"}.icon-sousuowujieguo:before{content:"\e60b"}.icon-jiazaizhong-:before{content:"\e60c"}.icon-GIFtubiao:before{content:"\e60e"}.icon-fangda:before{content:"\e619"}.icon-zhifubao-:before{content:"\e61a"}.icon-weixinzhifu-:before{content:"\e61b"}.icon-gaojitequan:before{content:"\e61f"}.icon-biaozhuntequan:before{content:"\e620"}.icon-zhuanji:before{content:"\e624"}.icon-yanse:before{content:"\e625"}.icon-touxiang:before{content:"\e626"}.icon-faxian:before{content:"\e627"}.icon-new:before{content:"\e62c"}.icon-aijilogo:before{content:"\e62e"}.icon-aijilogo-:before{content:"\e62f"}.icon-aijilogo3:before{content:"\e630"}.icon-QQ:before{content:"\e631"}.icon-weixin1:before{content:"\e632"}.icon-simitequanweikaitong-:before{content:"\e633"}.icon-biaozhunsimitequan-:before{content:"\e634"}.icon-gaojisimitequan-:before{content:"\e635"}.icon-fuzhitequanweikaitong-:before{content:"\e636"}.icon-biaozhunfuzhitequan-:before{content:"\e637"}.icon-gaojifuzhitequan-:before{content:"\e638"}.icon-lianjie:before{content:"\e639"}.icon-shangchuan:before{content:"\e63a"}.icon-gengduo:before{content:"\e63b"}.icon-paihang:before{content:"\e63c"}.icon-tupian:before{content:"\e63d"}.icon-keshangyonghuise:before{content:"\e63f"}.icon-keshangyongbiaozhun:before{content:"\e640"}.icon-keshangyonggaoji:before{content:"\e641"}.icon-jingpinzhuanjihui:before{content:"\e642"}.icon-jingpinzhuanji:before{content:"\e643"}.icon-xiazai:before{content:"\e644"}.icon-soutupian-:before{content:"\e645"}.icon-yanse01:before{content:"\e646"}.icon-yidong:before{content:"\e647"}.icon-liulan:before{content:"\e648"}.icon-fenlei:before{content:"\e649"}.icon-shouye:before{content:"\e664"}.icon-hdyulanhuise:before{content:"\e665"}.icon-hdyulan:before{content:"\e666"}.icon-HD:before{content:"\e667"}.icon-suoxiao-:before{content:"\e668"}.icon-liwu:before{content:"\e669"}.icon-aijilogo4:before{content:"\e66a"}.icon-aijilogo5:before{content:"\e66b"}.icon-aijilogo6:before{content:"\e66c"}.icon-wangguan:before{content:"\e66d"}.icon-anquanliulanqi:before{content:"\e66e"}.icon-jisuliulanqi:before{content:"\e66f"}.icon-googleliulanqi:before{content:"\e670"}.icon-beta-:before{content:"\e671"}.icon-jia:before{content:"\e672"}.icon-jianyi:before{content:"\e673"}.icon-gongjv-:before{content:"\e674"}.icon-daoru:before{content:"\e675"}.icon-wenanhui:before{content:"\e676"}.icon-wenan:before{content:"\e677"}.icon-xianliang:before{content:"\e678"}.icon-HOT:before{content:"\e67a"}.icon-hot2:before{content:"\e679"}.icon-bofang:before{content:"\e67b"}.icon-tuijian:before{content:"\e67c"}.icon-zuixin:before{content:"\e67d"}.icon-chilun:before{content:"\e67f"}.icon-suiji:before{content:"\e67e"}.icon-huomiao:before{content:"\e680"}.icon-pinpaitequanhui:before{content:"\e681"}.icon-gaojipinpai:before{content:"\e682"}.icon-pinpaitequan:before{content:"\e683"}.icon-xinshixin:before{content:"\e685"}.icon-xinkong:before{content:"\e686"}.icon-tiaozhuan:before{content:"\e687"}.icon-xiazai-:before{content:"\e688"}.icon-zhankai:before{content:"\e684"}.icon-jifen:before{content:"\e69a"}.icon-shubiao:before{content:"\e689"}.icon-tupian11:before{content:"\e68a"}.icon-fenlei11:before{content:"\e68b"}.icon-tuijian11:before{content:"\e68c"}.icon-zhuanji11:before{content:"\e68d"}.icon-xialabiaoqian:before{content:"\e68e"}.icon-jiaochenggaoji:before{content:"\e68f"}.icon-jiaocheng:before{content:"\e690"}.icon-jiaochenghui:before{content:"\e691"}.icon-qiandao:before{content:"\e692"}.icon-touxiangkuang:before{content:"\e693"}.icon-shoucangtupian-:before{content:"\e694"}.icon-souxiangsi:before{content:"\e695"}.icon-jiepingsoutu:before{content:"\e696"}.icon-chuangyi-:before{content:"\e697"}.icon-huojian-:before{content:"\e698"}.icon-kuandai-:before{content:"\e699"}.icon-HD1:before{content:"\e69b"}.icon-zhaoxiangji-:before{content:"\e69c"}.icon-yuanjiaojvxing:before{content:"\e69d"}.icon-jvxing:before{content:"\e69e"}.icon-jietu:before{content:"\e69f"}.icon-jiantou:before{content:"\e6a0"}.icon-mohu:before{content:"\e6a1"}.icon-chexiao:before{content:"\e6a2"}.icon-yuanxing:before{content:"\e6a3"}.icon-zhixian:before{content:"\e6a4"}.icon-ziti:before{content:"\e6a5"}.icon-shangchuan01:before{content:"\e6a6"}.icon-zhengli:before{content:"\e6a7"}.icon-fenxiang:before{content:"\e6a8"}.icon-shuaxin:before{content:"\e6a9"}.icon-lianjie2:before{content:"\e6aa"}.icon-fenxiang2:before{content:"\e6ab"}.icon-gaojipng:before{content:"\e6ac"}.icon-biaozhunpng:before{content:"\e6ad"}.icon-pnghui:before{content:"\e6ae"}.icon-xiaoxi:before{content:"\e6af"}
.page-top {height: 700px;background: #0299d8;background: -webkit-linear-gradient(45deg,#5a3694 0%, #13bdce 33%, #0094d9 66%, #6fc7b5 100%);background: linear-gradient(45deg, #5a3694 0%, #13bdce 33%, #0094d9 66%, #6fc7b5 100%);background-size: 400%;background-position: 0% 100%;-webkit-animation: gradient 7.5s ease-in-out infinite;animation: gradient 7.5s ease-in-out infinite;padding-top: 100px;/*margin-top: 60px;*/}
</style>
</head>
<body>
<div class="page-top" style="height:1000px"></div>
</body>
</html>

渐变背景代码（静态）

[Asm] 纯文本查看 复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>标题</title>
<meta name="keywords" content="关键词">
<style>
*{margin:0;padding:0;}
.page-top {background: linear-gradient(45deg, #5a3694 0%, #13bdce 33%, #0094d9 66%, #6fc7b5 100%);background-size: 400%;}
</style>
</head>
<body>
<div class="page-top" style="height:1000px"></div>
</body>
</html>

赵易涵 · 发表于 2020-7-31 10:11

涛之雨发表于 2020-7-31 10:04
请问能不能实现渐变的过度呢，之前试了很多方案都没成功

某度：爱集，可以参考他们的代码

水到渠成的执着 · 发表于 2020-7-31 09:52

不错,加油

CHHCHH · 发表于 2020-7-31 09:57

前来学习！！！

涛之雨 · 发表于 2020-7-31 10:04

请问能不能实现渐变的过度呢，之前试了很多方案都没成功

吃月亮的鹿 · 发表于 2020-7-31 10:08

js写感觉更好啊

ShinRan · 发表于 2020-7-31 10:17

animation-delay

yydj3535 · 发表于 2020-7-31 10:26

不错很好用

XXGENID · 发表于 2020-7-31 10:26

涛之雨发表于 2020-7-31 10:04
请问能不能实现渐变的过度呢，之前试了很多方案都没成功

过渡方案可以采用css3里的transtion

cwbqiuyu · 发表于 2020-7-31 10:40

不错，可以实现

[HTML] 纯文本查看 复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css3自动背景变换背景颜色</title>
<style type="text/css" media="screen">
body{
	/*background-color: #f5f5f5;*/
	background: #e74c3c;
	animation: bg-color 30s infinite;
	animation-delay:30s;
	-webkit-animation: bg-color 30s infinite;
	overflow-x: hidden;
	overflow-x: hidden;
}
@-webkit-keyframes bg-color{
  0%{background-color:#e74c3c;}
  20%{background-color:#f1c40f;}
  40%{background-color:#1abc9c;}
  60%{background-color:#3498db;}
  80%{background-color:#9b59b6;}
  100%{background-color:#e74c3c;}
}
@keyframes bg-color{
  0%{background-color:#e74c3c;}
  20%{background-color:#f1c40f;}
  40%{background-color:#1abc9c;}
  60%{background-color:#3498db;}
  80%{background-color:#9b59b6;}
  100%{background-color:#e74c3c;}
}	
</style>
</head>

<body>
	<div style="margin:0 auto; width:800px; height:800px; line-height:800px; color:#fff; text-align:center;">纯css3自动背景变换背景颜色</div>
</body>
</html>

帐号		自动登录	找回密码
密码			注册[Register]

为人生而奋斗为人生而奋斗当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	为人生而奋斗发表于 2020-7-31 09:36 提示: 作者被禁止或删除内容自动屏蔽
	发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。
	回复举报

[其他转载] 纯css3自动背景变换背景颜色，很炫酷

免费评分

免费评分