精华内容
下载资源
问答
  • 520表白代码

    千次阅读 2021-05-11 19:38:16
    完整项目地址:520爱心表白代码 核心代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>宝贝老婆</title> <style> html, body { height: 100%; ...

    很多朋友想几个代码组合在一起,于是我做了这个效果。中间是爱心包围的照片(照片可以换多张),旁边是文字,另外还有背景音乐。
    完整项目地址—>>>520爱心表白代码
    微信扫码支付后会得到百度网盘链接和提取码。

    核心代码:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>宝贝老婆</title>
    
    <style>
    html, body {
      height: 100%;
      padding: 0;
      margin: 0;
      background: #000;
    }
    canvas {
      position: absolute;
      width: 100%;
      height: 100%;
    }</style>
    </head>
    <body>
    
    <canvas id="pinkboard"></canvas>
    
    <script>
    /*
     * Settings
     */
    </script>
    <audio autoplay="autopaly" loop="loop" id="audios" preload="auto">
        <source src="http://music.163.com/song/media/outer/url?id=526464145.mp3" />
    </audio>
    
    <style type="text/css">
    		*{margin: 0;padding: 0;}
    
    		.wrap{width: 600px;height: 400px;margin: 200px auto;position:absolute;left:30%}
    		.box{width: 200px;height: 200px;margin: 100px auto;position: relative;transition: all 3s;transform-style: preserve-3d;animation: move 3s infinite linear alternate;}
    		.box>div{width: 200px;height: 200px;font-size: 60px;opacity: .9;position: absolute;top: 0;left: 0;transition: all 1s;}
    
    		.box img{width: 200px;height: 200px;}
    
    		.left{transform: rotateY(90deg) translateZ(-100px);}
    		.right{transform: rotateY(90deg) translateZ(100px);}
    		.top{transform: rotateX(90deg) translateZ(100px);}
    		.bottom{transform: rotateX(90deg) translateZ(-100px);}
    		.after{transform: translateZ(-100px);}
    		.before{transform: translateZ(100px);}
    
    		.wrap .box:hover .left{transform: rotateY(90deg) translateZ(-160px);}
    		.wrap .box:hover .right{transform: rotateY(90deg) translateZ(160px);}
    		.wrap .box:hover .top{transform: rotateX(90deg) translateZ(160px);}
    		.wrap .box:hover .bottom{transform: rotateX(90deg) translateZ(-160px);}
    		.wrap .box:hover .after{transform: translateZ(-160px);}
    		.wrap .box:hover .before{transform: translateZ(160px);}
    
    		@keyframes move{
    			from{transform: rotateX(20deg) rotateY(0deg);}
    			to{transform: rotateX(13deg) rotateY(720deg);}
    		}
    	</style>
    </head>
    	<div class="wrap">
    		<div class="box">
    			<div class="left"><img src="./images/1.jpg" alt=""></div>
    			<div class="right"><img src="./images/1.jpg" alt=""></div>
    			<div class="top"><img src="./images/1.jpg" alt=""></div>
    			<div class="bottom"><img src="./images/1.jpg" alt=""></div>
    			<div class="after"><img src="./images/1.jpg" alt=""></div>
    			<div class="before"><img src="./images/1.jpg" alt=""></div>
    		</div>
    	</div>
    
    </body>
    </html>
    

    照片最多六张不一样的,最好裁剪成正方形。
    电脑端效果:
    在这里插入图片描述

    手机端效果:
    在这里插入图片描述

    完整项目:
    完整项目扫码下载地址—>>>520爱心表白代码
    微信扫码支付后会得到百度网盘链接和提取码。资源下载解压后里面有详细使用说明。
    在这里插入图片描述

    展开全文
  • 有任何问题私我2810735863@qq.com
  • 520表白代码HTML语言)

    千次阅读 2020-05-19 23:42:35
    DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> </head> <body> 99669999996669999996699666699666999966699666699</br> ...
    <!DOCTYPEhtml>
    <html>
         <head>
              <metacharset="UTF-8">
              <title></title>
         </head>
         <body>
              
    99669999996669999996699666699666999966699666699</br>
    99699999999699999999699666699669966996699666699</br>
    99669999999999999996699666699699666699699666699</br>
    99666699999999999966666999966699666699699666699</br>
    99666666999999996666666699666699666699699666699</br>
    99666666669999666666666699666669966996699666699</br>
    99666666666996666666666699666666999966669999996</br>
         </body>
    </html>
    

    进入网页后使用Ctrl+f进行文本搜索,
    输入数字9就会出现:I love you
    愿天下有情人终成眷属!
    上手即可使用文件链接:

    链接:https://pan.baidu.com/s/1bC8blqu4jxilgvs-SsPzMQ
    提取码:8gc9

    欢迎关注微信公众号:
    AI学习经历分享~
    回复关键词,获取编程语言,计算机基础,考研保研,四六级,机器学习,嵌入式开发资料大礼包

    在这里插入图片描述

    你好,我是千与千寻,北京大学硕士,机器学习算法开发者,CSDN粉丝数百,现为机器学习模型部署研究方向,学习包括java后端,嵌入式AI芯片开发多个领域。欢迎加我微信与交流竞赛,科研,论文,考研,保研的问题!

    展开全文
  • 520马上到了,教大家一手表白神器,单身的程序员们感觉学起来,很简单。制作步骤:1....3. 代码效果如下,双击index.html或者直接拖到浏览器中打开即可520表白神器-照片特效*{padding:0;margin:0;}...

    520马上到了,教大家一手表白神器,单身的程序员们感觉学起来,很简单。

    制作步骤:

    1. 新建代码目录,新建文件index.html,将以下代码拷贝到文件中

    2. 新建文件夹image,找12张图片放进去,修改imgae标签对应的src属性,酷炫的照片旋转就完成了。

    3. 代码效果如下,双击index.html或者直接拖到浏览器中打开即可

    520表白神器-照片特效

    *{

    padding:0;

    margin:0;

    }

    #react{

    width: 200px;

    height:200px;

    margin: 200px auto;

    transform-style:preserve-3d;

    animation:rotate 20s infinite;

    animation-timing-function: linear;

    }

    #react div{

    position:absolute;

    transition: all .4s;

    }

    div .out_pic{

    width:200px;

    height:200px;

    opacity:0.9;

    }

    div .in_pic{

    width:100px;

    height:100px;

    }

    #react span{

    display:block;

    position:absolute;

    width:100px;

    height:100px;

    top:50px;

    left:50px;

    }

    @keyframes rotate{

    from{transform: rotateX(0deg) rotateY(0deg);}

    to{transform: rotateX(360deg) rotateY(360deg);}

    }

    .out_frount{

    transform:translateZ(100px);

    }

    .out_back{

    transform:translateZ(-100px);

    }

    .out_left{

    transform:rotateY(90deg) translateZ(100px);

    }

    .out_right{

    transform: rotateY(-90deg) translateZ(100px);

    }

    .out_top{

    transform:rotateX(90deg) translateZ(100px);

    }

    .out_bottom{

    transform: rotateX(-90deg) translateZ(100px);

    }

    .in_frount{

    transform:translateZ(50px);

    }

    .in_back{

    transform:translateZ(-50px);

    }

    .in_left{

    transform:rotateY(90deg) translateZ(50px);

    }

    .in_right{

    transform: rotateY(-90deg) translateZ(50px);

    }

    .in_top{

    transform:rotateX(90deg) translateZ(50px);

    }

    .in_bottom{

    transform: rotateX(-90deg) translateZ(50px);

    }

    #react:hover .out_frount{

    transform:translateZ(200px);

    }

    #react:hover .out_back{

    transform:translateZ(-200px);

    }

    #react:hover .out_left{

    transform:rotateY(90deg) translateZ(200px);

    }

    #react:hover .out_right{

    transform: rotateY(-90deg) translateZ(200px);

    }

    #react:hover .out_top{

    transform:rotateX(90deg) translateZ(200px);

    }

    #react:hover .out_bottom{

    transform: rotateX(-90deg) translateZ(200px);

    }

    @charset "utf-8";

    /* CSS Document */

    554c3a29943ece2b2e8a6ef4304bdf1e.png

    摆脱单身就差这一步了,赶紧学起来,记得回来关注哦!

    展开全文
  • 今天竟然是520,好吧,虽然我没有女朋友,但是也得学者去讨好别人的女朋友,你说是不是,好的,来吧
  • 本文是小编基于js实现的520表白代码代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • 特效描述:html5 canvas全屏 520爱心表白 网页代码html5 canvas制作520表白日,全屏的爱心和表白语网页动画代码,浪漫的520爱心表白动画特效。代码结构1. HTML代码var hearts = [];var canvas = document....

    特效描述:html5 canvas全屏 520爱心表白 网页代码。html5 canvas制作520表白日,全屏的爱心和表白语网页动画代码,浪漫的520爱心表白动画特效。

    代码结构

    1. HTML代码

    var hearts = [];

    var canvas = document.getElementById('drawHeart');

    var wW = window.innerWidth;

    var wH = window.innerHeight;

    // 创建画布

    var ctx = canvas.getContext('2d');

    // 创建图片对象

    var heartImage = new Image();

    heartImage.src = 'img/heart.svg';

    var num = 100;

    init();

    window.addEventListener('resize', function(){

    wW = window.innerWidth;

    wH = window.innerHeight;

    });

    // 初始化画布大小

    function init(){

    canvas.width = wW;

    canvas.height = wH;

    for(var i = 0; i < num; i++){

    hearts.push(new Heart(i%5));

    }

    requestAnimationFrame(render);

    }

    function getColor(){

    var val = Math.random() * 10;

    if(val > 0 && val <= 1){

    return '#00f';

    } else if(val > 1 && val <= 2){

    return '#f00';

    } else if(val > 2 && val <= 3){

    return '#0f0';

    } else if(val > 3 && val <= 4){

    return '#368';

    } else if(val > 4 && val <= 5){

    return '#666';

    } else if(val > 5 && val <= 6){

    return '#333';

    } else if(val > 6 && val <= 7){

    return '#f50';

    } else if(val > 7 && val <= 8){

    return '#e96d5b';

    } else if(val > 8 && val <= 9){

    return '#5be9e9';

    } else {

    return '#d41d50';

    }

    }

    function getText(){

    var val = Math.random() * 10;

    if(val > 1 && val <= 3){

    return '爱你一辈子';

    } else if(val > 3 && val <= 5){

    return '感谢你';

    } else if(val > 5 && val <= 8){

    return '喜欢你';

    } else{

    return 'I Love You';

    }

    }

    function Heart(type){

    this.type = type;

    // 初始化生成范围

    this.x = Math.random() * wW;

    this.y = Math.random() * wH;

    this.opacity = Math.random() * .5 + .5;

    // 偏移量

    this.vel = {

    x: (Math.random() - .5) * 5,

    y: (Math.random() - .5) * 5

    }

    this.initialW = wW * .5;

    this.initialH = wH * .5;

    // 缩放比例

    this.targetScale = Math.random() * .15 + .02; // 最小0.02

    this.scale = Math.random() * this.targetScale;

    // 文字位置

    this.fx = Math.random() * wW;

    this.fy = Math.random() * wH;

    this.fs = Math.random() * 10;

    this.text = getText();

    this.fvel = {

    x: (Math.random() - .5) * 5,

    y: (Math.random() - .5) * 5,

    f: (Math.random() - .5) * 2

    }

    }

    Heart.prototype.draw = function(){

    ctx.save();

    ctx.globalAlpha = this.opacity;

    ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);

    ctx.scale(this.scale + 1, this.scale + 1);

    if(!this.type){

    // 设置文字属性

    ctx.fillStyle = getColor();

    ctx.font = 'italic ' + this.fs + 'px sans-serif';

    // 填充字符串

    ctx.fillText(this.text, this.fx, this.fy);

    }

    ctx.restore();

    }

    Heart.prototype.update = function(){

    this.x += this.vel.x;

    this.y += this.vel.y;

    if(this.x - this.width > wW || this.x + this.width < 0){

    // 重新初始化位置

    this.scale = 0;

    this.x = Math.random() * wW;

    this.y = Math.random() * wH;

    }

    if(this.y - this.height > wH || this.y + this.height < 0){

    // 重新初始化位置

    this.scale = 0;

    this.x = Math.random() * wW;

    this.y = Math.random() * wH;

    }

    // 放大

    this.scale += (this.targetScale - this.scale) * .1;

    this.height = this.scale * this.initialH;

    this.width = this.height * 1.4;

    // -----文字-----

    this.fx += this.fvel.x;

    this.fy += this.fvel.y;

    this.fs += this.fvel.f;

    if(this.fs > 50){

    this.fs = 2;

    }

    if(this.fx - this.fs > wW || this.fx + this.fs < 0){

    // 重新初始化位置

    this.fx = Math.random() * wW;

    this.fy = Math.random() * wH;

    }

    if(this.fy - this.fs > wH || this.fy + this.fs < 0){

    // 重新初始化位置

    this.fx = Math.random() * wW;

    this.fy = Math.random() * wH;

    }

    }

    function render(){

    ctx.clearRect(0, 0, wW, wH);

    for(var i = 0; i < hearts.length; i++){

    hearts[i].draw();

    hearts[i].update();

    }

    requestAnimationFrame(render);

    }

    展开全文
  • html爱心表白代码(最全)

    万次阅读 多人点赞 2020-12-20 18:12:32
    代码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跳动爱心</title> <style> *{ padding: 0; margin: 0; } body{ background-c
  • css html
  • 520爱心表白代码.zip

    2021-05-11 19:57:05
    这是两个表白代码的组合,十分好看。爱心包围着旋转的照片,旁边是文字,还有背景音乐。里面有详细的使用说明,包含手机端和电脑端。
  • 520版-表白代码html动态图 效果演示http://www.lmtaolu.cn/biaobai/520biaobai/
  • 520表白代码

    万次阅读 多人点赞 2019-05-20 00:00:38
    今天是一个好日子,2019年5月20日,表白的最佳时机,今天突然之间闲来无事,写了个告白程序,或许是内心的躁动吧,自己虽然是用不上了,但是还是希望与众多的单身族分享一下。废话不多,下面跟着我一起做来送给心爱...
  • 使用html做了一个 canvas全屏的520爱心表白网页代码,有兴趣的小伙伴 来看看
  • lovebody{overflow:hidden;margin:0;}h1{position:fixed;top:50%;left:0;width:100%;text-align:center;transform:translateY(-50%);font-family:'Love Ya Like A Sister', cursive;font-size:40px;...
  • html跨年表白代码

    千次阅读 多人点赞 2020-12-31 16:38:14
    今天是2020年的最后一天,最近很忙,很久没有写博客了,今天给大家一个跨年表白代码,祝大家快乐,不止今天! <!doctype html> <html> <head> <meta charset="utf-8"> <title>跨年...
  • HTML表白代码套餐

    2021-01-11 16:45:08
    一个表白代码套餐,只需要修改名字和恋爱时间即可使用
  • HTML-表白代码

    千次阅读 2020-11-08 13:01:24
    不要走开,表白代码资源在文末 小伙伴们好久不见,鸽了好久了,看来还是我太懒了呀!这段时间一直处于输入状态,输出不够,还请大家理解呀~ 同时,Aime菌公众号的用户数终于来到了三位数,前段时间收到了公众号的第...
  • HTML5七夕情人节表白代码是一款基于canvas制作的520表白主题页面代码
  • 失去抵抗力的表白方式html表白代码
  • web开发表白代码,基于html+css+Javascript实现表白代码,抖音超火得代码。下载即可使用,带背景音乐,表白动态爱心树
  • DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link href="favicon.ico" rel="shortcut ...
  • 表白代码HTML

    千次阅读 多人点赞 2020-12-23 09:37:17
    3.打开并且把一下代码复制并粘贴到biaobai.txt <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=...
  • html表白代码.zip

    2021-05-19 14:17:48
    520、情人节等节日必备表白神器
  • 520表白html项目

    2019-05-23 21:43:31
    这个项目是关于html5的520表白项目

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,065
精华内容 1,626
关键字:

html520表白代码