纯css实现飘动的白云效果
代码语言:html
所属分类:动画
代码描述:纯css实现飘动的白云效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #00b4ff; color: #333; font: 100% Arial, Sans Serif; height: 100vh; margin: 0; padding: 0; overflow-x: hidden; } #background-wrap { bottom: 0; left: 0; padding-top: 50px; position: fixed; right: 0; top: 0; z-index: -1; } /* KEYFRAMES */ @-webkit-keyframes animateCloud { 0% { margin-left: -1000px; } 100% { margin-left: 100%; } } @-moz-keyframes animateCloud { 0% { margin-left: -1000px; } 100% { margin-left: 100%; } } @keyframes animateCloud { 0% { margin-left: -1000px; } 100% { margin-left: 100%; } } /* ANIMATIONS */ .x1 { -webkit-animation: animateCloud 35s linear infinite; -moz-animation: animateCloud 35s linear infinite; animation: animateCloud 35s linear infinite; -webkit-transform: scale(0.65); -moz-transform: scale(0.65); transform: scale(0.65); } .x2 { -webkit-animation: animateCloud 20s linear infinite; -moz-animation: animateCloud 20s linear infinite; animation: animateCloud 20s linear infinite; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } .x3 { -webkit-animation: animateCloud 30s linear infinite; -moz-animation: animateCloud 30s linear infinite; animation: animateCloud 30s linear infinite; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5); } .x4 { -webkit-animation: animateCloud 18s linear infinite; -moz-animation: animateCloud 18s linear infinite; animation: animateCloud 18s linear infinite; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } .x5 { -webkit-animation: animateCloud 25s linear infinite; -moz-animation: animateCloud 25s linear infinite; animation: animateCloud 25s linear infinite; -webkit-transform: scale(0.55); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0