AI 助理
备案控制台
开发者社区 云计算 文章 正文

十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！（四）

2023-11-28 61
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！

十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！（三）https://developer.aliyun.com/article/1385458


特效五

部分代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>zhaoyeming</title>
    <link rel="stylesheet" href="css/hovertree.css" />
  </head>
  <body>
    <div class="hovertreeinfo">
      <h2></h2>
    </div>
    <!-- 仅自动播放音乐 -->
    <audio loop src="img/qianyuqianxun.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>
    <script type="text/javascript">
    //--创建页面监听，等待微信端页面加载完毕 触发音频播放
    document.addEventListener('DOMContentLoaded', function () {
      function audioAutoPlay() {
        var audio = document.getElementById('audio');
          audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
          audio.play();
        }, false);
      }
      audioAutoPlay();
    });
    //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
    document.addEventListener('touchstart', function () {
      function audioAutoPlay() {
        var audio = document.getElementById('audio');
          audio.play();
      }
      audioAutoPlay();
    });
    </script>
    <!--/*外层最大容器*/-->
    <div class="wrap">
      <!--  /*包裹所有元素的容器*/-->
      <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
          <img src="img/img01.jpg " class="pic" />
        </div>
        <!--后面图片 -->
        <div class="out_back">
          <img src="img/img02.jpg" class="pic"/>
        </div>
        <!--左图片 -->
        <div class="out_left">
          <img src="img/img03.jpg" class="pic" />
        </div>
        <div class="out_right">
          <img src="img/img04.jpg" class="pic" />
        </div>
        <div class="out_top">
          <img src="img/img05.jpg" class="pic" />
        </div>
        <div class="out_bottom">
          <img src="img/img06.jpg" class="pic" />
        </div>
        <!--小正方体 -->
        <span class="in_front">
          <img src="img/img07.jpg" class="in_pic" />
        </span>
        <span class="in_back">
          <img src="img/img08.jpg" class="in_pic" />
        </span>
        <span class="in_left">
          <img src="img/img09.jpg" class="in_pic" />
        </span>
        <span class="in_right">
          <img src="img/img10.jpg" class="in_pic" />
        </span>
        <span class="in_top">
          <img src="img/img11.jpg" class="in_pic" />
        </span>
        <span class="in_bottom">
          <img src="img/img12.jpg" class="in_pic" />
        </span>
      </div>
    </div>
  </body>
</html>

特效六

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>爱心</title>
  <style>
    *{margin:0; padding:0;}
    body{ background-color: #1E1E1E;    }
  </style>
</head>
<body>
  <canvas id="drawHeart"></canvas>
  <script>
    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);
    }
  </script>
</body>
</html>

特效七

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas五彩斑斓的粒子动画特效</title>
    <style>
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            background: hsla(242, 30%, 5%, 1);
        }
        canvas {
            width: 100%;
        }
    </style>
</head>
<body>
    <canvas id='canv'></canvas>
    <script>
        /*
        (Book REF) HTML5 Canvas Ch. 5:  Math, Physics, and Animation ::: Uniform Circular Motion
        By Steve Fulton and Jeff Fulton
        */
        window.requestAnimFrame = (function () {
            return window.requestAnimationFrame ||
              window.webkitRequestAnimationFrame ||
              window.mozRequestAnimationFrame ||
              window.oRequestAnimationFrame ||
              window.msRequestAnimationFrame ||
              function (callback) {
                  window.setTimeout(callback, 1000 / 60);
              };
        })();
        window.addEventListener('load', start, false);
        var c,
          $,
          w,
          h,
          msX,
          msY,
          midX,
          midY,
          num = 650,
          parts = [],
          begin = 50,
          repeat = 20,
          end = Math.PI * 2,
          force = null,
          msdn = false;
        function start() {
            c = document.getElementById('canv');
            $ = c.getContext('2d');
            w = c.width = window.innerWidth;
            h = c.height = window.innerHeight;
            midX = w / 2;
            midY = h / 2;
            force = Math.max(w, h) * 0.09;
            flow = begin;
            window.requestAnimFrame(create);
            run();
        }
        function run() {
            window.requestAnimFrame(run);
            go();
        }
        function Part() {
            this.deg = 0;
            this.rad = 0;
            this.x = 0;
            this.y = 0;
            this.distX = 0;
            this.distY = 0;
            this.color = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 50) + ',' + Math.floor(Math.random() * 100) + ')';
            this.size;
        }
        function create() {
            var n = num;
            while (n--) {
                var p = new Part();
                p.deg = Math.floor(Math.random() * 360);
                p.rad = Math.floor(Math.random() * w * 0.5);
                p.x = p.distX = Math.floor(Math.random() * w);
                p.y = p.distY = Math.floor(Math.random() * h);
                p.size = 1 + Math.floor(Math.random() * (p.rad * 0.055));
                parts[n] = p;
            }
            c.onmousemove = msmv;
            c.onmousedown = msdn;
            c.onmouseup = msup;
            var int = setInterval(function () {
                flow--;
                if (flow === repeat) clearInterval(int);
            }, 20);
        }
        function go() {
            $.globalCompositeOperation = 'source-over';
            $.fillStyle = 'hsla(242, 30%, 5%, .55)';
            $.fillRect(0, 0, w, h);
            $.globalCompositeOperation = 'lighter';
            var mx = msX;
            var my = msY;
            var bounds = force;
            if (msdn) {
                bounds = force * 2;
            }
            var n = num;
            while (n--) {
                var p = parts[n];
                var radi = Math.PI / 180 * p.deg;
                p.distX = midX + p.rad * Math.cos(radi);
                p.distY = midY + p.rad * Math.sin(radi) * 0.4;
                if (mx && my) {
                    var react = Math.floor((bounds * 0.5) + Math.random() * (bounds * 0.9));
                    if (p.distX - mx > 0 &&
                      p.distX - mx < bounds &&
                      p.distY - my > 0 &&
                      p.distY - my < bounds) {
                        p.distX += react;
                        p.distY += react;
                    } else if (p.distX - mx > 0 &&
                      p.distX - mx < bounds &&
                      p.distY - my < 0 &&
                      p.distY - my > -bounds) {
                        p.distX += react;
                        p.distY -= react;
                    } else if (p.distX - mx < 0 &&
                      p.distX - mx > -bounds &&
                      p.distY - my > 0 &&
                      p.distY - my < bounds) {
                        p.distX -= react;
                        p.distY += react;
                    } else if (p.distX - mx < 0 &&
                      p.distX - mx > -bounds &&
                      p.distY - my < 0 &&
                      p.distY - my > -bounds) {
                        p.distY -= react;
                        p.distY -= react;
                    }
                }
                p.x += ((p.distX - p.x) / flow);
                p.y += ((p.distY - p.y) / flow);
                var x = p.x;
                var y = p.y;
                var s = p.size * (p.y * 1.5 / h);
                if (s < 0.1) {
                    s = 0;
                }
                $.beginPath();
                $.fillStyle = p.color;
                $.arc(x, y, s, 0, end, true);
                $.fill();
                $.closePath();
                var vary;
                if (p.size < 2) {
                    vary = 4;
                } else if (p.size < 3) {
                    vary = 3;
                } else if (p.size < 4) {
                    vary = 2;
                } else {
                    vary = 1;
                }
                vary *= (p.y / (h * 0.9));
                p.deg += vary;
                p.deg = p.deg % 360;
            }
        }
        function msmv(e) {
            var p = getPos(e.target);
            var sX = window.pageXOffset;
            var sY = window.pageYOffset;
            msX = e.clientX - p.x + sX;
            msY = e.clientY - p.y + sY;
        }
        function msdn(e) {
            msdn = true;
        }
        function msup(e) {
            msdn = false;
        }
        function getPos(el) {
            var cosmo = {};
            cosmo.x = el.offsetLeft;
            cosmo.y = el.offsetTop;
            while (el.offsetParent) {
                el = el.offsetParent;
                cosmo.x += el.offsetLeft;
                cosmo.y += el.offsetTop;
            }
            return cosmo;
        }
    </script>
</body>
</html>

文案八

文案九

文案十

唉~只是我们平时不屑于表达，除非对自己喜欢的人。 我们要浪漫，就没其他人什么事儿！！！！

王同学睡醒了
目录
相关文章
亚丁号
|
6月前
|
前端开发 JavaScript Python
分享76个文字特效，总有一款适合您
分享76个文字特效，总有一款适合您
亚丁号
68 5
亚丁号
|
6月前
|
移动开发 前端开发 JavaScript
分享88个文字特效，总有一款适合您
分享88个文字特效，总有一款适合您
亚丁号
73 1
亚丁号
|
6月前
|
移动开发 JavaScript 前端开发
分享86个jQuery特效，总有一款适合您
分享86个jQuery特效，总有一款适合您
亚丁号
56 0
JavaPub
|
5月前
情人节浪漫3D照片墙【附源码】
情人节浪漫3D照片墙【附源码】
JavaPub
46 4
游客fz577umxdejsg
|
3月前
|
前端开发
七夕特效惊艳全场！HTML+CSS带你DIY酷炫表白神器
七夕特效惊艳全场！HTML+CSS带你DIY酷炫表白神器
游客fz577umxdejsg
42 2
王同学睡醒了
|
11月前
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！（二）
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
王同学睡醒了
77 3
王同学睡醒了
|
11月前
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！（三）
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
王同学睡醒了
80 2
王同学睡醒了
|
11月前
|
小程序 程序员
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！（一）
十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
王同学睡醒了
96 2
祈澈菇凉
|
12月前
|
前端开发
【前端切图】用css画一个卡通形象-小猪佩奇
【前端切图】用css画一个卡通形象-小猪佩奇
祈澈菇凉
55 0
&amp;ACE&amp;
酷炫代码雨
酷炫代码雨
&amp;ACE&amp;
68 0

热门文章

最新文章

  • 1
    阿里Java代码规约插件即将全球首发，邀您来发布仪式现场
  • 2
    淘宝 NPM 镜像
  • 3
    MySQL数据表生成ER图
  • 4
    Object reference not set to an instance of an object.
  • 5
    锐捷网络&视易K米，携手助力2016腾讯全球合作伙伴万人大会
  • 6
    WF4.0实战(九)：猜数字游戏，测下你的智力
  • 7
    数据结构复习笔记(6)
  • 8
    OutOfMemoryError与StackOverFlowError
  • 9
    Percona XtraDB Cluster 集群环境建立与验证指南
  • 10
    在没有ISA管控的时候
  • 1
    小程序数据绑定机制的优点
    18
  • 2
    小程序的 API 做了什么处理，能够做到全局变量的隐藏
    16
  • 3
    在 Babel 插件中使用 TypeScript 类型
    13
  • 4
    Kotlin - 函数与Lambda表达式
    14
  • 5
    Kotlin - 区间与数组
    12
  • 6
    Kotlin - 运算符与中缀表达式
    14
  • 7
    babel 原理，怎么写 babel 插件
    13
  • 8
    Kotlin - 面向对象之抽象类与接口
    11
  • 9
    Kotlin - 参数与异常
    10
  • 10
    Kotlin - 分支与循环
    10

    • 相关课程

    更多
  • 场景实践 -新手玩转云计算制作一个浪漫的表白网页
  • 相册服务中的故事生成算法介绍
  • 智能创作赛（复赛）：相册应用中的视频故事生成算法介绍
  • 智能创作赛（初赛）：相册应用中的故事生成算法介绍
  • 【科技少年】Python绘画编程第一课

    • 相关电子书

    更多
  • 数据如何让运动更好玩
  • 数据如何让运动更好玩有趣
  • 分身大师那些事儿

    • 相关实验场景

    更多
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 在PAI ArtLab一键实现欧洲杯粉丝专属贴纸制作
  • 函数计算部署AI艺术字应用，生成新春文字头像
  • 一键创建和部署高分电影推荐语音技能
    • 下一篇
    在 BatchCompute 上玩转 Blender 渲染