css布局实现雪花飞舞动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现雪花飞舞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0; overflow: hidden; } .room { width: 100vw; height: 100vh; overflow: hidden; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; background-image: linear-gradient(147deg, #ff6666 0%, #db3445 74%); } @keyframes aSnowmanAppear { 0% { opacity: 0; } 100% { opacity: 1; } } .snowflake { color: #fff; font-size: 1em; font-family: Arial; text-shadow: 0 0 1px #000; } @-webkit-keyframes snowflakes-fall { 0% { top: -10%; } 100% { top: 100%; } } @keyframes snowflakes-fall { 0% { top: -10%; } 100% { top: 100%; } } @-webkit-keyframes snowflakes-shake { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(80px); transform: translateX(80px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } @keyframes snowflakes-shake { 0% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(80px); transform: translateX(80px); } 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } } .snowflake { position: fixed; top: -10%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-animation-name: snowflakes-fall, snowflakes-shake; animation-name: snowflakes-fall, snowflakes-shake; -webkit-animation-duration: 10s, 3s; animation-duration: 10s, 3s; -webkit-animation-timing-function: linear, ease-in-out; animation-timing-function: linear, ease-in-out; -webkit-animation-iteration-count: infinite, infinite; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0