jQuery圣诞下雪动画制作

2019-09-10 郑州网站建设  

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

  <title>jQuery圣诞下雪动画</title>

<meta name="keywords" content=" jQuery圣诞下雪动画" />

<meta name="description" content=" jQuery圣诞下雪动画" />

 

 

      <link rel="stylesheet" href=http://www.divcss5.com/html5/"css/style.css">

 

 

</head>

 

<body>

  <div class="container">

 

  <p id="days"> </p>

 

</div>

  <script src='http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js'></script>

 

    <script src=http://www.divcss5.com/html5/"js/index.js"></script>

 

</body>

</html>

Css代码:

@import url('https://fonts.谷歌apis.com/css?family=Cookie');

 

body {

  background-color: #F24236;

  width: 100%;

  font-family: 'Cookie', cursive;

}

 

.container {

  position: absolute;

  top: 90px; left: 180px;

}

 

#days {

  font-size: 50px;

  color: #FFF;

  text-align: center;

  letter-spacing: 3px;

}

 

.drop {

         position: absolute;

         top: 0;     

         z-index: -1;

  opacity: 0;

}

.snow {

         height: 8px;

         width: 8px;

         border-radius: 100%;

         background-color: #FFF;

  box-shadow: 0 0 10px #FFF

}

 

 

.animate {

         animation: falling 8.5s infinite ease-in;  

}

 

 

@keyframes falling {

         0% {top: 0; opacity: 1;}

         100% {top: 1500px; opacity: 0}


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1883.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • hea
  • Doctype
  • !
  • jQuery