html生日祝福网站 html生日快乐网页代码 程序员专属情人节表白网站

一、网站介绍

基于html+css+js制作的表白网页代码，可以直接替换文字和图片即可使用

二、作品效果

▶️视频演示

https://live.csdn.net/v/embed/237744

(title-16-HTML5庆祝生日蛋糕烟花特效)]

截图演示

---

三、 作品代码

HTML代码

  
    
    
    
    

    
  

  
    
生日快乐 Happy birthday ❤


    
    
  

CSS代码

@charset "UTF-8";
body {
    display: grid;
    place-items: center;
    height: 100vh;
    overflow: hidden;
    font-family: 'Gloria Hallelujah', cursive;
    background: linear-gradient(#eb6383 25%, #fa9191 25% 50%, #ffe9c5 50% 75%, #b4f2e1 75%);
}

h1 {
    font-size: 6.5vw;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 2px #eb6383;
}

.char,
.word {
    display: inline-block;
}

.splitting .char {
    animation: slide-in 1s cubic-bezier(0.17, 0.84, 0.4, 1.49) both;
    animation-delay: calc(30ms * var(--char-index));
}

[data-word=""] .char {
    display: inline;
}

.splitting [data-word=""] {
    animation: bump-in 1s cubic-bezier(0.17, 0.84, 0.4, 1.49) both;
    animation-delay: 1s;
}

@keyframes slide-in {
    0% {
        transform: scale(2) rotate(60deg);
        opacity: 0;
    }
}

@keyframes bump-in {
    0% {
        transform: scale(0);
        opacity: 0;
    }
}

particule {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    box-shadow: 1px 1px 4px #eb6383;
}

---

四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）

【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app