多彩图片加载loading过渡动画效果
代码语言:html
所属分类:加载滚动
代码描述:多彩图片加载loading过渡动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
width: 100vw;
overflow-x: hidden;
background-color: #fdfdfd;
}
.bg-cv {
position: fixed;
z-index: -1000;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.wrapper {
display: flex;
justify-content: center;
}
.rows {
padding: 16px;
box-sizing: border-box;
width: 100%;
min-height: 100vh;
display: grid;
grid-auto-flow: row;
grid-gap: 16px;
grid-template-columns: repeat(4, auto);
max-width: calc(250px * 4 + 16px * 5);
}
.im-wrapper {
position: relative;
}
.im-im {
position: absolute;
transition: opacity 1s;
top: 0;
left: 0;
object-fit: cover;
cursor: pointer;
}
.canv {
position: absolute;
top: 0;
left: 0;
z-index: 20;
pointer-events: none;
}
</style>
</head>
<body translate="no">
<div class="wrapper">
<div class="rows">
</div>
</div>
<script >
const CONSTANTS = {
rad2deg: 57.295779513082320,
};
class LV2 {
// x: number
// y: number
constructor(x, y) {
this.x = x;
this.y = y;
}
// return: string
// eg. [1,2]
toString() {
return '[' + this.x + ',' + this.y + ']';
}
// return: LV2
copy() {
return new LV2(this.x, this.y);
}
// o: { x, y }
setAs(o) {
this.x = o.x;
this.y = o.y;
}
// x: number
// y: number
setValues(x, y) {
this.x = x;
this.y = y;
}
// o: { x: number, y: number }
// return: LV2
add(o) {
return new LV2(this.x + o.x, this.y + o.y);
}
// o: { x: number, y: number }
iadd(o) {
this.x += o.x;
this.y += o.y;
}
// o: { x: number, y: number }
// return: LV2
sub(o) {
return new LV2(this.x - o.x, this.y - o.y);
}
// o: { x: number, y: number }
isub(o) {
this.x -= o.x;
this.y -= o.y;
}
// s: number
// return: LV2
scale(s) {
return new LV2(this.x * s, this.y * s);
}
// s: number
iscale(s) {
this.x *= s;
this.y *= s;
}
// s: number
// return: LV2
div(s) {
return new LV2(this.x / s, this.y / s);
}
// s: number
idiv(s) {
this.x /= s;
this.y /= s;
}
// o: { x: number, y: number }
// return: number
dot(o) {
return this.x * o.y + this.y * o.x;
}
// o: { x: number, y: number }
// return: number
dist(o) {
var dx = this.x - o.x;
var dy = this.y - o.y;
return Math.sqrt(dx * dx + dy * dy);
}
// return: number
mag() {
return Math.sqrt(this.x * this.x + this.y * this.y);
}
// return: LV2
round() {
return new LV2(Math.round(this.x), Math.round(this.y));
}
// return: LV2
floor() {
return new LV2(Math.floor(this.x), Math.floor(this.y));
}
iround() {
this.x = Math.round(this.x);
this.y = Math.round(this.y);
}
ifloor() {
this.x = Math.floor(this.x);
this.y = Math.floor(this.y);
}
// return: LV2
unit() {
var m = Math.sqrt(this.x * this.x + this.y * this.y);
return new LV2(this.x / m, this.y / m);
}
iunit() {
var m = Math.sqrt(this.x * this.x + this.y * this.y);
this.x /= m;
this.y /= m;
}
// target: LV2
// time: number [0-1]
// return: LV2
interpolateTo(target, time) {
var to = target.copy();
to.isub(this);
to.iscale(time);
to.iadd(this);
return to;
}
// return: number
getAngle() {
var angle = CONSTANTS.rad2deg * Math.atan(this.y / this.x);
if(this.x < 0.0)
angle += 180.0;
else if(y < 0.0)
angle += 360.0;
return angle;
}
// angle: number
// return: LV2
static fromAngle(angle) {
var rv = new LV2(0,0);
angle /= CONSTANTS.rad2deg;
rv.x = Math.cos(angle);
rv.y = Math.sin(angle);
return rv;
}
}
class LV3 {
// x: number
// y: number
// z: number
constructor(x, y, z) {
this.x = x;
this.y = y;
this.z = z;
}
// return: string
toString() {
return '[' + this.x + ',' + this.y + ',' + this.z + ']';
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0