爱心的代码（原创）

PROMULGATOR

权少

广西

← js随机点名豪华版

→ 如何用es5实现const

相关代码

爱心的代码（原创）

会动的爱心(原创)

canvas爱心代码

爱心冲击，表白代码

css实现跳动的爱心

js+CSS 3D爱心魔方代码

js爱心鼠标跟随

Html

Css

Js

html,body {
	overflow:hidden;
	width:100%;
	height:100%;
	margin:0;
}
#heart {
	position:relative;
}
.item {
	position:absolute;
}

let heartList = '';
const n = 166;

function getRandomColor() {
    return (function(m, s, c) {
        return (c ? arguments.callee(m, s, c - 1) : '#') +
            s[m.floor(m.random() * 16)]
    })(Math, '0123456789abcdef', 5)
}
// 生成爱心列表
for (let i = 0; i <= n; i++) {
    heartList += `
        <svg id="heart_${i}" class="item" t="1587910011145" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1253" width="32" height="32" fill="${getRandomColor()}"><path d="M677.51936 192.03072c113.1008 0 204.8 91.6992 204.8 204.77952 0 186.91072-370.3296 435.15904-370.3296 435.15904S141.68064 592.67072 141.68064 396.81024c0-140.78976 91.6992-204.77952 204.77952-204.77952 68.11648 0 128.28672 33.40288 165.5296 84.55168C549.24288 225.4336 609.41312 192.03072 677.51936 192.03072z" p-id="1254"></path></svg>
    `
}
// 随机放大倍数
const getRandomNum = (scale) => Math.floor(Math.random() * scale + 1);
const boxWidth = window.innerWidth;
const boxHeight = window.innerHeight;
const animateNum = 99;
setTimeout(function() {
    for (let i = 0; i <= n; i++) {
        const item = `heart_${i}`;
        const width = getRandomNum(boxWidth);
        const height = getRandomNum(boxHeight);
        const cWidth = getRandomNum(1000) - width;
        const cHeight = getRandomNum(1000) - height;
        document.getElementById(item).animate([{
                transform: `scale(${getRandomNum(2)})`,
                left: `0px`,
                top: `0px`
            },
            {
                transform: `scale(${getRandomNum(2)})`,
                left: `${boxWidth / 2}px`,
                top: `${boxHeight / 2}px`
            },
            {
                transform: `scale(${getRandomNum(2)})`,
                left: `${cWidth * 2}px`,
                top: `${cHeight * 2}px`
            },
        ], {
            // timing options
            duration: 9000,
            iterations: Infinity,
            easing: 'ease-in-out'
        });
    }
}, 100)
document.getElementById('heart').innerHTML = heartList;

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

爱心的代码（原创）

代码描述：爱心扩散动画代码

更新时间：2020-10-03 23:43:51
希望大家喜欢

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>爱心的代码（原创）-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号