Lv.1
各位，我退坑了，转型做音乐了，在网易搜索"Chainlean_From_Tristan"，关注一下吧
签名:考古 为每一个我衷心热爱的兴趣爱好而喝彩！常言道：“知足常乐”，像这样的，就是我和我的编程猫！ 有学习，有编程，学玩两不误 不坑弃作品如下： https://shequ.codemao.cn/work/46534168《笑死人不偿命2》 https://shequ.codemao.cn/work/44716439《方块的审判》 https://shequ.codemao.cn/work/42056642《auroraUI》
在 【dobieStudio】Lv2奖励名单 中回复
加薪没份？要更多的奖励，请多多投稿QWQ
一周累计投稿1至2个作品，获得50金币
累积投稿3个或3个以上，但没被我审核过得，可获得100金币
累计投大于等于3个作品，且室长审核过的优秀作品（500点击量10个点赞或收藏）可获得150金币
还在等什么，赶快来投稿赚金币吧！
2020-04-09T10:33:08 点赞:0
在 只是试一下 中回复
哪位大佬帮我研究一下：
css
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: calc(16px + (48 - 16)*(100vw - 320px)/(2560 - 320));
}
body, button {
font: 1em/1.5 "Hind", sans-serif;
}
body {
background: #272727;
display: flex;
height: 100vh;
overflow: hidden;
}
button {
background: #255ff4;
border-radius: 0.2em;
color: #fff;
cursor: pointer;
margin: auto;
padding: 0.5em 1em;
transition: background .15s linear, color .15s linear;
}
button:focus, button:hover {
background: #0b46da;
}
button:focus {
outline: transparent;
}
button::-moz-focus-inner {
border: 0;
}
button:active {
transform: translateY(0.1em);
}
.exploding, .exploding:focus, .exploding:hover {
background: transparent;
color: transparent;
}
.exploding {
pointer-events: none;
position: relative;
will-change: transform;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.particle {
position: absolute;
top: 0;
left: 0;
}
.particle--debris {
background: #255ff4;
}
.particle--fire {
border-radius: 50%;
}
@media (prefers-color-scheme: dark) {
body {
background: #17181c;
}
}
javascript：
document.addEventListener("DOMContentLoaded",() => {
let button = new ExplosiveButton("button");
});
class ExplosiveButton {
constructor(el) {
this.element = document.querySelector(el);
this.width = 0;
this.height = 0;
this.centerX = 0;
this.centerY = 0;
this.pieceWidth = 0;
this.pieceHeight = 0;
this.piecesX = 9;
this.piecesY = 4;
this.duration = 1000;
this.updateDimensions();
window.addEventListener("resize",this.updateDimensions.bind(this));
if (document.body.animate)
this.element.addEventListener("click",this.explode.bind(this,this.duration));
}
updateDimensions() {
this.width = pxToEm(this.element.offsetWidth);
this.height = pxToEm(this.element.offsetHeight);
this.centerX = this.width / 2;
this.centerY = this.height / 2;
this.pieceWidth = this.width / this.piecesX;
this.pieceHeight = this.height / this.piecesY;
}
explode(duration) {
let explodingState = "exploding";
if (!this.element.classList.contains(explodingState)) {
this.element.classList.add(explodingState);
this.createParticles("fire",25,duration);
this.createParticles("debris",this.piecesX * this.piecesY,duration);
}
}
createParticles(kind,count,duration) {
for (let c = 0; c < count; ++c) {
let r = randomFloat(0.25,0.5),
diam = r * 2,
xBound = this.centerX - r,
yBound = this.centerY - r,
easing = "cubic-bezier(0.15,0.5,0.5,0.85)";
if (kind == "fire") {
let x = this.centerX + randomFloat(-xBound,xBound),
y = this.centerY + randomFloat(-yBound,yBound),
a = calcAngle(this.centerX,this.centerY,x,y),
dist = randomFloat(1,5);
new FireParticle(this.element,x,y,diam,diam,a,dist,duration,easing);
} else if (kind == "debris") {
let x = (this.pieceWidth / 2) + this.pieceWidth * (c % this.piecesX),
y = (this.pieceHeight / 2) + this.pieceHeight * Math.floor(c / this.piecesX),
a = calcAngle(this.centerX,this.centerY,x,y),
dist = randomFloat(4,7);
new DebrisParticle(this.element,x,y,this.pieceWidth,this.pieceHeight,a,dist,duration,easing);
}
}
}
}
class Particle {
constructor(parent,x,y,w,h,angle,distance = 1,className2 = "") {
let width = `${w}em`,
height = `${h}em`,
adjustedAngle = angle + Math.PI/2;
this.div = document.createElement("div");
this.div.className = "particle";
if (className2)
this.div.classList.add(className2);
this.div.style.width = width;
this.div.style.height = height;
parent.appendChild(this.div);
this.s = {
x: x - w/2,
y: y - h/2
};
this.d = {
x: this.s.x + Math.sin(adjustedAngle) * distance,
y: this.s.y - Math.cos(adjustedAngle) * distance
};
}
runSequence(el,keyframesArray,duration = 1e3,easing = "linear",delay = 0) {
let animation = el.animate(keyframesArray, {
duration: duration,
easing: easing,
delay: delay
}
);
animation.onfinish = () => {
let parentCL = el.parentElement.classList;
el.remove();
if (!document.querySelector(".particle"))
parentCL.remove(...parentCL);
};
}
}
class DebrisParticle extends Particle {
constructor(parent,x,y,w,h,angle,distance,duration,easing) {
super(parent,x,y,w,h,angle,distance,"particle--debris");
let maxAngle = 1080,
rotX = randomInt(0,maxAngle),
rotY = randomInt(0,maxAngle),
rotZ = randomInt(0,maxAngle);
this.runSequence(this.div,[
{
opacity: 1,
transform: `translate(${this.s.x}em,${this.s.y}em) rotateX(0) rotateY(0) rotateZ(0)`
},
{
opacity: 1,
},
{
opacity: 1,
},
{
opacity: 1,
},
{
opacity: 0,
transform: `translate(${this.d.x}em,${this.d.y}em) rotateX(${rotX}deg) rotateY(${rotY}deg) rotateZ(${rotZ}deg)`
}
],randomInt(duration/2,duration),easing);
}
}
class FireParticle extends Particle {
constructor(parent,x,y,w,h,angle,distance,duration,easing) {
super(parent,x,y,w,h,angle,distance,"particle--fire");
let sx = this.s.x,
sy = this.s.y,
dx = this.d.x,
dy = this.d.y;
this.runSequence(this.div,[
{
background: "hsl(60,100%,100%)",
transform: `translate(${sx}em,${sy}em) scale(1)`
},
{
background: "hsl(60,100%,80%)",
transform: `translate(${sx + (dx - sx)*0.25}em,${sy + (dy - sy)*0.25}em) scale(4)`
},
{
background: "hsl(40,100%,60%)",
transform: `translate(${sx + (dx - sx)*0.5}em,${sy + (dy - sy)*0.5}em) scale(7)`
},
{
background: "hsl(20,100%,40%)"
},
{
background: "hsl(0,0%,20%)",
transform: `translate(${dx}em,${dy}em) scale(0)`
}
],randomInt(duration/2,duration),easing);
}
}
function calcAngle(x1,y1,x2,y2) {
let opposite = y2 - y1,
adjacent = x2 - x1,
angle = Math.atan(opposite / adjacent);
if (adjacent < 0)
angle += Math.PI;
if (isNaN(angle))
angle = 0;
return angle;
}
function propertyUnitsStripped(el,property,unit) {
let cs = window.getComputedStyle(el),
valueRaw = cs.getPropertyValue(property),
value = 喵alueRaw.substr(0,valueRaw.indexOf(unit));
return value;
}
function pxToEm(px) {
let el = document.querySelector(":root");
return px / propertyUnitsStripped(el,"font-size","px");
}
function randomFloat(min,max) {
return Math.random() * (max - min) + min;
}
function randomInt(min,max) {
return Math.round(Math.random() * (max - min)) + min;
}
2020-04-18T17:27:09 点赞:0