資訊專欄INFORMATION COLUMN
摘要：關于可參照張鑫旭大大的講解設置變化速度然后將方法里面的賦值去掉加上方法如下心形樣式可變化心形顏色加上隨機顏色的函數下面的屬性隨位移是變化的可添加你需要變化的樣式比如透明度縮放最后加上事件圖不會搞撒
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圖不會搞撒
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51881.html
摘要：關于可參照張鑫旭大大的講解設置變化速度然后將方法里面的賦值去掉加上方法如下心形樣式可變化心形顏色加上隨機顏色的函數下面的屬性隨位移是變化的可添加你需要變化的樣式比如透明度縮放最后加上事件圖不會搞撒 2018年開工,大家都很清閑，隨意瀏覽各個社區，有些小發現，希望跟大家分享下，語言組織太差請忽略：大致效果：鼠標每次點擊頁面，鼠標處便出現一個?，然后?慢慢上升至消失。還是直接上代碼吧。 1...
摘要：關于可參照張鑫旭大大的講解設置變化速度然后將方法里面的賦值去掉加上方法如下心形樣式可變化心形顏色加上隨機顏色的函數下面的屬性隨位移是變化的可添加你需要變化的樣式比如透明度縮放最后加上事件圖不會搞撒 2018年開工,大家都很清閑，隨意瀏覽各個社區，有些小發現，希望跟大家分享下，語言組織太差請忽略：大致效果：鼠標每次點擊頁面，鼠標處便出現一個?，然后?慢慢上升至消失。還是直接上代碼吧。 1...
摘要：思維導圖的好處它們能投讓你一直對全部知識圖景了然于胸，因而可以讓你對那一學科的全部知識有一個更加平衡和更加全面的理解。竭盡所能地利用一切讓思維導圖的制作過程充滿樂趣音樂繪畫色彩。 從小老師就教育小肆，要多記筆記，說好記性不如爛筆頭，但記過的筆記卻很快就忘了，甚至回頭再看都不知道當時記得什么，一直期望能有個比記筆記更好的方法來學習，直到我遇見了它--思維導圖。 什么是思維導圖？ 人腦不是...
閱讀 1302·2023-04-26 01:03
閱讀 1934·2021-11-23 09:51
閱讀 3307·2021-11-22 15:24
閱讀 2667·2021-09-22 15:18
閱讀 1015·2019-08-30 15:55
閱讀 3480·2019-08-30 15:54
閱讀 2249·2019-08-30 15:53
閱讀 2393·2019-08-30 15:44
