摘要：关于可参照张鑫旭大大的讲解设置变化速度然后将方法里面的赋值去掉加上方法如下心形样式可变化心形颜色加上随机颜色的函数下面的属性随位移是变化的可添加你需要变化的样式比如透明度缩放最后加上事件图不会搞撒
2018年开工,大家都很清闲，随意浏览各个社区，有些小发现，希望跟大家分享下，语言组织太差请忽略：
大致效果：鼠标每次点击页面，鼠标处便出现一个♥，然后♥慢慢上升至消失。
还是直接上代码吧。
PS ：顺便要给html，body加上height：100%;
.heart {
width: 10px;
height: 10px;
// 整个网页所以fixed
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;
}
function createHeart(event){
// 获取点击坐标
const left = event.clientX,
top = event.clientY,
heart = document.createElement("div");
heart.className = "heart"; // 心形样式
// 可变化心形颜色 加上随机颜色的函数
heart.style.backgroundColor = randomColor();
heart.style.left = left - 5 + "px";
// 下面的属性随位移是变化的
const params = {
top,
// 可添加你需要变化的样式 比如透明度、缩放
opactity : 1,
scale : 1
}
// 将params 属性付给heart 一些兼容处理没做
heart.style.opacity = params.alpha;
heart.style.left = params.left + "px";
heart.style.top = params.top + "px";
heart.style.transform = "scale(" + params.scale + "," + params.scale + ") rotate(45deg)";
document.body.appendChild(heart); //append到body里
}
function randomColor(){
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
}
这样鼠标没点一次都会在鼠标位置出现一个随机颜色的心形
要获取到生成心形这个元素 然后运用 requestAnimationFrame()函数,此处确实没显出什么好的Css3的方法，因为初始值是未定的。关于requestAnimationFrame可参照
张鑫旭大大的讲解
function upLoop(dom, params) {
if (params.alpha <= 0) {
document.body.removeChild(dom);
return;
};
// 设置变化速度
params.alpha -= 0.006;
params.top--;
params.scale += 0.003;
dom.style.opacity = params.alpha;
dom.style.top = params.top + "px";
dom.style.transform = "scale(" + params.scale + "," + params.scale + ") rotate(45deg)";
requestAnimationFrame(function () { hideLoop(dom, params) })
}
// 然后将createHeart方法里面的赋值style去掉 加上upLoop方法
// 如下
function createHeart(event) {
const left = event.clientX,
top = event.clientY,
heart = document.createElement("div");
heart.className = "heart"; // 心形样式
// 可变化心形颜色 加上随机颜色的函数
heart.style.backgroundColor = randomColor();
heart.style.left = left - 5 + "px";
// 下面的属性随位移是变化的
const params = {
top,
// 可添加你需要变化的样式 比如透明度、缩放
opactity : 1,
scale : 1
}
document.body.appendChild(heart);
hideLoop(heart, params)
};
window.onclick = function (event) {
createHeart(event);
}
gif图不会搞撒
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92867.html
摘要：关于可参照张鑫旭大大的讲解设置变化速度然后将方法里面的赋值去掉加上方法如下心形样式可变化心形颜色加上随机颜色的函数下面的属性随位移是变化的可添加你需要变化的样式比如透明度缩放最后加上事件图不会搞撒 2018年开工,大家都很清闲，随意浏览各个社区，有些小发现，希望跟大家分享下，语言组织太差请忽略：大致效果：鼠标每次点击页面，鼠标处便出现一个♥，然后♥慢慢上升至消失。还是直接上代码吧。 1...
摘要：关于可参照张鑫旭大大的讲解设置变化速度然后将方法里面的赋值去掉加上方法如下心形样式可变化心形颜色加上随机颜色的函数下面的属性随位移是变化的可添加你需要变化的样式比如透明度缩放最后加上事件图不会搞撒 2018年开工,大家都很清闲，随意浏览各个社区，有些小发现，希望跟大家分享下，语言组织太差请忽略：大致效果：鼠标每次点击页面，鼠标处便出现一个♥，然后♥慢慢上升至消失。还是直接上代码吧。 1...
摘要：思维导图的好处它们能投让你一直对全部知识图景了然于胸，因而可以让你对那一学科的全部知识有一个更加平衡和更加全面的理解。竭尽所能地利用一切让思维导图的制作过程充满乐趣音乐绘画色彩。 从小老师就教育小肆，要多记笔记，说好记性不如烂笔头，但记过的笔记却很快就忘了，甚至回头再看都不知道当时记得什么，一直期望能有个比记笔记更好的方法来学习，直到我遇见了它--思维导图。 什么是思维导图？ 人脑不是...
阅读 2929·2021-10-27 14:16
阅读 674·2021-10-13 09:39
阅读 3607·2021-09-29 09:46
阅读 2062·2019-08-30 15:54
阅读 2581·2019-08-30 15:52
阅读 2973·2019-08-30 15:44
阅读 1084·2019-08-30 15:44
阅读 482·2019-08-30 10:51
