css实现黑云压顶背景动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现黑云压顶背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Oswald); @keyframes clouds-loop-1 { to { background-position: -1000px 0; } } .clouds-1 { background-image: url("//repo.bfw.wiki/bfwrepo/image/609623ec8fbc0.png"); animation: clouds-loop-1 20s infinite linear; } @keyframes clouds-loop-2 { to { background-position: -1000px 0; } } .clouds-2 { background-image: url("//repo.bfw.wiki/bfwrepo/image/609623de7c82c.png"); animation: clouds-loop-2 15s infinite linear; } @keyframes clouds-loop-3 { to { background-position: -1579px 0; } } .clouds-3 { background-image: url("//repo.bfw.wiki/bfwrepo/image/609623f42aaf6.png"); animation: clouds-loop-3 17s infinite linear; } html, body { font-family: sans-serif; height: 100%; padding: 0; margin: 0; } body { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #000000)); background: -moz-linear-gradient(#333333, #000000); background: -webkit-linear-gradient(#333333, #000000); background: linear-gradient(#333333, #000000); } body, .........完整代码请登录后点击上方下载按钮下载查看
网友评论0