html浪漫文字表白代码

已于 2024-12-17 23:43:26 修改
阅读量407 收藏
点赞数 3
文章标签： html css 前端
于 2024-12-17 23:42:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76829730/article/details/144547113
版权

本人在校高中生，闲得无聊，写了个简易的html表白代码，喜欢的可以拿走

效果展示

代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>❤</title>
    <link href="https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(135deg, #000000, #1a0011);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #fff;
        }

        #love-container {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .love-text {
            position: fixed;
            left: 50%;
            top: 50%;
            transform-origin: center;
            font-size: 32px;
            opacity: 0;
            font-family: 'Bubblegum Sans', cursive;
            writing-mode: vertical-lr;
            text-orientation: upright;
            letter-spacing: 8px;
            white-space: nowrap;
            z-index: 1;
            color: #fff;
            text-shadow: 0 0 10px #ff69b4,
                        0 0 20px #ff69b4;
            will-change: transform, opacity;
            animation-timing-function: ease-in-out;
            pointer-events: none;
        }

        @keyframes floatFromTop {
            0% {
                opacity: 0;
                transform: translate(-50%, -150vh) scale(0.8);
            }
            30% {
                opacity: 0.3;
                transform: translate(
                    calc(-50% + var(--startX)),
                    calc(-50% + var(--startY))
                ) scale(0.9);
            }
            50% {
                opacity: 1;
                transform: translate(
                    calc(-50% + var(--startX)),
                    calc(-50% + var(--startY))
                ) scale(1);
            }
            80% {
                opacity: 1;
                transform: translate(
                    calc(-50% + var(--moveX)),
                    calc(-50% + var(--moveY))
                ) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(
                    calc(-50% + var(--moveX)),
                    calc(-50% + var(--moveY) + 20vh)
                ) scale(0.8);
            }
        }

        @keyframes floatFromBottom {
            0% {
                opacity: 0;
                transform: translate(-50%, 150vh) scale(0.8);
            }
            30% {
                opacity: 0.3;
                transform: translate(
                    calc(-50% + var(--startX)),
                    calc(-50% + var(--startY))
                ) scale(0.9);
            }
            50% {
                opacity: 1;
                transform: translate(
                    calc(-50% + var(--startX)),
                    calc(-50% + var(--startY))
                ) scale(1);
            }
            80% {
                opacity: 1;
                transform: translate(
                    calc(-50% + var(--moveX)),
                    calc(-50% + var(--moveY))
                ) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(
                    calc(-50% + var(--moveX)),
                    calc(-50% + var(--moveY) - 20vh)
                ) scale(0.8);
            }
        }

        @keyframes floatFromLeft {
            0% {
                opacity: 0;
                transform: translate(-150vw, -50%) scale(0.8);
            }
            30% {
                opacity: 0.3;
                transform: translate(
                    calc(-50% + var(--startX)),
                    calc(-50% + var(--startY))
                ) scale(0.9);
            }
            50% {
                opacity: 1;
                transform: translate(
                    calc(-50% + var(--startX)),
                    calc(-50% + var(--startY))
                ) scale(1);
            }
            80% {
                opacity: 1;
                transform: translate(
                    calc(-50% + var(--moveX)),
                    calc(-50% + var(--moveY))
                ) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(
                    calc(-50% + var(--moveX) + 20vw),
                    calc(-50% + var(--moveY))
                ) scale(0.8);
            }
        }

        @keyframes floatFromRight {
            0% {
                opacity: 0;
                transform: translate(150vw, -50%) scale(0.8);
            }
            30% {
                opacity: 0.3;
                transform: translate(
                    calc(-50% + var(--startX)),
                    calc(-50% + var(--startY))
                ) scale(0.9);
            }
            50% {
                opacity: 1;
                transform: translate(
                    calc(-50% + var(--startX)),
                    calc(-50% + var(--startY))
                ) scale(1);
            }
            80% {
                opacity: 1;
                transform: translate(
                    calc(-50% + var(--moveX)),
                    calc(-50% + var(--moveY))
                ) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(
                    calc(-50% + var(--moveX) - 20vw),
                    calc(-50% + var(--moveY))
                ) scale(0.8);
            }
        }

        /* 主按钮样式 */
        #mainButton {
            position: relative;
            z-index: 10;
            pointer-events: auto;
            padding: 15px 30px;
            font-size: 18px;
            background: rgba(255, 105, 180, 0.8);
            border: none;
            border-radius: 8px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);
            overflow: hidden;
            font-family: 'Bubblegum Sans', cursive;
            font-size: 18px;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(5px);
        }

        #mainButton:hover {
            background: rgba(255, 105, 180, 0.9);
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(255, 105, 180, 0.7);
        }

        #mainButton:active {
            transform: scale(0.95);
        }

        .ripple {
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }

        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        .button-container {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 100;
            pointer-events: auto;
        }

        /* 添加按钮消失的动画 */
        @keyframes buttonVanish {
            0% {
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
                opacity: 1;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2) rotate(180deg);
                opacity: 0.5;
            }
            100% {
                transform: translate(-50%, -50%) scale(0) rotate(360deg);
                opacity: 0;
            }
        }

        .button-container.vanish {
            animation: buttonVanish 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
    </style>
</head>
<body>
    <div id="love-container"></div>
    <div class="button-container">
        <button id="mainButton" onclick="handleBiuClick(event)">Biu Biu~</button>
    </div>
    <audio id="bgMusic" src="https://music.163.com/song/media/outer/url?id=2622667253.mp3" preload="auto"></audio>

    <script>
        // 定义全局变量
        let isAnimating = false;

        function createLoveText() {
            const container = document.getElementById('love-container');
            
            if (container.children.length > 120) {
                return;
            }

            const text = document.createElement('div');
            text.className = 'love-text';
            
            // 随机选择动画
            const animations = ['floatFromTop', 'floatFromBottom', 'floatFromLeft', 'floatFromRight'];
            const randomAnim = animations[Math.floor(Math.random() * animations.length)];
            
            // 随机起始和结束位置
            const startX = (Math.random() - 0.5) * 160;
            const startY = (Math.random() - 0.5) * 160;
            
            // 计算移动距离，减小移动范围
            const moveX = startX + (Math.random() - 0.5) * 20; 
            const moveY = startY + (Math.random() - 0.5) * 20;
            
            // 设置CSS变量
            text.style.setProperty('--startX', `${startX}vw`);
            text.style.setProperty('--startY', `${startY}vh`);
            text.style.setProperty('--moveX', `${moveX}vw`);
            text.style.setProperty('--moveY', `${moveY}vh`);

            // 随机大小
            const size = 20 + Math.random() * 16;
            text.style.fontSize = `${size}px`;

            // 设置动画时间（15-25秒）
            const duration = 15 + Math.random() * 10;
            text.style.animation = `${randomAnim} ${duration}s cubic-bezier(0.1, 0.1, 0.1, 1)`;
            
            // 随机文字
            const texts = [
                'L○ve',
                'Sweet',
                'Kiss',
                'Heart',
                '你是唯一',
                '我喜欢你',
                '想和你在一起',
                'Dear',
                '♥',
                'U & Me',
                '天天想着你',
                'Always',
                'I want to be with you',
                'Miss U',
                'Honey',
                '520',
                'XOXO',
                'Luv U',
                'Together',
                'Baby',
                'girl',
                'Be my girlfriend',
                'Darling',
                'U my darling',
                '心动',
                '喜欢',
                '一见钟情',
                '遇见你',
                '最美的意外',
                '我的唯一',
                '最重要的人',
                'My Dream',
                'Forever',
            ];
            const randomText = texts[Math.floor(Math.random() * texts.length)];
            text.innerHTML = randomText.split('').join('<br>');
            
            container.appendChild(text);

            // 动画结束后移除元素
            text.addEventListener('animationend', () => {
                if (text.parentNode === container) {
                    container.removeChild(text);
                }
            });
        }

        // 使用不同的时间间隔创建文字
        function startCreatingText() {
            createLoveText();
            const nextTime = 50 + Math.random() * 100;
            setTimeout(startCreatingText, nextTime);
        }

        // 初始快速填充
        function initialFill() {
            for (let i = 0; i < 40; i++) {
                setTimeout(() => createLoveText(), i * 50);
            }
        }

        function createRipple(event) {
            const button = event.currentTarget;
            const ripple = document.createElement('div');
            const rect = button.getBoundingClientRect();
            
            const size = Math.max(rect.width, rect.height);
            ripple.style.width = ripple.style.height = `${size}px`;
            
            ripple.style.left = `${event.clientX - rect.left - size/2}px`;
            ripple.style.top = `${event.clientY - rect.top - size/2}px`;
            
            ripple.className = 'ripple';
            button.appendChild(ripple);
            
            ripple.addEventListener('animationend', () => {
                ripple.remove();
            });
        }

        function handleBiuClick(event) {
            if (isAnimating) return;
            isAnimating = true;

            const button = event.currentTarget;
            const buttonContainer = document.querySelector('.button-container');
            const audio = document.getElementById('bgMusic');
            
            createRipple(event);
            audio.play().catch(e => console.log('Music autoplay failed:', e));
            
            // 添加按钮消失动画
            buttonContainer.classList.add('vanish');
            
            // 开始创建漂浮文字
            setTimeout(() => {
                startCreatingText();
                initialFill();
            }, 400);
        }

        // 页面加载时预加载音乐
        document.addEventListener('DOMContentLoaded', function() {
            const audio = document.getElementById('bgMusic');
            audio.load();
        });
    </script>
</body>
</html>

使用的音乐：Hours

链接：https://music.163.com/song/media/outer/url?id=2622667253.mp3
大佬们可以在原有基础上进行改进

(●ˇ∀ˇ●)

NCPDv
关注
HTML——表白（效果+代码）
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
03-03 2万+
目录效果代码说明 效果 代码 demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=ed
浪漫页面表白（附代码）
05-21
此代码支持修改，页面的浪漫性极高，是表白的不二之选。
前端HTML浪漫表白
06-19
浪漫变白，浪漫变白，浪漫变白，浪漫变白，浪漫变白，浪漫变白
HTML表白源码
06-29
HTML网页表白程序源码 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢!]
超浪漫！用 HTML 实现的互动情书贺卡源码来袭
最新发布
weixin_44975687的博客
03-27 655
家人们，今天我要给大家分享一个超赞的 HTML 源码 —— 互动情书贺卡！在这个数字化的时代，用代码写情书已经成为了一种独特又浪漫的表达方式。这份源码就为我们提供了一个绝佳的范例，让我们可以借助代码的力量，向心爱的人传达深情厚意。
HTML5七夕情人节表白结婚邀请函网页制作(HTML+CSS+JavaScript)
HTML网页设计 专注大学生网页设计
09-25 7635
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现。
HTML & CSS 编织的浪漫表白代码
weixin_52814911的博客
10-28 2045
这段代码是一个使用 HTML、CSS 和 JavaScript 实现的网页，主要功能是在页面上展示一个动态的心形图案，由许多粒子组成。
html表白代码
热门推荐
酷酷的馫博客
11-26 2万+
html表白代码
html表白特效源代码《浪漫的html表白源代码，html表白网页制作源码》
02-02
html表白特效源代码《浪漫的html表白源代码，html表白网页制作源码》 可以玩的网页 节日送给女朋友 礼物【修正版】 打开网页 会出现心形排列的字母 用鼠标移动字母 从左到右排列成 MerryChristmas 会有奇迹出现 点开试试吧 定会让你的女生感动不已 PS：里面的文字和照片是鄙人和我女友的，亲们记得换成自己想说的话和想要的照片，祝福每对情侣开心幸福！
HTML浪漫动态表白代码
02-09
在本主题中，"HTML浪漫动态表白代码"指的是利用HTML的特性来构建一种富有情感表达和视觉效果的页面，通常这种页面会包含动画、特效以及背景音乐，旨在创造一个浪漫的氛围，用于向某人表白。 首先，HTML的基本结构...
html浪漫告白网页
10-28
爱情都是从告白开始的！告白是必须迈出的第一步。独属于IT民工的告白方式！内容文字方便替换！
html表白源码
03-31
html网页表白专用程序源码 可用来纪念 时间
表白html源码
01-16
html5表白模板，html5表白模板，html5表白模板，html5表白模板，html5表白模板，html5表白模板
基于HTML+CSS+JS的情人节浪漫表白代码。
02-13
基于HTML+CSS+JS的情人节浪漫表白代码。解压即可。
酷炫浪漫表白页面（附代码）
05-21
此代码支持修改，本页面充满浪漫，是表白的不二之选。
520程序员前端表白代码，使用 HTML、CSS 和 JavaScript 编写一段浪漫的代码，用于表达爱意
05-16
这段浪漫代码是通过HTML、CSS和JavaScript编写的，通过结合这三种前端技术，我们创建了一个令人心动的情人节表白页面。包含了逐行打印文字、变色效果和玫瑰花的飘落等特效。它能够营造出浪漫的氛围，并用创意的方式...
love easy demo HTML浪漫表白代码
08-21
在本示例中，"love easy demo HTML浪漫表白代码" 是一个利用HTML技术制作的创意应用，旨在为特殊场合如520（我爱你）、情人节、生日或求婚提供一种浪漫的表达方式。通过这个项目，你可以了解到如何用HTML来构建互动...
html5粒子效果浪漫表白特效特效代码
03-20
在本案例中，"html5粒子效果浪漫表白特效特效代码" 是一个利用HTML5的强大功能创建的互动视觉效果，特别适用于创建浪漫的表白场景。这个特效代码通过粒子系统实现了动态的文字动画，营造出梦幻而浪漫的氛围。 粒子...
我喜欢你表白代码html
01-13
我喜欢你表白代码html，因为它简洁而直接，就像我对你的感情一样。在html代码中，我可以用简单的标签和属性来表达我对你的喜欢和爱意，就像用简单的文字和颜色来展现网页的美丽和魅力一样。我喜欢你表白代码html，因为它可以让我用不同的方式来展现我的情感，就像在网页中使用不同的元素和布局来展现不同的风格和效果一样。我喜欢你表白代码html，因为它是一种沟通的方式，可以让我用我的代码来传达我的心声，就像我用文字和语言来表达对你的思念和关怀一样。无论是在网页中还是在现实生活中，我都喜欢用我的方式来表达我的情感，所以我喜欢你表白代码html。希望你能明白，我的心里只有你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值