特效一:无规则动态线
页脚 HTML 代码
<!-- 背景动画 color:自定义颜色;opacity:调节透明度;count:调节线性数量-->
<script type="text/javascript" color="255,87,34" opacity='0.3' zIndex="1" count="111" src="https://files.cnblogs.com/files/yzl0/canvas-nest.js"></script>
特效二:鼠标左键点击出现爱心
页脚 HTML 代码
<!-- 爱心特效 -->
<script type="text/javascript">
(function (window, document, undefined) {
let hearts = [];
window.requestAnimationFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {
setTimeout(callback, 1000);
}
})();
init();
function init() {
cssFun(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
attachEvent();
gameloop();
}
function gameloop() {
for (let i = 0; i < hearts.length; i++) {
if (hearts[i].alpha <= 0) {
document.body.removeChild(hearts[i].el);
hearts.splice(i, 1);
continue;
}
hearts[i].y--;
hearts[i].scale += 0.004;
hearts[i].alpha -= 0.013;
hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
}
requestAnimationFrame(gameloop);
}
/**
* 附加事件.:创建小心心
*/
function attachEvent() {
let old = typeof window.onclick === "function" && window.onclick;
window.onclick = function (event) {
old && old();
createHeart(event);
}
}
function createHeart(event) {
let d = document.createElement("div");
d.className = "heart";
hearts.push({
el: d,
x: event.clientX - 5,
y: event.clientY - 5,
scale: 1,
alpha: 1,
color: randomColor()
});
document.body.appendChild(d);
}
function cssFun(css) {
let style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode(css));
} catch (ex) {
style.styleSheet.cssText = css;
}
document.getElementsByTagName('head')[0].appendChild(style);
}
/**
*随机颜色
*/
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
}
})(window, document);
</script>
爱心javaScript
特效三:鼠标左键点击出现爱心加文字
页面定制 CSS 代码
body{position:relative;}
.img {width: 20px;height: 20px;opacity: 1;position: absolute;z-index: 100000;transition: 1s;}
.left,.right {width: 10px;height: 10px;border-radius: 100%;position: absolute;}
.right {right: 0;}
.under {width: 10px;height: 10px;position: absolute;top: 5px;left: 5px;transform: rotate(45deg)}
.text {width: 50px;font-size: 10px;line-height: 1;position: absolute;top: -1em;left: -15px;text-align: center;cursor: default;}
爱心加文字CSS
页脚 HTML 代码
<script type="text/javascript">
// 点击出的文字数组,可自行添加
tagArray = ["CSS", "JavaScript", "Spring", "SpringCloud", "Eureka", "Ribbon", "Hystrix", "Gateway", "Config", "Swagger", "RabbitMq", "ZooKeeper", "Mysql", "Linux"];
// 计数
let count = 0;
// 鼠标按下事件
document.body.onmousedown = function (e) {
// 获取鼠标点击位置
let x = event.pageX - 30;
let y = event.pageY - 30;
// 分别创建所需要的元素节点
let img = document.createElement("div");
let left = document.createElement("div");
let right = document.createElement("div");
let under = document.createElement("div");
let txt = document.createElement("div");
// 通过随机数从文字数组中获取随机下标的文字
let textNode = document.createTextNode(tagArray[parseInt(Math.random() * tagArray.length)]);
// 文字添加到txt节点中
txt.appendChild(textNode);
img.className = "img" + " " + "img" + count;
left.className = "left";
right.className = "right";
under.className = "under";
txt.className = "text";
img.style.top = y + "px";
img.style.left = x + "px";
// 将创建的元素添加到容器中
img.appendChild(left);
img.appendChild(right);
img.appendChild(under);
img.appendChild(txt);
document.body.appendChild(img);
// 获取随机颜色
let color = "rgb(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," +
parseInt(Math.random() * 255) + ")";
txt.style.color = color;
for (let i = 0; i < 3; i++) {
img.children[i].style.background = color;
}
}
// 鼠标抬起事件
document.body.onmouseup = function () {
document.getElementsByClassName("img" + count)[0].style.transform = "scale(0.5)";
document.getElementsByClassName("img" + count)[0].style.transform = "translateY(-40px)";
document.getElementsByClassName("img" + count)[0].style.opacity = "0";
count++;
}
</script>
爱心加文字javaScript
特效四:待定...