js实现canvas粒子动画倒计时效果代码-html代码-BFW代码库

js实现canvas粒子动画倒计时效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas粒子动画倒计时效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    
     <style>
     body {
  font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #79a8ae;
  color: #666;
  font-size: 16px;
  line-height: 1.5em;
}

h1 {
  color: #111;
  margin: 0 0 12px 0;
  font-size: 24px;
  line-height: 1.5em;
}

p {
  margin: 0 0 10x 0;
}

a {
  color: #888;
  text-decoration: none;
  border-bottom: 1px solid #ccc;
}

a:hover {
  border-bottom-color: #888;
}

body,
.overlay {
  -webkit-perspective: 1000;
  -webkit-perspective-origin-y: 25%;
}

.body--ready {
  /* Ideas
  background: -webkit-linear-gradient(top, #e2b986 -10%, #241c35 140%);
  background: -webkit-linear-gradient(top, #c97369 -40%, #241c35 130%);
  background: -webkit-linear-gradient(top, #fac4c4 -10%, #606386 140%);
  background: -webkit-linear-gradient(top, #519ab0 0%, #414A6D 110%);
  background: -webkit-linear-gradient(top, rgb(129, 0, 170) 0%, rgb(43, 4, 114) 110%);
  background: -webkit-linear-gradient(top, rgb(163, 235, 189) 0%, rgb(16, 93, 145) 110%);
  background: -webkit-linear-gradient(top, rgb(165, 103, 189) 0%, rgb(75, 233, 214) 120%);
  */

  background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
}

.body--ready .overlay {
  -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -moz-transition: -moz-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -ms-transition: -ms-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  -o-transition: -o-transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
  transition: transform 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1),
                      opacity 0.7s cubic-bezier(0.694, 0.0482, 0.335, 1);
}


.ui {
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 300px;
  margin-left: -150px;
}

.ui-input {
  width: 100%;
  height: 50px;
  background: none;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border: none;
  border-bottom: 2px solid white;
}

.ui-input:focus {
  outline: none;
  border: none;
  border-bottom: 2px solid white;
}

.ui-return {
  display: none;
  p.........完整代码请登录后点击上方下载按钮下载查看