一个生日快乐炫酷效果代码 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Happy Birthday!</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
        
        <script>
          hljs.highlightAll();
        </script>
        <style id="style-app">
            
        </style>
        <style>
            #style-text{
                width: 100%;
                height: 170px;
                border: 5px solid white;
                background-color: #333;
                color: white; 
                opacity: 0.1;
            }
        </style>
    </head>

    <body>
        
        <pre ><code id="style-text"></code></pre>
        <div class="cake">
            <div class="velas">
              <div class="fuego"></div>
              <div class="fuego"></div>
              <div class="fuego"></div>
              <div class="fuego"></div>
              <div class="fuego"></div>
            </div>
            <div class="cobertura"></div>
            <div class="bizcocho"></div>
            <h1>Happy Birthday!</h1>
            <p>23</p>
            <p>Huan</p>
          </div>
          <!-- partial -->
            <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
        <script type="text/javascript">
            // es6中定义一个很长的字符串 `
            var style_text = `html,
body {
  height: 100%;
}
body {
  background: #a27bcc;
  background: radial-gradient(ellipse at center, #a27bcc 0%, #6c5299 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a27bcc', endColorstr='#6c5299', GradientType=1);
}
.cake {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
}

.cake:after {
  background: #ebe3e1;
  border-radius: 100px;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 2px;
}

.velas {
  background: #ffffff;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -2.5px;
  margin-top: -8.33333333px;
  width: 5px;
  height: 16.66666667px;
}
.velas:after,
.velas:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}
.velas:after {
  top: 25%;
  left: 0;
}
.velas:before {
  top: 45%;
  left: 0;
}
/* ============================================== Fire
*/
.fuego {
  border-radius: 100%;
  box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
  position: absolute;
  top: -12px;
  left: 50%;
  margin-left: -3.33333333px;
  width: 6.66666667px;
  height: 12.5px;
}
.fuego:nth-child(1) {
  -webkit-animation: fuego 2s infinite;
          animation: fuego 2s infinite;
}
.fuego:nth-child(2) {
  -webkit-animation: fuego 1.5s infinite;
          animation: fuego 1.5s infinite;
}
.fuego:nth-child(3) {
  -webkit-animation: fuego 1s infinite;
          animation: fuego 1s infinite;
}
.fuego:nth-child(4) {
  -webkit-animation: fuego 0.5s infinite;
          animation: fuego 0.5s infinite;
}
.fuego:nth-child(5) {
  -webkit-animation: fuego 0.2s infinite;
          animation: fuego 0.2s infinite;
}
/* ============================================== Animation Fire
*/
@-webkit-keyframes fuego {
  0% {
    background: rgba(254, 248, 97, 0.5);
    transform: translateY(0) scale(1);
  }
  50% {
    background: rgba(255, 50, 0, 0.1);
    transform: translateY(-20px) scale(0);
  }
  100% {
    background: rgba(254, 248, 97, 0.5);
    transform: translateY(0) scale(1);
  }
}
@keyframes fuego {
  0% {
    background: rgba(254, 248, 97, 0.5);
    transform: translateY(0) scale(1);
  }
  50% {
    background: rgba(255, 50, 0, 0.1);
    transform: translateY(-20px) scale(0);
  }
  100% {
    background: rgba(254, 248, 97, 0.5);
    transform: translateY(0) scale(1);
  }
}
/* ============================================== Frosting
*/
.cobertura {
  background: #ece7e3;
  border-radius: 50px;
  position: absolute;
  top: 60%;
  left: 50%;
  margin-left: -27.77777778px;
  margin-top: -5px;
  width: 55.55555556px;
  height: 12.5px;
  z-index: 10;
}
.cobertura:after,
.cobertura:before {
  background: #ece7e3;
  border-radius: 100px;
  content: "";
  position: absolute;
  width: 5px;
  height: 10px;
}
.cobertura:after {
  top: 6.66666667px;
  right: 14.28571429px;
}
.cobertura:before {
  top: 10px;
  right: 9.09090909px;
}
.bizcocho {
  background: #6d3826;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 33.33333333px;
}
.bizcocho:after,
.bizcocho:before {
  background: rgba(236, 231, 227, 0.6);
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
}
.bizcocho:after {
  top: 30%;
  left: 0;
}
.bizcocho:before {
  top: 60%;
  left: 0;
}

h1,
p {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-style: italic;
  text-align: center;
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
h1 {
  color: #6c5299;
  font-size: 1em;
  margin-top: 6.8em;
}
p {
  color: rgba(236, 231, 227, 0.6);
  font-size: 0.8em;
  line-height: 2em;
}` 
            var style_app = document.getElementById("style-app")
            var style_text_obj = document.getElementById("style-text")
            // 表示结束的位置
            var n = 1
            var timer =setInterval(function(){
                //substring字符串截取，第一个参数开始位置，第二个参数结束位置
                style_app.innerHTML = style_text.substring(0,n)
                style_text_obj.innerHTML = style_text.substring(0,n)
                n++
                if(n === style_text.length){
                    clearInterval(timer)
                    alert("Huan,生日快乐！")
                }
            },10)
        </script>
    </body>
</html>

 

posted @ 2023-03-09 14:07  木子欢儿  阅读(5635)  评论(0)  编辑  收藏  举报