html之实现生日快乐的效果（拿来即用）

最新推荐文章于 2024-06-10 10:09:42 发布

m0_67390969

最新推荐文章于 2024-06-10 10:09:42 发布

阅读量2.7k

点赞数 2

分类专栏：前端 html 文章标签： javascript 前端 npm

本文链接：https://blog.csdn.net/m0_67390969/article/details/123346678

版权

前端项目之生日快乐

先看效果（实际上是动画，我截的屏所以是图片）：

在这里插入图片描述

直接上代码：

html部分：

注意，我用的外联方式导入的css（在第十行），你可以看自己情况直接在一个页面内容上也是可以的。

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">
<title>Happy Birthday!</title>



<link rel="stylesheet" href="css/style.css">


</head>

<body>

<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<bokeh></bokeh>
<div class="mobile">最大化查看</div>
<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
<h1>Feliz Cumplea?os Pratik!</h1>
<h2>Happy Birthday Bro!</h2>
<span>??</span>
<div class="candle">
<div id="flame" class="lit"></div>
</div>

<div class="cake"></div>
<div class="plate"></div>



</body>

</html>

CSS代码

@import url("https://fonts.googleapis.com/css?family=Concert+One|Pacifico");
.mobile {
  position: fixed;
  text-align: center;
  width: 100%;
  top: 50px;
  font-size: 90px;
  display: block;
}

h1, h2, span {
  display: none;
}

@media screen and (min-width: 670px) {
  .mobile {
    display: none;
  }

  h1, h2, span {
    display: block;
  }

  body {
    background: linear-gradient(to right, #e2b8f7, #d4bafa, #c7bcfb, #b9befb, #acbff9);
    cursor: crosshair;
    perspective: 1000px;
    transform-style: preserve-3d;
    font-family: "Pacifico",cursive;
  }

  h1 {
    position: fixed;
    text-align: center;
    width: 100%;
    top: 120px;
    font-size: 90px;
    background: -webkit-linear-gradient(0deg, #ceadfc 0%, #a3bbfb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Concert One', cursive;
    font-weight: 400;
    z-index: -1;
    letter-spacing: 6px;
  }

  span {
    position: fixed;
    text-align: center;
    width: 100%;
    top: 70px;
    font-size: 70px;
  }

  h2 {
    position: fixed;
    text-align: center;
    width: 100%;
    top: 50px;
    font-size: 90px;
    background: -webkit-linear-gradient(90deg, #e9e6ff 0%, white 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  bokeh {
    position: fixed;
    width: 2vmin;
    height: 2vmin;
    border-radius: 50%;
    animation-name: explosion;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: cubic-bezier(0.84, 0.02, 1, 1);
  }
  bokeh:nth-child(1) {
    background-color: #2bd8ff;
    transform: translate(70.7404476506vw, 39.2982912115vh);
    animation-duration: 2.451477853s;
    animation-delay: -3.9090695973s;
  }
  bokeh:nth-child(2) {
    background-color: #feff28;
    transform: translate(21.390916309vw, 83.9320950239vh);
    animation-duration: 2.6082661613s;
    animation-delay: -2.4177632704s;
  }
  bokeh:nth-child(3) {
    background-color: #feff28;
    transform: translate(99.4707896083vw, 50.8779038063vh);
    animation-duration: 2.3934609219s;
    animation-delay: -4.9374235187s;
  }
  bokeh:nth-child(4) {
    background-color: #ef8d22;
    transform: translate(88.0762428158vw, 60.8758646268vh);
    animation-duration: 4.3745762554s;
    animation-delay: -4.2335574629s;
  }
  bokeh:nth-child(5) {
    background-color: #feff28;
    transform: translate(87.209776097vw, 87.4722435411vh);
    animation-duration: 2.6247180243s;
    animation-delay: -0.3571633852s;
  }
  bokeh:nth-child(6) {
    background-color: #feff28;
    transform: translate(67.5348277973vw, 93.8934516001vh);
    animation-duration: 3.0630744908s;
    animation-delay: -4.4890304964s;
  }
  bokeh:nth-child(7) {
    background-color: #feff28;
    transform: translate(51.2278043561vw, 39.0030857051vh);
    animation-duration: 3.1065374294s;
    animation-delay: -4.5619134997s;
  }
  bokeh:nth-child(8) {
    background-color: #fc85e1;
    transform: translate(63.2547804674vw, 88.7449965817vh);
    animation-duration: 2.8384921355s;
    animation-delay: -0.0965491775s;
  }
  bokeh:nth-child(9) {
    background-color: #fc85e1;
    transform: translate(1.7747115187vw, 78.6520215079vh);
    animation-duration: 4.3100039072s;
    animation-delay: -0.553894004s;
  }
  bokeh:nth-child(10) {
    background-color: #ef8d22;
    transform: translate(61.1915375825vw, 46.9592056036vh);
    animation-duration: 2.6244512022s;
    animation-delay: -4.5897035553s;
  }
  bokeh:nth-child(11) {
    background-color: #ef8d22;
    transform: translate(4.3118502657vw, 31.3689335931vh);
    animation-duration: 2.9020870937s;
    animation-delay: -0.0475365525s;
  }
  bokeh:nth-child(12) {
    background-color: #fc85e1;
    transform: translate(11.7124176675vw, 39.3853134156vh);
    animation-duration: 2.7165067308s;
    animation-delay: -0.3402677425s;
  }
  bokeh:nth-child(13) {
    background-color: #fc85e1;
    transform: translate(94.2835231134vw, 15.247368654vh);
    animation-duration: 3.1761028617s;
    animation-delay: -4.3999397039s;
  }
  bokeh:nth-child(14) {
    background-color: #ef8d22;
    transform: translate(22.7721270307vw, 68.9730094645vh);
    animation-duration: 3.6217481701s;
    animation-delay: -4.3121585024s;
  }
  bokeh:nth-child(15) {
    background-color: #2bd8ff;
    transform: translate(82.1182207545vw, 11.2392421851vh);
    animation-duration: 3.4960993434s;
    animation-delay: -3.7739573258s;
  }
  bokeh:nth-child(16) {
    background-color: #2bd8ff;
    transform: translate(19.7968006723vw, 77.2717558727vh);
    animation-duration: 3.1354637591s;
    animation-delay: -2.8370634184s;
  }
  bokeh:nth-child(17) {
    background-color: #feff28;
    transform: translate(84.4109063964vw, 23.5168492096vh);
    animation-duration: 4.3723964886s;
    animation-delay: -1.7390935649s;
  }
  bokeh:nth-child(18) {
    background-color: #fc85e1;
    transform: translate(72.7671083205vw, 62.5592027903vh);
    animation-duration: 4.4313534479s;
    animation-delay: -3.0082038529s;
  }
  bokeh:nth-child(19) {
    background-color: #2bd8ff;
    transform: translate(79.3141365436vw, 1.3143345978vh);
    animation-duration: 2.392781523s;
    animation-delay: -0.261672225s;
  }
  bokeh:nth-child(20) {

最低0.47元/天解锁文章

m0_67390969

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
html之实现生日快乐的效果（拿来即用）

前端项目之生日快乐先看效果（实际上是动画，我截的屏所以是图片）：直接上代码：html部分：注意，我用的外联方式导入的css（在第十行），你可以看自己情况直接在一个页面内容上也是可以的。<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>Happy Birthday!</title><link rel="styleshee
复制链接

扫一扫