精华内容
下载资源
问答
  • 恋爱表白神器-表白代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/biaobaishenqi1/
  • 爱心版-表白代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/aixin/
  • 520版-表白代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/520biaobai/
  • 爱情树版-表白代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/aiqingshu/
  • 程序员a版-表白代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/chengxuyuan1/
  • 程序员b版-表白代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/chengxuyuan2/
  • web开发表白代码,基于html+css+Javascript实现表白代码,抖音超火得代码。下载即可使用,带背景音乐,表白动态爱心树
  • 程序员向妹子表白专用代码,基于HTML5+CSS3实现动态网页,适合程序员表白妹子
  • 奔梦向前:学编程其实很简单,html、css、JavaScript、html5、css3、vue、Canvas实现网页特效页面、新手入门学习、了解网页动画的制作、代码实现网页动态画面-表白代码脚本-2020-04-28-1。
  • 2.打开,并复制一下的代码进文本,且保存 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>送个你</title> </head> <style> *{ ...

    废话不多说!给小白一个福利

    1.先在桌面创建一个文本文件
    在这里插入图片描述
    2.打开,并复制一下的代码进文本,且保存

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>送个你</title>
    </head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        body{
            height: 100vh;
            background: #000000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ul{
            height: 200px;
            display: flex;
        }
        li{
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background: red;
            margin-right: 20px;
        }
        li:nth-child(1){
            background: red;
            animation: love1 4s 0s infinite;
        }
        li:nth-child(2){
            background: darkturquoise;
            animation: love2 4s 0.2s infinite;
        }
        li:nth-child(3){
            background: darksalmon;
            animation: love3 4s 0.4s infinite;
        }
        li:nth-child(4){
            background: deeppink;
            animation: love4 4s 0.6s infinite;
        }
        li:nth-child(5){
            background: yellow;
            animation: love5 4s 0.8s infinite;
        }
        li:nth-child(6){
            background: deeppink;
            animation: love4 4s 1s infinite;
        }
        li:nth-child(7){
            background: darksalmon;
            animation: love3 4s 1.2s infinite;
        }
        li:nth-child(8){
            background: darkturquoise;
            animation: love2 4s 1.4s infinite;
        }
        li:nth-child(9){
            background: red;
            animation: love1 4s 1.6s infinite;
        }
    
        @keyframes love1 {
            30%,50%{
                height: 60px;
                transform: translateY(-30px);
            }
            70%,100%{
                height: 0px;
                transform: translateY(0px);
            }
        }
        @keyframes love2 {
            30%,50%{
                height: 125px;
                transform: translateY(-60px);
            }
            70%,100%{
                height: 0px;
                transform: translateY(0px);
            }
        }
        @keyframes love3 {
            30%,50%{
                height: 160px;
                transform: translateY(-75px);
            }
            70%,100%{
                height: 0px;
                transform: translateY(0px);
            }
        }
        @keyframes love4 {
            30%,50%{
                height: 180px;
                transform: translateY(-60px);
            }
            70%,100%{
                height: 0px;
                transform: translateY(0px);
            }
        }
        @keyframes love5 {
            30%,50%{
                height: 200px;
                transform: translateY(-45px);
            }
            70%,100%{
                height: 0px;
                transform: translateY(0px);
            }
        }
    
    
        h1{
            color: white;
            margin-top: 500px;
    
        }
    
    
    </style>
    <body οnmοusedοwn="change()">
    
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    
    <br>
    <h1 id="ioy"></h1>
    
    <script>
        var ioy=document.getElementById("ioy")
        function change() {
            ioy.innerHTML="I LOVE YOU! YOU ARE MY LIFE!";
    
        }
    </script>
    
    </body>
    </html>
    

    3.然后吧这个文本文件的后缀改为html
    在这里插入图片描述
    会弹出这个,按确定:
    在这里插入图片描述
    4.这样就大功告成了,直接点击打开就可以了
    在这里插入图片描述

    可以动手做一做窝!!!

    展开全文
  • ❉ 程序员正确表白方式~html+css+js绘制冬季下雪3D相册(520程序员表白代码大公开) 一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就...

    程序员正确表白方式~html+css+js绘制冬季下雪3D相册(520程序员表白代码大公开)

    一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码html+css+javascript 如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧!



    前言

    520/七夕情人节表白[雪花飘落3D相册],程序员也可以很浪漫哦 ! 程序员向妹子表白专用代码!❤
    HTML+css3+js 抖音很火的3d旋转相册-包含音乐,(送女友,表白,生日)动态生成效果,这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦!


    3D相册演示(含背景音乐)可自定义12张相片

    在线演示地址

    1. PC(电脑端)演示

    在这里插入图片描述

    2. H5(手机端)演示

    在这里插入图片描述

    代码文件目录

    在这里插入图片描述

    一、3D相册(代码实现)

    html (3D相册部分)

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>下雪特效</title>
    
        <link rel="stylesheet" href="css/style.css" />
      </head>
      <body>
        <div id="contents">
          <canvas id="canvas">This browser cannot use a canvas.</canvas>
        </div>
    
        <script src="js/script.js"></script>
    
        <div
          style="
            text-align: center;
            margin: 50px 0;
            font: normal 14px/24px 'MicroSoft YaHei';
          "
        ></div>
      </body>
    </html>
    

    js (雪花飘落部分)

    (function () {
      'use strict';
      window.addEventListener('load', function() {
        var canvas = document.getElementById('canvas');
    
        if (!canvas || !canvas.getContext) {
          return false;
        }
    
    
        function drawGround() {
          ctx.beginPath();
          ctx.fillStyle = 'rgb(255, 255, 255)';
          ctx.rect(0, Y - Y * 0.1, X, Y - Y * -0.1);
          ctx.fill();
        }
    
    
        // var
        var snowNum = 80;
        var backSnowNum = 80;
        var snows = [];
        var backSnows = [];
    
        if (X < 768) {
          snowNum = 25;
          backSnowNum = 25;
        }
         
        function Snow(ctx, x, y, r, g) {
          this.ctx = ctx;
          this.init(x, y, r, g);
        }
    
        Snow.prototype.init = function(x, y, r, g) {
          this.x = x;
          this.y = y;
          this.r = r;
          this.c = '255, 255, 255';
          this.v = {
            x: 0,
            y: g
          };
        };
    
        Snow.prototype.updatePosition = function() {
          this.y += this.v.y;
        };
        
        Snow.prototype.wrapPosition = function() {
          if (this.x - this.r > X) {
            this.x = 0;
          }
          if (this.x + this.r < 0) {
            this.x = X;
          }
          if (this.y - this.r > Y) {
            this.y = 0;
          }
          if (this.y + this.r < 0) {
            this.y = Y;
          }
        };
    
        Snow.prototype.draw = function() {
          ctx = this.ctx;
          ctx.save();
          ctx.beginPath();
          ctx.fillStyle = this.gradient();
          ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
          ctx.fill();
          ctx.closePath();
          ctx.restore();
        };
    
        Snow.prototype.gradient = function () {
          var col = this.c;
          var g = this.ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
          g.addColorStop(0, "rgba(" + col + ", " + (1 * 1) + ")");
          g.addColorStop(0.5, "rgba(" + col + ", " + (1 * 0.2) + ")");
          g.addColorStop(1, "rgba(" + col + ", " + (1 * 0) + ")");
          return g;
        };
    
        Snow.prototype.resize = function() {
          this.x = rand(0, X);
          this.y = rand(0, Y);
        };
    
        Snow.prototype.render = function() {
          this.updatePosition();
          this.wrapPosition();
          this.draw();
        };
    
        for (var i = 0; i < backSnowNum; i++) {
          var snow = new Snow(ctx, rand(0, X), rand(0, Y), rand(1, 5), Math.random());
          backSnows.push(snow);
        }
        
        for (var i = 0; i < snowNum; i++) {
          var snow = new Snow(ctx, rand(0, X), rand(0, Y), rand(10, 15), Math.random() + 0.3);
          snows.push(snow);
        }
    

    css (3D相册部分)

    html, body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
      overflow:hidden;
      background: #74ebd5;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    
    /********************
      Contents
    ********************/
    
    canvas#canvas {
      background: #74ebd5;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    

    二、3D相册裁剪(教程)

    教程如下:需要12张图片(可自定义12张)

    1-6 图片是大图 400px*400px ,01-06 图片是小图 100px*100px

    将准备好的图片,自行替换 img 文件中的图片即可!

    在这里插入图片描述

    1.相片裁剪(教程)

    首先:下载美图秀秀/百度下载/或者软件安装
    或者使用在线链接裁剪—> 在线裁剪图片链接
    在这里插入图片描述

    2.美图秀秀(电脑版)裁剪图片

    2.1选择图片裁剪
    在这里插入图片描述

    三、歌曲mp3更换教程(教程)

    如需更换mp3背景音乐,可自行下载更换即可~ mp3免费下载地址
    1.搜索需要的歌曲

    在这里插入图片描述

    2.下载
    在这里插入图片描述

    3获取歌曲id
    在这里插入图片描述

    4关注公众号以后/复制链接到浏览器打开

    在这里插入图片描述

    5下载mp3 ~下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)
    在这里插入图片描述


    四、做好的网页效果,如何通过发链接给别人看?

    1.1 解决部署上线~> 部署上线工具(可永久免费使用)

    1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
    插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取

    2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)

    1.1部署流程

    在这里插入图片描述

    1.2 哇~ 部署成功

    哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
    在这里插入图片描述


    五、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

    适合入门到高级的童鞋们入手~
    在这里插入图片描述


    六、 源码获取

    ~ 关注我,点赞博文~ 每天带你涨知识!

    1.看到这里了就 [点赞+好评+收藏] 三连~ 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

    2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

    3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

    在这里插入图片描述


    七、更多表白源码

    ❤100款表白源码演示地址

    展开全文
  • 一个移动端和手机端告白网页,基于HTML5技术实现的动态烟花背景的表白网页特效,运行本效果后烟花升空,烟花数量随机、大小和颜色随机,整体看上去很高大上的感觉,烟花效果逼真,很漂亮。另外还有一个背景音乐文件...
  • 男生向女生表白动画效果代码是一款基于HTML5和CSS3制作的男生向女生表白的动画效果代码,动画内容有白云、彩虹、黑猫。动态显示文字条幅:某某人,做我女朋友吧!。文字可以自己义,换成自己想说的话。一个专属程序员...
  • 超火动态表白H5源码

    千次阅读 多人点赞 2020-03-29 19:39:28
    抖音很火的动态表白源码,抖音上很火的表白程序,可以自定义图片,文字内容,纯HTML代码,直接上传服务器就能生成表白页面,帮助你快速追到心仪的对象,想要尝试浪漫的互联网表白方式的朋友们不妨试试吧!...

    抖音很火的动态表白源码,抖音上很火的表白程序,可以自定义图片,文字内容,纯HTML代码,直接上传服务器就能生成表白页面,帮助你快速追到心仪的对象,想要尝试浪漫的互联网表白方式的朋友们不妨试试吧!

    <!--代码开源,透明,请勿用于商业用途,完全开源模式,供大家一起探讨研究-->
    <!--如有问题(反馈)请登录 www.996ysw.com 查询最新代码-->
    <!--如果可以请在文章底部给个赞赏-->
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>我喜欢你</title> 
    <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&nbsp;&nbsp;</li>
    				<li onclick="oy_show_benefit()">No&nbsp;&nbsp;</li>
    			</ul>
    			<div id="div_oy_note" onclick="oy_hide_note()">
    				<img src="images/emoji_kelian.jpg" alt=""><br>请告诉我Yes!
    				<div id="div_oy_note_close"></div>
    			</div>
    			<div id="div_oy_yes">
    				<img src="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="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>
    //判断客户端设备,选择写入meta
    function 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><um style='color: #F44336;'>💕</um><br/><br/><br/><br/><br/><a href='https:www.996ysw.com'>更多<a/>",
    	"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"
    }; //可能为null
    console.log(start_content);
    var start_id;
    $(function() {
    	//此事件为触发互动创意
    	start_id = 'onlyyou'; //可能为null
    	init_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'; //可能为null
    var attached_content = {
    	"bool_save": false
    }; //可能为null
    console.log(attached_content);
    
    function init_attachment() { //开始attachment
    	console.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>
    

    效果
    演示地址 https://www.996ysw.com/t/b

    祝大家早日脱单!

    展开全文
  • html表白网页

    千次阅读 多人点赞 2020-05-20 16:49:48
    替换动态变化字母,搜索动态变化 替换最终定格的字母,搜索定格 替换想说的话,搜索想说的话 替换在一起的时间,搜索在一起 保存的时候,后缀名改成.html 最后建议使用电脑端的浏览器打开,手机端的兼容性没做好 代码 <...

    Readme

    然后把下面的代码随便复制到一个文本编辑器中(比如记事本)

    关键地方都有中文注释,

    替换题目:搜索title

    替换头像,搜索头像,按照方法替换即可

    替换动态变化字母,搜索动态变化

    替换最终定格的字母,搜索定格

    替换想说的话,搜索想说的话

    替换在一起的时间,搜索在一起

    保存的时候,后缀名改成.html

    最后建议使用电脑端的浏览器打开,手机端的兼容性没做好

    代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>520快乐</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <!--    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">-->
        <!--<meta itemprop="image" content="./images/fenxiang.png" />-->
        <style>
            html {
                height: 100%;
            }
    
            body {
                font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
                background: #79a8ae;
                color: #CFEBE4;
                font-size: 18px;
                line-height: 2;
                letter-spacing: 1.2px;
                margin: 0;
            }
    
            a {
                color: #ebf7f4;
            }
    
            .body--ready {
                background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
                background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
                background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
                background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
                background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
            }
    
            .text {
                position: fixed;
                bottom: 100px;
                text-align: center;
                font-size: 1.875rem;
                width: 100%;
            }
    
            .canvas {
                margin: 0 auto;
                display: block;
            }
    
            img#logo {
                width: 128px;
                background-size: cover;
                border-radius: 200px;
                box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72);
                border: 3px solid #00a0ff;
                opacity: 1;
                margin: 0 auto;
                margin-top: 20px;
                margin-bottom: 20px;
                transition: all 1.0s;
            }
    
            #logo:hover {
                box-shadow: 0 0 10px #fff;
                -webkit-box-shadow: 0 0 19px #fff;
                transform: rotate(360deg);
                -ms-transform: rotate(360deg); /* IE 9 */
                -moz-transform: rotate(360deg); /* Firefox */
                -webkit-transform: rotate(360deg); /* Safari 和 Chrome */
                -o-transform: rotate(360deg); /* Opera */
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            }
    
            .cs {
                width: 100%;
                height: 100%;
                margin: 0 auto;
                position: absolute;
                text-align: center;
            }
    
            .text {
                position: fixed;
                bottom: 80px;
                text-align: center;
                width: 100%;
                font-weight: bold;
            }
    
            .text-right {
                position: fixed;
                bottom: 50px;
                text-align: right;
                width: 100%;
                font-weight: bold;
            }
        </style>
    
    </head>
    
    <body>
    <!--头像-->
    <div class="cs">
    	<!-- src表示头像的地址,建议上传到网页,然后放链接 可以上传到这个网站http://chuantu.biz/-->
        <img src="http://chuantu.xyz/t6/734/1589961011x3703728804.png" id="logo">
    </div>
    <canvas class="canvas" width="1820" height="905"></canvas>
    <p class="text" style="color: #8ef5ff;">
        你想说的话
        <br/>
        <span id="span_dt_dt"></span>
    </p>
    <script language="javascript">
        function show_date_time() {
            window.setTimeout("show_date_time()", 1000);
    		//你俩在一起的那天
            BirthDay = new Date("4/27/2016 00:00:00");
            today = new Date();
            timeold = (today.getTime() - BirthDay.getTime());
            sectimeold = timeold / 1000
            secondsold = Math.floor(sectimeold);
            msPerDay = 24 * 60 * 60 * 1000
            e_daysold = timeold / msPerDay
            daysold = Math.floor(e_daysold);
            e_hrsold = (e_daysold - daysold) * 24;
            hrsold = Math.floor(e_hrsold);
            e_minsold = (e_hrsold - hrsold) * 60;
            minsold = Math.floor((e_hrsold - hrsold) * 60);
            seconds = Math.floor((e_minsold - minsold) * 60);
            span_dt_dt.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
        }
    
        show_date_time();
    </script>
    <script>
        var S = {
            init: function () {
                S.Drawing.init('.canvas');
                document.body.classList.add('body--ready');
                // 动态变化的话,用|分割
                S.UI.simulate("How|I|Meet|My|Dear|Pig|I|Love|You|#countdown 3|#time");
                S.Drawing.loop(function () {
                    S.Shape.render();
                });
            }
        };
    
    
        S.Drawing = (function () {
            var canvas,
                context,
                renderFn,
                requestFrame = window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback) {
                        window.setTimeout(callback, 1000 / 60);
                    };
    
            return {
                init: function (el) {
                    canvas = document.querySelector(el);
                    context = canvas.getContext('2d');
                    this.adjustCanvas();
    
                    window.addEventListener('resize', function (e) {
                        S.Drawing.adjustCanvas();
                    });
                },
                loop: function (fn) {
                    renderFn = !renderFn ? fn : renderFn;
                    this.clearFrame();
                    renderFn();
                    requestFrame.call(window, this.loop.bind(this));
                },
                adjustCanvas: function () {
                    canvas.width = window.innerWidth - 100;
                    canvas.height = window.innerHeight - 30;
                },
                clearFrame: function () {
                    context.clearRect(0, 0, canvas.width, canvas.height);
                },
                getArea: function () {
                    return {w: canvas.width, h: canvas.height};
                },
                drawCircle: function (p, c) {
                    context.fillStyle = c.render();
                    context.beginPath();
                    context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true);
                    context.closePath();
                    context.fill();
                }
            };
        }());
    
    
        S.UI = (function () {
            var interval,
                currentAction,
                time,
                maxShapeSize = 30,
                sequence = [],
                cmd = '#';
    
            function formatTime(date) {
                var h = date.getHours(),
                    m = date.getMinutes(),
                    m = m < 10 ? '0' + m : m;
                return h + ':' + m;
            }
    
            function getValue(value) {
                return value && value.split(' ')[1];
            }
    
            function getAction(value) {
                value = value && value.split(' ')[0];
                return value && value[0] === cmd && value.substring(1);
            }
    
            function timedAction(fn, delay, max, reverse) {
                clearInterval(interval);
                currentAction = reverse ? max : 1;
                fn(currentAction);
    
                if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) {
                    interval = setInterval(function () {
                        currentAction = reverse ? currentAction - 1 : currentAction + 1;
                        fn(currentAction);
    
                        if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) {
                            clearInterval(interval);
                        }
                    }, delay);
                }
            }
    
            function performAction(value) {
                var action,
                    value,
                    current;
    
                sequence = typeof (value) === 'object' ? value : sequence.concat(value.split('|'));
    
                timedAction(function (index) {
                    current = sequence.shift();
                    action = getAction(current);
                    value = getValue(current);
    
                    switch (action) {
                        case 'countdown':
                            value = parseInt(value) || 10;
                            value = value > 0 ? value : 10;
    
                            timedAction(function (index) {
                                if (index === 0) {
                                    if (sequence.length === 0) {
                                        S.Shape.switchShape(S.ShapeBuilder.letter(''));
                                    } else {
                                        performAction(sequence);
                                    }
                                } else {
                                    S.Shape.switchShape(S.ShapeBuilder.letter(index), true);
                                }
                            }, 1000, value, true);
                            break;
    
                        case 'rectangle':
                            value = value && value.split('x');
                            value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2];
    
                            S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1]))));
                            break;
    
                        case 'circle':
                            value = parseInt(value) || maxShapeSize;
                            value = Math.min(value, maxShapeSize);
                            S.Shape.switchShape(S.ShapeBuilder.circle(value));
                            break;
    
                        case 'time':
                            var t = formatTime(new Date());
    
                            if (sequence.length > 0) {
                                //定格
                                 S.Shape.switchShape(S.ShapeBuilder.letter("Nothing but You"))
                            } else {
                                timedAction(function () {
                                    t = formatTime(new Date());
                                    if (t !== time) {
                                        time = t;
                                        //定格
                                         S.Shape.switchShape(S.ShapeBuilder.letter("Nothing but You"))
                                    }
                                }, 1000);
                            }
                            break;
    
                        default:
                            S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'HacPai' : current));
                    }
                }, 2000, sequence.length);
            }
    
            return {
                simulate: function (action) {
                    performAction(action);
                }
            };
        }());
    
    
        S.Point = function (args) {
            this.x = args.x;
            this.y = args.y;
            this.z = args.z;
            this.a = args.a;
            this.h = args.h;
        };
    
    
        S.Color = function (r, g, b, a) {
            this.r = r;
            this.g = g;
            this.b = b;
            this.a = a;
        };
    
        S.Color.prototype = {
            render: function () {
                return 'rgba(' + this.r + ',' + +this.g + ',' + this.b + ',' + this.a + ')';
            }
        };
    
    
        S.Dot = function (x, y) {
            this.p = new S.Point({
                x: x,
                y: y,
                z: 5,
                a: 1,
                h: 0
            });
    
            this.e = 0.07;
            this.s = true;
    
            this.c = new S.Color(255, 255, 255, this.p.a);
    
            this.t = this.clone();
            this.q = [];
        };
    
        S.Dot.prototype = {
            clone: function () {
                return new S.Point({
                    x: this.x,
                    y: this.y,
                    z: this.z,
                    a: this.a,
                    h: this.h
                });
            },
            _draw: function () {
                this.c.a = this.p.a;
                S.Drawing.drawCircle(this.p, this.c);
            },
            _moveTowards: function (n) {
                var details = this.distanceTo(n, true),
                    dx = details[0],
                    dy = details[1],
                    d = details[2],
                    e = this.e * d;
    
                if (this.p.h === -1) {
                    this.p.x = n.x;
                    this.p.y = n.y;
                    return true;
                }
    
                if (d > 1) {
                    this.p.x -= ((dx / d) * e);
                    this.p.y -= ((dy / d) * e);
                } else {
                    if (this.p.h > 0) {
                        this.p.h--;
                    } else {
                        return true;
                    }
                }
    
                return false;
            },
            _update: function () {
                if (this._moveTowards(this.t)) {
                    var p = this.q.shift();
    
                    if (p) {
                        this.t.x = p.x || this.p.x;
                        this.t.y = p.y || this.p.y;
                        this.t.z = p.z || this.p.z;
                        this.t.a = p.a || this.p.a;
                        this.p.h = p.h || 0;
                    } else {
                        if (this.s) {
                            this.p.x -= Math.sin(Math.random() * 3.142);
                            this.p.y -= Math.sin(Math.random() * 3.142);
                        } else {
                            this.move(new S.Point({
                                x: this.p.x + (Math.random() * 50) - 25,
                                y: this.p.y + (Math.random() * 50) - 25
                            }));
                        }
                    }
                }
    
                d = this.p.a - this.t.a;
                this.p.a = Math.max(0.1, this.p.a - (d * 0.05));
                d = this.p.z - this.t.z;
                this.p.z = Math.max(1, this.p.z - (d * 0.05));
            },
            distanceTo: function (n, details) {
                var dx = this.p.x - n.x,
                    dy = this.p.y - n.y,
                    d = Math.sqrt(dx * dx + dy * dy);
    
                return details ? [dx, dy, d] : d;
            },
            move: function (p, avoidStatic) {
                if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) {
                    this.q.push(p);
                }
            },
            render: function () {
                this._update();
                this._draw();
            }
        };
    
    
        S.ShapeBuilder = (function () {
            var gap = 13,
                shapeCanvas = document.createElement('canvas'),
                shapeContext = shapeCanvas.getContext('2d'),
                fontSize = 500,
                fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif';
    
            function fit() {
                shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap;
                shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap;
                shapeContext.fillStyle = 'red';
                shapeContext.textBaseline = 'middle';
                shapeContext.textAlign = 'center';
            }
    
            function processCanvas() {
                var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data;
                dots = [],
                    pixels,
                    x = 0,
                    y = 0,
                    fx = shapeCanvas.width,
                    fy = shapeCanvas.height,
                    w = 0,
                    h = 0;
    
                for (var p = 0; p < pixels.length; p += (4 * gap)) {
                    if (pixels[p + 3] > 0) {
                        dots.push(new S.Point({
                            x: x,
                            y: y
                        }));
    
                        w = x > w ? x : w;
                        h = y > h ? y : h;
                        fx = x < fx ? x : fx;
                        fy = y < fy ? y : fy;
                    }
    
                    x += gap;
    
                    if (x >= shapeCanvas.width) {
                        x = 0;
                        y += gap;
                        p += gap * 4 * shapeCanvas.width;
                    }
                }
    
                return {dots: dots, w: w + fx, h: h + fy};
            }
    
            function setFontSize(s) {
                shapeContext.font = 'bold ' + s + 'px ' + fontFamily;
            }
    
            function isNumber(n) {
                return !isNaN(parseFloat(n)) && isFinite(n);
            }
    
            function init() {
                fit();
                window.addEventListener('resize', fit);
            }
    
            // Init
            init();
    
            return {
                imageFile: function (url, callback) {
                    var image = new Image(),
                        a = S.Drawing.getArea();
    
                    image.onload = function () {
                        shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
                        shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6);
                        callback(processCanvas());
                    };
    
                    image.onerror = function () {
                        callback(S.ShapeBuilder.letter('What?'));
                    };
    
                    image.src = url;
                },
                circle: function (d) {
                    var r = Math.max(0, d) / 2;
                    shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
                    shapeContext.beginPath();
                    shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false);
                    shapeContext.fill();
                    shapeContext.closePath();
    
                    return processCanvas();
                },
                letter: function (l) {
                    var s = 0;
    
                    setFontSize(fontSize);
                    s = Math.min(fontSize,
                        (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize,
                        (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize);
                    setFontSize(s);
    
                    shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height);
                    shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2);
    
                    return processCanvas();
                },
                rectangle: function (w, h) {
                    var dots = [],
                        width = gap * w,
                        height = gap * h;
    
                    for (var y = 0; y < height; y += gap) {
                        for (var x = 0; x < width; x += gap) {
                            dots.push(new S.Point({
                                x: x,
                                y: y
                            }));
                        }
                    }
    
                    return {dots: dots, w: width, h: height};
                }
            };
        }());
    
    
        S.Shape = (function () {
            var dots = [],
                width = 0,
                height = 0,
                cx = 0,
                cy = 0;
    
            function compensate() {
                var a = S.Drawing.getArea();
    
                cx = a.w / 2 - width / 2;
                cy = a.h / 2 - height / 2;
            }
    
            return {
                shuffleIdle: function () {
                    var a = S.Drawing.getArea();
    
                    for (var d = 0; d < dots.length; d++) {
                        if (!dots[d].s) {
                            dots[d].move({
                                x: Math.random() * a.w,
                                y: Math.random() * a.h
                            });
                        }
                    }
                },
                switchShape: function (n, fast) {
                    var size,
                        a = S.Drawing.getArea();
    
                    width = n.w;
                    height = n.h;
    
                    compensate();
    
                    if (n.dots.length > dots.length) {
                        size = n.dots.length - dots.length;
                        for (var d = 1; d <= size; d++) {
                            dots.push(new S.Dot(a.w / 2, a.h / 2));
                        }
                    }
    
                    var d = 0,
                        i = 0;
    
                    while (n.dots.length > 0) {
                        i = Math.floor(Math.random() * n.dots.length);
                        dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11);
    
                        if (dots[d].s) {
                            dots[d].move(new S.Point({
                                z: Math.random() * 20 + 10,
                                a: Math.random(),
                                h: 18
                            }));
                        } else {
                            dots[d].move(new S.Point({
                                z: Math.random() * 5 + 5,
                                h: fast ? 18 : 30
                            }));
                        }
    
                        dots[d].s = true;
                        dots[d].move(new S.Point({
                            x: n.dots[i].x + cx,
                            y: n.dots[i].y + cy,
                            a: 1,
                            z: 5,
                            h: 0
                        }));
    
                        n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1));
                        d++;
                    }
    
                    for (var i = d; i < dots.length; i++) {
                        if (dots[i].s) {
                            dots[i].move(new S.Point({
                                z: Math.random() * 20 + 10,
                                a: Math.random(),
                                h: 20
                            }));
    
                            dots[i].s = false;
                            dots[i].e = 0.04;
                            dots[i].move(new S.Point({
                                x: Math.random() * a.w,
                                y: Math.random() * a.h,
                                a: 0.3, //.4
                                z: Math.random() * 4,
                                h: 0
                            }));
                        }
                    }
                },
                render: function () {
                    for (var d = 0; d < dots.length; d++) {
                        dots[d].render();
                    }
                }
            };
        }());
        S.init();
    </script>
    <!-- 背景音乐,去这个网站搜http://y.webzcz.cn/,然后把下载链接放在src里 -->
    <audio autoplay="autoplay" loop="loop">
        <source src="http://m10.music.126.net/20200520002450/755357ef304687327ef0592119465166/ymusic/015d/0e59/055f/6779b4389493fc1454ea258faca5ed6e.mp3"
                type="audio/mpeg">
    </audio>
    </body>
    </html>
    
    
    展开全文
  • HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D立体相册</title> <link type="text/css" href="css/index.css" rel="stylesheet" /...
  • 点击图片,会出现动态效果,在右侧会出现信息收集,比如自己的名字,表白的话术以及备注,然后自己表白的名字 源代码::: <!doctype html> <html lang="zh"> <head> <meta charset=...
  • 奔梦向前:学编程其实很简单,html、css、JavaScript、html5、css3、vue、Canvas实现网页特效页面、新手入门学习、了解网页动画的制作、代码实现网页动态画面-代码实现数字代码雨-2020-06-06。
  • 七夕-心形表白-简单css代码

    千次阅读 2019-10-05 00:11:06
    今天你要和谁过? 今天你要怎么过?? 今天去哪里吃???...公司的三连问,对于一些单身狗...来吧**看效果图上代码:(静态图,实际是动态的) HTML: <div class="warp"> <div class="left">...
  • 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧! ❉ ...
  • #思路 canvas是js代码不消耗CPU 只是一个标签的大小 例如:用于直播发送弹幕比较多 他是一个画布 #做法 1.先画一个canvas画布 2.利用原始的js代码获取网页的宽高 3.画出一个字 4.把字位移到中心位置 5.别忘了speed...
  • 制作成下面这种效果: ...css代码部分: html{ background:url(../img/2.GIF) ; height: 100%; } /*最外层容器样式*/ .wrap{ position: relative; position: absolute; top: 0; right: 0; ...
  • 奔梦向前:学编程其实很简单,html、css、JavaScript、html5、css3、vue、Canvas实现网页特效页面、新手入门学习、了解网页动画的制作、代码实现网页动态画面-代码实现表白计算器-2020-04-24。
  • html+css+js实现3D表白网页(一)

    千次阅读 2020-06-09 19:51:58
    闲暇时间,把自己的一些资料整理一下,这里展示的是一个3D的立体相册页面,因为是动态的相册,整体一直在缓慢逆时针旋转,截图只能展示静态的,看起来没实际效果那么美观。 每隔几秒中间会跳出一张前置图片,有点...
  • 一年一度的/520/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧! ❤七夕...
  • HTML+css+js 抖音很火的3d旋转相册-包含音乐,(送女友,表白,生日)动态生成效果,这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采,
  • 奔梦向前:学编程其实很简单,html、css、JavaScript、html5、css3、vue、Canvas实现网页特效页面、新手入门学习、了解网页动画的制作、代码实现网页动态画面-代码实现表白树文字展现-2020-04-24-1。
  • 使用html css和js 编写的一个3D空间烟花动态页面。简单易懂易上手,电脑小白最实用的表白程序代码。3D环绕式烟花,你值得拥有。
  • 圣诞节快到了,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了,来制作属于我们程序员的浪漫吧! 演示地址:...

空空如也

空空如也

1 2 3
收藏数 50
精华内容 20
关键字:

html表白代码动态