css实现一个下雪背景动画的登录页面效果代码

代码语言:html

所属分类:表单美化

代码描述:css实现一个下雪背景动画的登录页面效果代码

代码标签: 下雪 背景 画的 登录 页面 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
        .snow-container {  position: absolute;  height:794px;  width: 100%;  max-width: 100%;  top: 0;  overflow: hidden;  z-index: 2;  pointer-events: none;}.snow-container.two {    height: 440px;}.snow {  display: block;  position: absolute;  z-index: 2;  top: 0;  right: 0;  bottom: 0;  left: 0;  pointer-events: none;  -webkit-transform: translate3d(0, -100%, 0);          transform: translate3d(0, -100%, 0);  -webkit-animation: snow linear infinite;          animation: snow linear infinite;}.snow.foreground {  background-image: url("//repo.bfw.wiki/bfwrepo/images/snow/1.png");  -webkit-animation-duration: 15s;          animation-duration: 15s;}.snow.foreground.layered {  -webkit-animation-delay: 7.5s;          animation-delay: 7.5s;}.snow.middleground {  background-image: url("//repo.bfw.wiki/bfwrepo/images/snow/2.png");  -webkit-animation-duration: 20s;          animation-duration: 20s;}.snow.middleground.layered {  -webkit-animation-delay: 10s;          animation-delay: 10s;}.snow.background {  background-image: url("//repo.bfw.wiki/bfwrepo/images/snow/3.png");  -webkit-animation-duration: 30s;          animation-duration: 30s;}.snow.background.layered {  -webkit-animation-delay: 15s;          animation-delay: 15s;}@-webkit-keyframes snow {  0% {    -webkit-transform: translate3d(0, -100%, 0);            transform: translate3d(0, -100%, 0);  }  100% {    -webkit-transform: translate3d(15%, 100%, 0);            transform: transla.........完整代码请登录后点击上方下载按钮下载查看

网友评论0