表白代码抖音很火的卡通H5动态表白源码HTML+CSS，七夕情人节代码，520代码
2024-05-17 15:47:11
作品介绍
查看更多关于 抖音 的文章
很火的卡通H5动态表白源码，搭起来发给你心爱的人向她表白吧
纯html的源码，上传就可以打开使用啦!
用代码编辑器或记事本打开可修改你要表白的内容、名字等
效果图
效果地址：http://luoyujin0511.gitee.io/ta/
部分代码
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>我喜欢你</title><!-- style 懒人源码lanrenzhijia.com --><link type="text/css" rel="stylesheet" href="css/theme.css"><script src="js/jquery-2.0.3.min.js"></script>
</head><body><div id="div_container"><!-- 最外层div，用于居中兼容PC和移动 --><div id="div_start_bg"></div><div id="div_onlyyou"><!-- 用于设置背景 --><div id="div_oy_inner"><!-- 用于存放content --><div class="div_oy_text"><h1></h1><img class="img_oy_text" src=""><p class="p_oy_text"></p><ul id="ul_oy_benefit"><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li><li class="li_oy_benefit"></li></ul></div><ul id="ul_oy_btn"><li onclick="oy_go_next()">Yes ?</li><li onclick="oy_show_benefit()">No ?</li></ul><div id="div_oy_note" onclick="oy_hide_note()"><img src="data:images/emoji_kelian.jpg" alt=""><br>请告诉我Yes！<div id="div_oy_note_close">?</div></div><div id="div_oy_yes"><img src="data:images/emoji_bixin.jpg" alt=""><br>太好了！哈哈~</div></div></div><div class="div_pure_words"><div class="div_pure_words_bg"><div class="div_pure_words_height"></div></div><div class="div_pw_typed"><span id="span_pw_typed"></span></div></div><div id="div_btn_container"><div id="div_btn_inner"><div class="div_music_tips"></div><div class="div_btn" id="div_music" onclick="music_switch()"><!-- 音乐按钮部分 --><img id="img_music" src="data:images/music_note_big.png"style="-webkit-animation:music_play_rotate 1s linear infinite"><!-- 您的浏览器不支持播放音乐 --><audio id="audio_music" autoplay="autoplay" loop="loop"><source type="audio/mpeg" /></audio></div><div class="div_record_tips"></div><div class="div_btn" id="div_record" onclick="record_switch()"><audio id="audio_record" loop="loop"><source type="audio/mpeg" /></audio></div></div></div></div><script>//判断客户端设备，选择写入metafunction init_viewport() {if (navigator.userAgent.indexOf('Android') != -1) {var version = parseFloat(RegExp.$1);if (version > 2.3) {var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;var phoneScale = parseInt(width) / 500;document.write('<meta name="viewport" content="width=500, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');} else {document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">');}} else if (navigator.userAgent.indexOf('iPhone') != -1) {var phoneScale = parseInt(window.screen.width) / 500;document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale + ', maximum-scale=' + phoneScale + ', user-scalable=0" /> '); //0.75 0.82} else {document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '); //0.75 0.82}}init_viewport();var theme = 'pure_words';console.log('theme ->' + theme);var theme_content = {"pure_words_content": "遇见你是我所有美好故事的开始，所以，请别放开我的手，也别缺席我的将来，因为一辈子和你在一起才叫将来<um style='color: #F44336;'>??</um>","typed_bool": "typed_y","cursor_char": "cursor_heart","bg_style_pure_words": "bg_opacity","bg_img": "images/3.jpg","simple_page_content": "","video_page_content": ""};console.log(theme_content);var music_json = {"music_select": "m_online","m_online_id": "7","m_online_url": "images/1.mp3","m_upload_name": "null","m_upload_url": "null"};console.log(music_json);var record_json = {"record_bool": "r_false","r_wechat_time": "null","r_wechat_url": "null","r_wechat_amr": "null"};console.log(record_json);var main_title = '我喜欢你??';// console.log(main_title);if (main_title == '' || main_title == 'null') { //允许标题为空document.title = '慢慢喜欢你';}var window_height = $(window).height();console.log('window_height ->' + window_height);var pure_words_content = theme_content['pure_words_content'];var str_cursorChar;var typed_bool;var interval_pw_height;var height_div_pw = $(".div_pure_words_height").height();function init_pure_words() {$(".div_pure_words_height").html(pure_words_content + '22222'); //初始化复制内容，撑开文档高度 // 初始化设置div的bg图片 初始化设置div的bg图片if (typeof (theme_content['bg_style_pure_words']) != 'undefined' && theme_content['bg_style_pure_words'] == 'bg_opacity') {if (typeof (theme_content['bg_img']) != 'undefined' && theme_content['bg_img'] != '') {$(".div_pure_words_bg").css({"background-image": "url(" + theme_content['bg_img'] + ")"});}}//以下是打字效果的js if (typeof (theme_content['cursor_char']) != 'undefined' && theme_content['cursor_char'] != '') {switch (theme_content['cursor_char']) { //设置打字光标的样式case 'cursor_heart':str_cursorChar = '<um style="color: #F44336;">?</um>';break;case 'cursor_sub':str_cursorChar = '_';break;case 'cursor_music':str_cursorChar = '?';break;case 'cursor_star':str_cursorChar = '★';break;case 'cursor_sun':str_cursorChar = '?';break;default:str_cursorChar = '|';}} else { //处理全新作品，默认显示打字效果str_cursorChar = '?';}//判断用户有没有选择打字效果if (typeof (theme_content['typed_bool']) != 'undefined' && theme_content['typed_bool'] != '') {typed_bool = theme_content['typed_bool'] == 'typed_y' ? true : false;} else {typed_bool = false; //默认显示打字效果}display_pure_words();$(".div_pure_words").fadeIn();interval_pw_height = setInterval(function () {console.log('div_pure_words_height -> ' + $('.div_pure_words_height').height());var least_height_div_pw = $('.div_pure_words_height').height();if (least_height_div_pw > height_div_pw) {height_div_pw = least_height_div_pw;} else {clearInterval(interval_pw_height);$(".div_pure_words_height").height(least_height_div_pw + 100);if ($(".div_pure_words_height").height() < window_height) {$(".div_pure_words_height").height(window_height); //不能小于窗口的高度console.log('let us be high as window');}}}, 100);}function display_pure_words() {if (typed_bool) {var typed_pure_words = new Typed('#span_pw_typed', {strings: [pure_words_content],//输入内容, 支持html标签typeSpeed: 120,//打字速度cursorChar: str_cursorChar,//替换光标的样式contentType: 'html',//值为html时，将打印的文本标签直接解析html标签onComplete: function (abc) {// console.log(abc); console.log('finished typing words');// console.log($('#span_pw_typed').height()-$(".div_pure_words_height").height());},});} else {//如果不需要打字效果就直接显示$("#span_pw_typed").html(pure_words_content).fadeIn();}init_attachment();}var start_content = {chase_title: "凤姐做我女朋友好不好<um style='color: #F44336;'>??</um>",chase_text: "承蒙你的出现，够我喜欢好多年，我希望，以后你能用我的名字拒绝所有人<um style='color: #F44336;'>??</um>",chase_benefit: ["你是我拔掉氧气罐都想吻的人", "你是我跑完8000米还想拥抱的人", "你是我自罚三杯都不肯开口的秘密", "你是我赴汤蹈火都不肯放下的执着", "你是我电量只剩1%也想回信息的人", "你是我穷极一生不想醒来的梦"],bg_style: "bg_custom",bg_img: "images/2.jpg",img_bool: "img_true",img_src: "images/1.gif"}; //可能为nullconsole.log(start_content);var start_id;$(function () {//此事件为触发互动创意start_id = 'onlyyou'; //可能为nullinit_start(start_id);});function init_start(start_id) {console.log('init_start ->' + start_id);switch (start_id) {case 'loveformat':$('.div_loveformat').show();init_loveformat();break;case 'hearttree':$('#div_hearttree').show();init_hearttree();break;case 'courage':$('#div_courage').show();init_courage();break;case 'birthdaycake':$('#div_dbcake').show();init_birthdaycake();break;case 'intersect':$('#div_intersect').show();init_intersect();break;case 'onlyyou':$('#div_onlyyou').show();init_onlyyou();break;default:init_theme();}}//开始动画主体部分function init_theme() {console.log('init_theme');$('#div_start_bg').fadeOut();init_pure_words();}var attachment = 'null'; //可能为nullvar attached_content = {"bool_save": false}; //可能为nullconsole.log(attached_content);function init_attachment() { //开始attachmentconsole.log('init_attachment ->' + attachment);switch (attachment) {case 'timer':init_at_timer();break;default:return;}}</script><!-- JQuery --><script src="js/typed.min.js"></script><script src="js/start_onlyyou.js"></script><script src="js/jweixin-1.2.0.js"></script><script src='js/theme_common.js'></script>
</body></html>
前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
源码获取（可关注↓公众号 ：web前端成长家园获取更多源码 !）
~ 关注我，点赞博文~ 每天带你涨知识!
1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、生活及表白页面等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题可以相互学习，可关注↓公众号 ：[web前端成长家园]获取更多源码 !
表白代码抖音很火的卡通H5动态表白源码HTML+CSS，七夕情人节代码，520代码相关推荐
- wpf 模拟抖音很火的罗盘时钟，附源码，解压就能跑
wpf 模拟抖音很火的罗盘时钟,附源码,解压就能跑 前端时间突然发现,抖音火了个壁纸,就是黑底蕾丝~~~ 错错错,黑底白字的罗盘时钟! 作为程序员的我,也觉得很新颖,所以想空了研究下,这不,空下来了 ...
- wpf 模拟抖音很火的罗盘时钟，附源码，下载就能跑
wpf 模拟抖音很火的罗盘时钟,附源码 前端时间突然发现,抖音火了个壁纸,就是黑底蕾丝~~~ 错错错,黑底白字的罗盘时钟! 作为程序员的我,也觉得很新颖,所以想空了研究下,这不,空下来了就用wpf, ...
- 抖音很火的设备性能在线测试HTML源码
正文: 抖音很火的设备性能在线测试HTML源码,电脑和手机CPU性能测试,滑动放大3D模型看看你的手机能不能跑满帧~ 程序: wwhgr.lanzoue.com/irITj0aq6t9g 图片:
- 用html语言制作表白动画,抖音很火的卡通做我女朋友表白html源码
资源使用说明: 纯HTML的源码,上传就可以打开使用啦! 右键index.html记事本可修改你要表白的内容.名字等. HTML是用来做网站的一种语言哈.这样吧.你打开一个网页百.然后再网页任何一个地 ...
- 抖音很火的卡通表白动态页面
文章目录 抖音很火的卡通表白动态页面 表白网站简介 视频演示 资源下载 抖音很火的卡通表白动态页面 表白网站简介 很多小伙伴想在5.20 给女朋友一个惊喜,今天我给大家分享一个抖音很火对策卡通表白动态 ...
- 抖音表白整蛊HTML代码,抖音很火的弹窗表白整蛊怎么弄？抖音表白整蛊弹窗设置方法...
最近抖音出了一种新玩法,就是弹窗表白整蛊,那抖音很火的弹窗表白整蛊是怎么弄的呢?一起来看看抖音表白整蛊弹窗设置方法吧. 1.直接在电脑上打开一个记事本 输入一下内容 asgbox("我知道你 ...
- 花了30分钟,给女朋友们写了个最近抖音很火的3D立体动态相册
鉴于蛮多人私信我问我要源码的(虽然源码我就贴在下面,无奈摊手.jpg), 我想可能是他们想知道这个东西是怎么写的,所以我还是把思路写出来吧 我们先看效果 效果 代码 <!doctype html ...
- 有趣的编程代码表白_抖音很火的创意二维码，无法拒绝的表白“做我女朋友”...
知乎视频www.zhihu.com 最近抖音流行一种非常好玩的表白二维码,扫描打开之后显示"做我女朋友好不好",下面是对方的照片和一段情书,还有两个可互动的选项按钮:一个肯定,一 ...
- 抖音很火的召唤神龙的小游戏完整代码-召唤神龙
抖音很火的解压小游戏,完整代码分享.有兴趣的可以试着写一下. 1. index <!DOCTYPE html> <html> <head><meta cha ...
最新文章
- 如何使用BigDecimal?
- wxpython多个面板_wxpython:隐藏其中一个拆分窗口面板
- [USACO11NOV]牛的障碍Cow Steeplechase（匈牙利算法）
- C / C++ 软件项目的目录结构
- A first successfully deployed Java application in HCP
- I.MX6 查看baudrate确定是否被其他程序占用
- eclipse不能调试某个文件的解决办法
- 190518每日一句
- 各种cms getshell技巧
- 阿尔伯塔计算机科学学费,留学360发布阿尔伯塔大学学费
- IDEA 配置 maven
- 字节跳动半夜给员工发钱，全员沸腾了
- C语言练习之温度转换
- MultiValueMap是什么？怎么使用？
- 火影专场:Redis分布式锁实战
- 高性能数据库引擎 CoolHash 产品宣言 Fourinone4.0版新特性（转）
- U盘引导盘制作工具 Rufus 3.13.1730 正式版
- html垂直居中vertical,利用vertical-align:middle垂直居中
- 100+文档格式预览，私有化部署，10分钟搭建专属IM
- ICS/SCADA虚拟化的安全性影响：调查和未来趋势