目录
隐藏显示伸缩特效
<template>
<div class="main">
<div class="left_main" :class="{ left_main_show: !openStatus }"></div>
<div class="right_main">
<div class="open_close">
<i @click="change" v-if="open_close" class="el-icon-s-fold"></i>
<i @click="change" v-else class="el-icon-s-unfold"></i>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Home",
data() {
return {
openStatus: true,
open_close: true,
};
},
methods: {
change() {
this.openStatus = !this.openStatus;
if (this.openStatus) {
setTimeout(() => {
this.open_close = true;
}, 1000);
} else {
setTimeout(() => {
this.open_close = false;
}, 1000);
}
},
},
};
</script>
<style lang="less" scoped>
.main {
display: flex;
width: 100%;
height: 100vh;
.left_main {
margin: 0;
width: 300px;
text-align: center;
background-color: aquamarine;
transition: width 1s;
}
.right_main {
flex: 1;
background-color: brown;
position: relative;
.open_close {
position: absolute;
left: 0;
top: 0;
color: white;
font-size: 24px;
}
}
.left_main_show {
width: 0px;
}
}
</style>
鼠标点击弹出爱心
<template>
<h3>鼠标点击弹出爱心</h3>
</template>
<script>
export default {
name: "index",
methods:{
love(){
! function (e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
"px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
.scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function (e) {
t && t(), o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart", s.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
}), t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function c() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
setTimeout(e, 1e3 / 60)
}, i(
".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
), n(), r()
}(window, document);
}
},
mounted() {
this.love()
}
}
</script>
<style scoped>
</style>
鼠标点击弹出文字
<template>
<h3>鼠标点击弹出文字</h3>
</template>
<script>
export default {
name: "index",
methods:{
note(){
(function () {
var a_idx = 0;
window.onclick = function (event) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var heart = document.createElement("b"); //创建b元素
heart.onselectstart = new Function('event.returnValue=false'); //防止拖动
document.body.appendChild(heart).innerHTML = a[a_idx]; //将b元素添加到页面上
a_idx = (a_idx + 1) % a.length;
heart.style.cssText = "position: fixed;left:-100%;"; //给p元素设置样式
var f = 16, // 字体大小
x = event.clientX - f / 2, // 横坐标
y = event.clientY - f, // 纵坐标
c = randomColor(), // 随机颜色
a = 1, // 透明度
s = 1.2; // 放大缩小
var timer = setInterval(function () { //添加定时器
if (a <= 0) {
document.body.removeChild(heart);
clearInterval(timer);
} else {
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
s + ");";
y--;
a -= 0.016;
s += 0.002;
}
}, 15)
}
// 随机颜色
function randomColor() {
return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
.random() * 255)) + ")";
}
}());
}
},
mounted() {
this.note()
}
}
</script>
<style scoped>
</style>
鼠标点击弹出烟花波纹
<template>
<h3>鼠标点击弹出烟花波纹</h3>
</template>
<script>
export default {
name: "index",
methods:{
show(){
function clickEffect() {
let balls = [];
let longPressed = false;
let longPress;
let multiplier = 0;
let width, height;
let origin;
let normal;
let ctx;
const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
const pointer = document.createElement("span");
pointer.classList.add("pointer");
document.body.appendChild(pointer);
if (canvas.getContext && window.addEventListener) {
ctx = canvas.getContext("2d");
updateSize();
window.addEventListener('resize', updateSize, false);
loop();
window.addEventListener("mousedown", function(e) {
pushBalls(randBetween(10, 20), e.clientX, e.clientY);
document.body.classList.add("is-pressed");
longPress = setTimeout(function(){
document.body.classList.add("is-longpress");
longPressed = true;
}, 500);
}, false);
window.addEventListener("mouseup", function(e) {
clearInterval(longPress);
if (longPressed == true) {
document.body.classList.remove("is-longpress");
pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
longPressed = false;
}
document.body.classList.remove("is-pressed");
}, false);
window.addEventListener("mousemove", function(e) {
let x = e.clientX;
let y = e.clientY;
pointer.style.top = y + "px";
pointer.style.left = x + "px";
}, false);
} else {
console.log("canvas or addEventListener is unsupported!");
}
function updateSize() {
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(2, 2);
width = (canvas.width = window.innerWidth);
height = (canvas.height = window.innerHeight);
origin = {
x: width / 2,
y: height / 2
};
normal = {
x: width / 2,
y: height / 2
};
}
class Ball {
constructor(x = origin.x, y = origin.y) {
this.x = x;
this.y = y;
this.angle = Math.PI * 2 * Math.random();
if (longPressed == true) {
this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
} else {
this.multiplier = randBetween(6, 12);
}
this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
this.r = randBetween(8, 12) + 3 * Math.random();
this.color = colours[Math.floor(Math.random() * colours.length)];
}
update() {
this.x += this.vx - normal.x;
this.y += this.vy - normal.y;
normal.x = -2 / window.innerWidth * Math.sin(this.angle);
normal.y = -2 / window.innerHeight * Math.cos(this.angle);
this.r -= 0.3;
this.vx *= 0.9;
this.vy *= 0.9;
}
}
function pushBalls(count = 1, x = origin.x, y = origin.y) {
for (let i = 0; i < count; i++) {
balls.push(new Ball(x, y));
}
}
function randBetween(min, max) {
return Math.floor(Math.random() * max) + min;
}
function loop() {
ctx.fillStyle = "rgba(255, 255, 255, 0)";
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
if (b.r < 0) continue;
ctx.fillStyle = b.color;
ctx.beginPath();
ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
ctx.fill();
b.update();
}
if (longPressed == true) {
multiplier += 0.2;
} else if (!longPressed && multiplier >= 0) {
multiplier -= 0.4;
}
removeBall();
requestAnimationFrame(loop);
}
function removeBall() {
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
balls.splice(i, 1);
}
}
}
}
clickEffect();//调用特效函数
}
},
mounted() {
this.show()
}
}
</script>
<style scoped>
</style>
小星星跟随鼠标
<template>
<h3>小星星跟随鼠标</h3>
<span class="js-cursor-container"></span>
</template>
<script>
export default {
name: "index",
methods:{
show(){
(function fairyDustCursor() {
var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = { x: width / 2, y: width / 2 };
var particles = [];
function init() {
bindEvents();
loop();
}
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
}
function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle);
}
function updateParticles() {
for (var i = 0; i < particles.length; i++) {
particles[i].update();
}
for (var i = particles.length - 1; i >= 0; i--) {
if (particles[i].lifeSpan < 0) {
particles[i].die();
particles.splice(i, 1);
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles();
}
function Particle() {
this.character = "*";
this.lifeSpan = 120; //ms
this.initialStyles = {
"position": "fixed",
"display": "inline-block",
"top": "0px",
"left": "0px",
"pointerEvents": "none",
"touch-action": "none",
"z-index": "10000000",
"fontSize": "25px",
"will-change": "transform"
};
// Init, and set properties
this.init = function (x, y, color) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};
this.position = { x: x + 10, y: y + 10 };
this.initialStyles.color = color;
this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();
document.querySelector('.js-cursor-container').appendChild(this.element);
};
this.update = function () {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
}
this.die = function () {
this.element.parentNode.removeChild(this.element);
}
}
function applyProperties(target, properties) {
for (var key in properties) {
target.style[key] = properties[key];
}
}
if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
})();
}
},
mounted() {
this.show()
}
}
</script>
<style scoped>
</style>
鼠标粒子随心拖尾跟随
<template>
<h3>鼠标粒子随心拖尾跟随</h3>
<canvas></canvas>
</template>
<script>
export default {
name: "index",
methods:{
show(){
"use strict";
// Initial Setup
var canvas = document.querySelector("canvas");
var c = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
// Variables
var mouse = {
x: innerWidth / 2,
y: innerHeight / 2 - 80,
};
var colors = ["#00bdff", "#4d39ce", "#088eff"];
// Event Listeners
addEventListener("mousemove", function (event) {
mouse.x = event.clientX;
mouse.y = event.clientY;
});
addEventListener("resize", function () {
canvas.width = innerWidth;
canvas.height = innerHeight;
init();
});
// Utility Functions
function randomIntFromRange(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function randomColor(colors) {
return colors[Math.floor(Math.random() * colors.length)];
}
// Objects
function Particle(x, y, radius, color) {
var _this = this;
var distance = randomIntFromRange(50, 120);
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.radians = Math.random() * Math.PI * 2;
this.velocity = 0.05;
this.distanceFromCenter = {
x: distance,
y: distance,
};
this.prevDistanceFromCenter = {
x: distance,
y: distance,
};
this.lastMouse = { x: x, y: y };
this.update = function () {
var lastPoint = { x: _this.x, y: _this.y };
// Move points over time
_this.radians += _this.velocity;
// Drag effect
_this.lastMouse.x += (mouse.x - _this.lastMouse.x) * 0.05;
_this.lastMouse.y += (mouse.y - _this.lastMouse.y) * 0.05;
// Circular Motion
_this.distanceFromCenter.x =
_this.prevDistanceFromCenter.x + Math.sin(_this.radians) * 100;
_this.distanceFromCenter.y =
_this.prevDistanceFromCenter.x + Math.sin(_this.radians) * 100;
_this.x =
_this.lastMouse.x +
Math.cos(_this.radians) * _this.distanceFromCenter.x;
_this.y =
_this.lastMouse.y +
Math.sin(_this.radians) * _this.distanceFromCenter.y;
_this.draw(lastPoint);
};
this.draw = function (lastPoint) {
c.beginPath();
c.strokeStyle = _this.color;
c.lineWidth = _this.radius;
c.moveTo(lastPoint.x, lastPoint.y);
c.lineTo(_this.x, _this.y);
c.stroke();
c.closePath();
};
}
// Implementation
var particles = undefined;
function init() {
particles = [];
for (var i = 0; i < 50; i++) {
var radius = Math.random() * 2 + 1;
particles.push(
new Particle(
canvas.width / 2,
canvas.height / 2,
radius,
randomColor(colors)
)
);
}
}
// Animation Loop
function animate() {
requestAnimationFrame(animate);
c.fillStyle = "rgba(255, 255, 255, 0.05)";
c.fillRect(0, 0, canvas.width, canvas.height);
particles.forEach(function (particle) {
particle.update();
});
}
init();
animate();
}
},
mounted() {
this.show()
}
}
</script>
<style scoped>
body {
overflow: hidden;
margin: 0;
}
.twitter:hover a {
transform: rotate(-45deg) scale(1.05);
}
.twitter:hover i {
color: #21c2ff;
}
.twitter a {
bottom: -40px;
right: -75px;
transform: rotate(-45deg);
}
.twitter i {
bottom: 7px;
right: 7px;
color: #00aced;
}
.social-icon a {
position: absolute;
background: white;
color: white;
box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
display: inline-block;
width: 150px;
height: 80px;
transform-origin: 50% 50%;
transition: 0.15s ease-out;
}
.social-icon i {
position: absolute;
pointer-events: none;
z-index: 1000;
transition: 0.15s ease-out;
}
.youtube:hover a {
transform: rotate(45deg) scale(1.05);
}
.youtube:hover i {
color: #ec4c44;
}
.youtube a {
bottom: -40px;
left: -75px;
transform: rotate(45deg);
}
.youtube i {
bottom: 7px;
left: 7px;
color: #e62117;
}
</style>
气泡泡
<template>
<h3>气泡泡</h3>
</template>
<script>
export default {
name: "index",
methods:{
show(){
(function bubblesCursor() {
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {x: width/2, y: width/2};
var particles = [];
function init() {
bindEvents();
loop();
}
// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}
function onTouchMove(e) {
if( e.touches.length > 0 ) {
for( var i = 0; i < e.touches.length; i++ ) {
addParticle(e.touches[i].clientX, e.touches[i].clientY);
}
}
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle( cursor.x, cursor.y);
}
function addParticle(x, y) {
var particle = new Particle();
particle.init(x, y);
particles.push(particle);
}
function updateParticles() {
// Update
for( var i = 0; i < particles.length; i++ ) {
particles[i].update();
}
// Remove dead particles
for( var i = particles.length - 1; i >= 0; i-- ) {
if( particles[i].lifeSpan < 0 ) {
particles[i].die();
particles.splice(i, 1);
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles();
}
/**
* Particles
*/
function Particle() {
this.lifeSpan = 250; //ms
this.initialStyles ={
"position": "absolute",
"display": "block",
"pointerEvents": "none",
"z-index": "10000000",
"width": "5px",
"height": "5px",
"background": "#e6f1f7",
"box-shadow": "-1px 0px #6badd3, 0px -1px #6badd3, 1px 0px #3a92c5, 0px 1px #3a92c5",
"border-radius": "1px",
"will-change": "transform"
};
// Init, and set properties
this.init = function(x, y) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 10),
y: (-.4 + (Math.random() * -1))
};
this.position = {x: x - 10, y: y - 10};
this.element = document.createElement('span');
applyProperties(this.element, this.initialStyles);
this.update();
document.body.appendChild(this.element);
};
this.update = function() {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
// Update velocities
this.velocity.x += (Math.random() < 0.5 ? -1 : 1) * 2 / 75;
this.velocity.y -= Math.random() / 600;
this.lifeSpan--;
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + ( 0.2 + (250 - this.lifeSpan) / 250) + ")";
}
this.die = function() {
this.element.parentNode.removeChild(this.element);
}
}
/**
* Utils
*/
// Applies css `properties` to an element.
function applyProperties( target, properties ) {
for( var key in properties ) {
target.style[ key ] = properties[ key ];
}
}
init();
})();
}
},
mounted() {
this.show()
}
}
</script>
<style scoped>
</style>
笑脸跟随鼠标
<template>
<h3>笑脸跟随鼠标</h3>
</template>
<script>
export default {
name: "index",
methods:{
show(){
(function emojiCursor() {
var possibleEmoji = ["😀", "😂", "😆", "😊"];
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = {x: width/2, y: width/2};
var particles = [];
function init() {
bindEvents();
loop();
}
// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('touchmove', onTouchMove);
document.addEventListener('touchstart', onTouchMove);
window.addEventListener('resize', onWindowResize);
}
function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}
function onTouchMove(e) {
if( e.touches.length > 0 ) {
for( var i = 0; i < e.touches.length; i++ ) {
addParticle( e.touches[i].clientX, e.touches[i].clientY, possibleEmoji[Math.floor(Math.random()*possibleEmoji.length)]);
}
}
}
function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;
addParticle( cursor.x, cursor.y, possibleEmoji[Math.floor(Math.random()*possibleEmoji.length)]);
}
function addParticle(x, y, character) {
var particle = new Particle();
particle.init(x, y, character);
particles.push(particle);
}
function updateParticles() {
// Updated
for( var i = 0; i < particles.length; i++ ) {
particles[i].update();
}
// Remove dead particles
for( var i = particles.length -1; i >= 0; i-- ) {
if( particles[i].lifeSpan < 0 ) {
particles[i].die();
particles.splice(i, 1);
}
}
}
function loop() {
requestAnimationFrame(loop);
updateParticles();
}
/**
* Particles
*/
function Particle() {
this.lifeSpan = 120; //ms
this.initialStyles ={
"position": "fixed",
"top": "0",
"display": "block",
"pointerEvents": "none",
"z-index": "10000000",
"fontSize": "24px",
"will-change": "transform"
};
// Init, and set properties
this.init = function(x, y, character) {
this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};
this.position = {x: x - 10, y: y - 20};
this.element = document.createElement('span');
this.element.innerHTML = character;
applyProperties(this.element, this.initialStyles);
this.update();
document.body.appendChild(this.element);
};
this.update = function() {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan--;
this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")";
}
this.die = function() {
this.element.parentNode.removeChild(this.element);
}
}
/**
* Utils
*/
// Applies css `properties` to an element.
function applyProperties( target, properties ) {
for( var key in properties ) {
target.style[ key ] = properties[ key ];
}
}
init();
})();
}
},
mounted() {
this.show()
}
}
</script>
<style scoped>
</style>
烟花爆炸
<template>
<h3>烟花爆炸</h3>
</template>
<script>
export default {
name: "index",
methods:{
show(){
class Circle {
constructor({ origin, speed, color, angle, context }) {
this.origin = origin
this.position = { ...this.origin }
this.color = color
this.speed = speed
this.angle = angle
this.context = context
this.renderCount = 0
}
draw() {
this.context.fillStyle = this.color
this.context.beginPath()
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
this.context.fill()
}
move() {
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
this.renderCount++
}
}
class Boom {
constructor({ origin, context, circleCount = 10, area }) {
this.origin = origin
this.context = context
this.circleCount = circleCount
this.area = area
this.stop = false
this.circles = []
}
randomArray(range) {
const length = range.length
const randomIndex = Math.floor(length * Math.random())
return range[randomIndex]
}
randomColor() {
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
}
randomRange(start, end) {
return (end - start) * Math.random() + start
}
init() {
for (let i = 0; i < this.circleCount; i++) {
const circle = new Circle({
context: this.context,
origin: this.origin,
color: this.randomColor(),
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
speed: this.randomRange(1, 6)
})
this.circles.push(circle)
}
}
move() {
this.circles.forEach((circle, index) => {
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
return this.circles.splice(index, 1)
}
circle.move()
})
if (this.circles.length == 0) {
this.stop = true
}
}
draw() {
this.circles.forEach(circle => circle.draw())
}
}
class CursorSpecialEffects {
constructor() {
this.computerCanvas = document.createElement('canvas')
this.renderCanvas = document.createElement('canvas')
this.computerContext = this.computerCanvas.getContext('2d')
this.renderContext = this.renderCanvas.getContext('2d')
this.globalWidth = window.innerWidth
this.globalHeight = window.innerHeight
this.booms = []
this.running = false
}
handleMouseDown(e) {
const boom = new Boom({
origin: { x: e.clientX, y: e.clientY },
context: this.computerContext,
area: {
width: this.globalWidth,
height: this.globalHeight
}
})
boom.init()
this.booms.push(boom)
this.running || this.run()
}
handlePageHide() {
this.booms = []
this.running = false
}
init() {
const style = this.renderCanvas.style
style.position = 'fixed'
style.top = style.left = 0
style.zIndex = '999999999999999999999999999999999999999999'
style.pointerEvents = 'none'
style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
document.body.append(this.renderCanvas)
window.addEventListener('mousedown', this.handleMouseDown.bind(this))
window.addEventListener('pagehide', this.handlePageHide.bind(this))
}
run() {
this.running = true
if (this.booms.length == 0) {
return this.running = false
}
requestAnimationFrame(this.run.bind(this))
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.booms.forEach((boom, index) => {
if (boom.stop) {
return this.booms.splice(index, 1)
}
boom.move()
boom.draw()
})
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
}
}
const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()
}
},
mounted() {
this.show()
}
}
</script>
<style scoped>
</style>
蜘蛛网特效
<template>
<h3>蜘蛛网特效</h3>
</template>
<script>
export default {
name: "index",
methods:{
show(){
!function () {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script"), o = t.length, i = t[o - 1];
return {l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99)}
}
function o() {
a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function (i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e], null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
}), x(i)
}
var a, c, u, m = document.createElement("canvas"), d = t(), l = "c_n" + d.l, r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (n) {
window.setTimeout(n, 1e3 / 45)
}, w = Math.random, y = {x: null, y: null, max: 2e4};
m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize = o, window.onmousemove = function (n) {
n = n || window.event, y.x = n.clientX, y.y = n.clientY
}, window.onmouseout = function () {
y.x = null, y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a, g = w() * c, v = 2 * w() - 1, p = 2 * w() - 1;
s.push({x: h, y: g, xa: v, ya: p, max: 6e3})
}
u = s.concat([y]), setTimeout(function () {
i()
}, 100)
}();
}
},
mounted() {
this.show()
}
}
</script>
<style scoped>
</style>
星空
<template>
<div class="body">
<div class="stars" ref="starsRef">
<div class="star" v-for="(item, index) in starsCount" :key="index"></div>
</div>
</div>
</template>
<script>
import { onMounted, ref } from "vue";
export default {
setup() {
let starsRef = ref(null);
const starsCount = 800; //星星数量
const distance = 900; //间距
onMounted(() => {
let starNodes = Array.from(starsRef.value.children);
starNodes.forEach((item) => {
let speed = 0.2 + Math.random() * 1;
let thisDistance = distance + Math.random() * 300;
item.style.transformOrigin = `0 0 ${thisDistance}px`;
item.style.transform = `
translate3d(0,0,-${thisDistance}px)
rotateY(${Math.random() * 360}deg)
rotateX(${Math.random() * -50}deg)
scale(${speed},${speed})`;
});
});
return {
starsRef,
starsCount,
};
},
};
</script>
<style lang="css" scoped>
.body {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: radial-gradient(
200% 100% at bottom center,
#f7f7b6,
#e96f92,
#1b2947
);
background: radial-gradient(
200% 105% at top center,
#1b2947 10%,
#75517d 40%,
#e96f92 65%,
#f7f7b6
);
background-attachment: fixed;
overflow: hidden;
}
@keyframes rotate {
0% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
}
100% {
transform: perspective(400px) rotateZ(20deg) rotateX(-40deg)
rotateY(-360deg);
}
}
.stars {
transform: perspective(500px);
transform-style: preserve-3d;
position: absolute;
perspective-origin: 50% 100%;
left: 45%;
animation: rotate 90s infinite linear;
bottom: 0;
}
.star {
width: 2px;
height: 2px;
background: #f7f7b6;
position: absolute;
left: 0;
top: 0;
backface-visibility: hidden;
}
</style>
下雨特效
<template>
<div class="home">
<canvas id="canvas" />
<!-- 换成自己的图片 -->
<img :style="canvasStyle" src="./ttf.jpg" />
</div>
</template>
<script>
import { init } from "./rain.js";
export default {
name: "index",
data() {
return {
canvasStyle: {
position: "fixed",
width: "100%",
height: "100%",
zIndex: "-1",
left: "0",
bottom: "0",
},
ctx: {},
};
},
mounted() {
this.initCanvas();
},
methods: {
initCanvas() {
const canvas = document.querySelector("#canvas");
this.ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
init(this.ctx);
},
},
}
</script>
<style scoped>
</style>
//.rain.js
// 画笔
var ctx;
// 画布的宽高
var w = window.innerWidth;
var h = window.innerWidth;
// 存放雨滴的数组
var arr = [];
// 雨滴的数量
var size = 150;
// 雨滴的构造函数
class Rain {
x = random(w);
y = random(h);
ySpeed = random(2) + 5;
show() {
drawLine(this.x, this.y);
}
run() {
if (this.y > h) {
this.y = 0;
this.x = random(w);
}
this.y = this.y + this.ySpeed;
}
}
// 画线(雨滴)
function drawLine(x1, y1) {
ctx.beginPath();
ctx.strokeStyle = "#cccccc";
ctx.moveTo(x1, y1);
// 雨长度为30
ctx.lineTo(x1, y1 + 30);
ctx.stroke();
}
// 生成随机数
function random(num) {
return Math.random() * num;
}
// 开始
function start() {
for (var i = 0; i < size; i++) {
var rain = new Rain();
arr.push(rain);
rain.show();
}
setInterval(() => {
ctx.clearRect(0, 0, w, h);
for (var i = 0; i < size; i++) {
arr[i].show();
arr[i].run();
}
}, 10);
}
// 初始化
function init(ctx1) {
ctx = ctx1;
start();
}
// 导出初始化函数
export { init };
旋转光环
<template>
<div class="container">
<div class="loader"><span></span></div>
</div>
</template>
<script>
export default {
name: "index",
methods:{
show(){
}
},
mounted() {
this.show()
}
}
</script>
<style scoped>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #102626;
}
.container{
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
-webkit-box-reflect: below 1px linear-gradient(#0001, #0004);
}
.container .loader{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: #0d2323;
animation: animate 2s linear infinite;
}
@keyframes animate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.container .loader::before{
content: '';
position: absolute;
top:0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to top, transparent, rgba(0, 255, 249, 0.4));
background-size: 100px 180px;
background-repeat: no-repeat;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.container .loader::after{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: #00fff9;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 10px #00fff9,
0 0 20px #00fff9,
0 0 30px #00fff9,
0 0 40px #00fff9,
0 0 50px #00fff9,
0 0 60px #00fff9,
0 0 70px #00fff9,
0 0 80px #00fff9,
0 0 90px #00fff9,
0 0 100px #00fff9;
}
.container .loader span{
position: absolute;
top:20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #102626;
border-radius: 50%;
}
</style>
旋转光环
<template>
<section>
<div class="loader" style="margin-right: 200px;">
<span style="--i:1"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
</div>
<div class="loader">
<span style="--i:1"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
</div>
</section>
</template>
<script>
export default {
name: "index",
methods:{
show(){
}
},
mounted() {
this.show()
}
}
</script>
<style scoped>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #042104;
animation: animateBg 10s linear infinite;
}
@keyframes animateBg {
0%{
filter: hue-rotate(0deg);
}
100%{
filter: hue-rotate(360deg);
}
}
section .loader{
position: relative;
width: 120px;
height: 120px;
}
section .loader span{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(calc(18deg * var(--i)));
}
section .loader span::before{
content: '';
position: absolute;
top:0;
left: 0;
width: 15px;
height: 15px;
background: #00ff0a;
border-radius: 50%;
box-shadow: 0 0 10px #00ff0a,
0 0 20px #00ff0a,
0 0 40px #00ff0a,
0 0 80px #00ff0a,
0 0 100px #00ff0a;
animation: animate 2s linear infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
0%{
transform: scale(1);
}
80%, 100%{
transform: scale(0);
}
}
</style>
特效边框
<style>
:root {
--card-height: 65vh;
--card-width: calc(var(--card-height) / 1.5);
}
body {
min-height: 100vh;
background: #212534;
display: flex;
align-items: center;
justify-content: center;
font-family: cursive;
}
.card {
background: #191c29;
width: var(--card-width);
height: var(--card-height);
padding: 3px;
position: relative;
border-radius: 6px;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
font-size: 1.5em;
color: rgb(88 199 250 / 0%);
cursor: pointer;
}
.card:hover {
color: rgb(88 199 250 / 100%);
transition: color 1s;
}
.card::before {
content: "";
width: 104%;
height: 102%;
border-radius: 8px;
background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
position: absolute;
z-index: -1;
top: -1%;
left: -2%;
animation: spin 2.5s linear infinite;
}
.card::after {
position: absolute;
content: "";
top: calc(var(--card-height) / 6);
left: 0;
right: 0;
z-index: -1;
height: 100%;
width: 100%;
margin: 0 auto;
transform: scale(0.8);
filter: blur(calc(var(--card-height) / 6));
background-image: linear-gradient(var(--rotate), #5ddcff, #3c67e3 43%, #4e00c2);
opacity: 1;
transition: opacity .5s;
animation: spin 2.5s linear infinite;
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
</style>
<body>
<div class="card"></div>
</body>
下雨效果
<!--
* @Descripttion:
* @Date: 2022-05-27 14:55:50
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .5);
overflow: hidden;
}
.content {
height: 100%;
}
#rainBox {
height: 100%;
}
.rain {
position: absolute;
width: 2px;
height: 50px;
background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.66));
}
</style>
</head>
<body>
<div class="content">
<div id="rainBox"></div>
</div>
<script>
const box = document.getElementById('rainBox');
let boxHeight = box.clientHeight;
let boxWidth = box.clientWidth;
window.onresize = function() {
boxHeight = box.clientHeight;
boxWidth = box.clientWidth;
}
function rainDot() {
let rain = document.createElement('div');
rain.classList.add('rain');
rain.style.top = 0;
rain.style.left = `${Math.random() * boxWidth}px`;
rain.style.opacity = Math.random();
box.appendChild(rain);
let gap = 1;
const loop = setInterval(() => {
if (parseInt(rain.style.top) > boxHeight) {
clearInterval(loop);
box.removeChild(rain)
}
gap++
rain.style.top = `${parseInt(rain.style.top)+gap}px`;
}, 20)
}
setInterval(() => {
rainDot();
}, 50)
</script>
</body>
</html>
动态菜单
<!--
* @Descripttion:
* @Date: 2022-05-27 17:13:59
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(to left, #2bc0e4, #eaecc6);
}
ul,
li {
list-style: none;
}
.menu-checkbox {
display: none;
}
.menu {
position: relative;
}
.menu-dots {
width: 5rem;
height: 5rem;
border-radius: 50%;
box-shadow: 0 0 0 0.3rem #161e3f;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: rotate(90deg);
transition: 0.3s;
cursor: pointer;
}
.menu-dots:hover {
box-shadow: 0 0 0 0.3rem #161e3f, 0 0 0 1rem rgba(#161e3f, 0.16);
transform: scale(1.2) rotate(90deg);
}
.menu-dot {
width: 0.45rem;
height: 0.45rem;
background-color: #161e3f;
border-radius: 50%;
}
.menu-dot+.menu-dot {
margin-top: 0.3rem;
}
.menu-items {
position: absolute;
top: -3.3rem;
left: -4.55rem;
width: 9.4rem;
height: 11rem;
color: #fff;
pointer-events: none;
display: grid;
grid-template-columns: 1fr 1fr;
opacity: 0;
transition: 0.3s;
}
.menu-item {
transform: scale(0.5);
filter: blur(10px);
transition: 0.3s;
}
.menu-item:nth-child(odd) {
text-align: right;
}
.menu-item:nth-child(even) {
text-align: left;
}
.menu-item:first-child,
.menu-item:last-child {
grid-column: span 2;
text-align: center;
}
.menu-checkbox:checked+.menu>.menu-dots {
transform: none;
box-shadow: 0 0 0 3.4rem #161e3f;
}
.menu-checkbox:checked+.menu>.menu-items {
opacity: 1;
pointer-events: auto;
}
.menu-closer-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: transparent;
border-radius: 50%;
z-index: 2;
pointer-events: none;
}
.menu-checkbox:checked+.menu>.menu-items>.menu-item {
opacity: 1;
transform: none;
filter: none;
}
.menu-checkbox:checked+.menu>.menu-items>.menu-item:nth-child(1) {
transition-delay: 0.05s;
}
.menu-checkbox:checked+.menu>.menu-items>.menu-item:nth-child(2) {
transition-delay: 0.1s;
}
.menu-checkbox:checked+.menu>.menu-items>.menu-item:nth-child(3) {
transition-delay: 0.15s;
}
.menu-checkbox:checked+.menu>.menu-items>.menu-item:nth-child(4) {
transition-delay: 0.2s;
}
.menu-checkbox:checked+.menu>.menu-items>.menu-item:nth-child(5) {
transition-delay: 0.25s;
}
.menu-checkbox:checked+.menu>.menu-items>.menu-item:nth-child(6) {
transition-delay: 0.3s;
}
.menu-checkbox:checked+.menu>.menu-closer-overlay {
pointer-events: auto;
cursor: pointer;
}
</style>
<body>
<input class="menu-checkbox" id="menu" type="checkbox" name="menu" />
<nav class="menu">
<label class="menu-dots" for="menu">
<span class="menu-dot"></span>
<span class="menu-dot"></span>
<span class="menu-dot"></span>
</label>
<ul class="menu-items">
<li class="menu-item">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.25 8C9.25 9.24264 8.24264 10.25 7 10.25C5.75736 10.25 4.75 9.24264 4.75 8C4.75 6.75736 5.75736 5.75 7 5.75C8.24264 5.75 9.25 6.75736 9.25 8Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path
d="M9.25 16C9.25 17.2426 8.24264 18.25 7 18.25C5.75736 18.25 4.75 17.2426 4.75 16C4.75 14.7574 5.75736 13.75 7 13.75C8.24264 13.75 9.25 14.7574 9.25 16Z"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M9 15L19.25 6.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M9 9L19.25 16.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round"></path>
</svg>
</li>
<li class="menu-item">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M6.5 15.25V15.25C5.5335 15.25 4.75 14.4665 4.75 13.5V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H13.5C14.4665 4.75 15.25 5.5335 15.25 6.5V6.5">
</path>
<rect width="10.5" height="10.5" x="8.75" y="8.75" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="1.5" rx="2"></rect>
</svg>
</li>
<li class="menu-item">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-width="1.5"
d="M19.25 10C19.25 12.7289 17.85 15.25 16.5 15.25C15.15 15.25 13.75 12.7289 13.75 10C13.75 7.27106 15.15 4.75 16.5 4.75C17.85 4.75 19.25 7.27106 19.25 10Z">
</path>
<path stroke="currentColor" stroke-width="1.5"
d="M16.5 15.25C16.5 15.25 8 13.5 7 13.25C6 13 4.75 11.6893 4.75 10C4.75 8.31066 6 7 7 6.75C8 6.5 16.5 4.75 16.5 4.75">
</path>
<path stroke="currentColor" stroke-width="1.5"
d="M6.75 13.5V17.25C6.75 18.3546 7.64543 19.25 8.75 19.25H9.25C10.3546 19.25 11.25 18.3546 11.25 17.25V14.5">
</path>
</svg>
</li>
<li class="menu-item">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z">
</path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M7.75 10.5V9.84343C7.75 8.61493 7.70093 7.29883 8.42416 6.30578C8.99862 5.51699 10.0568 4.75 12 4.75C14 4.75 15.25 6.25 15.25 6.25">
</path>
</svg>
</li>
<li class="menu-item">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z">
</path>
</svg>
</li>
<li class="menu-item">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
d="M7.75 7.75H19.25L17.6128 14.7081C17.4002 15.6115 16.5941 16.25 15.666 16.25H11.5395C10.632 16.25 9.83827 15.639 9.60606 14.7618L7.75 7.75ZM7.75 7.75L7 4.75H4.75">
</path>
<circle cx="10" cy="19" r="1" fill="currentColor"></circle>
<circle cx="17" cy="19" r="1" fill="currentColor"></circle>
</svg>
</li>
</ul>
<label for="menu" class="menu-closer-overlay"></label>
</nav>
</body>
</html>
按钮炫光环绕
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'fangsong';
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(0, 0, 0);
}
.item{
position: relative;
margin: 50px;
width: 300px;
height: 80px;
text-align: center;
line-height: 80px;
text-transform: uppercase;
text-decoration: none;
font-size: 35px;
letter-spacing: 5px;
color: aqua;
overflow: hidden;
-webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3));
}
.item:hover{
background-color: aqua;
box-shadow:0 0 5px aqua,
0 0 75px aqua,
0 0 155px aqua;
color: black;
}
.item span:nth-of-type(1){
position: absolute;
left: -100%;
width: 100%;
height: 3px;
background-image: linear-gradient(to left,aqua ,transparent);
animation: shang 1s linear infinite;
}
@keyframes shang{
0%{
left:-100%;
}
50%,100%{
left:100%;
}
}
.item span:nth-of-type(2){
position: absolute;
top: -100%;
right: 0;
width: 3px;
height: 100%;
background-image: linear-gradient(to top,aqua ,transparent);
animation: you 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes you{
0%{
top:-100%;
}
50%,100%{
top:100%;
}
}
.item span:nth-of-type(3){
position: absolute;
right: -100%;
bottom: 0;
width: 100%;
height: 3px;
background-image: linear-gradient(to right,aqua ,transparent);
animation: xia 1s linear infinite;
animation-delay: 0.5s;
}
@keyframes xia{
0%{
right:-100%;
}
50%,100%{
right:100%;
}
}
.item span:nth-of-type(4){
position: absolute;
bottom: -100%;
left: 0;
width: 3px;
height: 100%;
background-image: linear-gradient(to bottom,aqua ,transparent);
animation: zuo 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes zuo{
0%{
bottom:-100%;
}
50%,100%{
bottom:100%;
}
}
.item1{
filter: hue-rotate(100deg);
}
.item3{
filter: hue-rotate(250deg);
}
</style>
</head>
<body>
<a href="#" class="item item1">
aurora
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<a href="#" class="item item2">
aurora
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<a href="#" class="item item3">
aurora
<span></span>
<span></span>
<span></span>
<span></span>
</a>
</body>
</html>
雷达扫描
<!--
* @Descripttion:
* @Date: 2022-09-28 17:04:23
-->
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.coll {
width: 100px;
height: 100px;
border-radius: 50%;
border: 1px solid red;
animation: scanAnimation 10s infinite linear;
}
.leida {
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
background: linear-gradient(0deg, rgba(0, 177, 255, 0), rgba(69, 31, 28, 0.3));
}
@keyframes scanAnimation {
/*状态1:bg1与bg2均不可见*/
0% {
transform: rotate(0deg)
}
/*状态5:bg1保持不可见,bg2宽度保持30%不变,位置从100%到-30%,变为不可见*/
100% {
transform: rotate(360deg)
}
}
</style>
</head>
<body>
<div class="coll">
<div class="leida"></div>
</div>
</body>
</html>
拖拽矩形
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#app-warpper {
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="app-warpper"></div>
</body>
<script>
/**
* 创建一个可拖拽的矩形
*/
function CreateDragRect(elm, options = {}) {
if (!elm) throw new Error('el 必须是一个document对象');
this.rect = elm;
this.isLeftMove = true;
this.isTopMove = true;
this.rectDefaultPosition = options.position || 'fixed';
this.rectDefaultLeft = options.x || 0;
this.rectDefaultTop = options.y || 0;
this.rectWidth = options.width || 100;
this.rectHeight = options.height || 100;
this.rectMinWidth = options.rectMinWidth || 5; //最小宽度(超过之后不允许再缩放)
this.rectMinHeight = options.rectMinHeight || 5; //最小高度(超过之后不允许再缩放)
this.rectBackgroundColor = options.background || '#ccc';
this.dragIconSize = options.dragIconSize || '4px';
this.dragIconColor = options.dragIconColor || '#f00';
//主矩形是否可以移动
this.isMove = false;
this.initStyle();
this.bindDragEvent(this.rect);
}
/**
* 主矩形绑定move事件
*/
CreateDragRect.prototype.bindDragEvent = function (dom, position) {
const _this = this;
dom.onmousedown = function (event) {
event.stopPropagation();
//按下矩形的时候可以移动,否则不可移动
_this.isMove = !position;
// 获取鼠标在wrapper中的位置
let boxX = event.clientX - dom.offsetLeft;
let boxY = event.clientY - dom.offsetTop;
//鼠标移动事件(如果计算太高,有拖影)
document.onmousemove = _this.throttle(function (moveEv) {
let ev = moveEv || window.event;
ev.stopPropagation();
let moveX = ev.clientX - boxX;
let moveY = ev.clientY - boxY;
switch (position) {
case 'top-left': //左上: 需计算top left width
_this.nwRectSize(moveX, moveY);
break;
case 'top-right': //右上 计算top 和 height
_this.neRectSize(moveX, moveY);
break;
case 'right-bottom': //只需计算当前鼠标位置
_this.seRectSize(moveX, moveY);
break;
case 'left-bottom': //计算left偏移量,计算w
_this.swRectSize(moveX, moveY);
break;
default: //拖拽矩形
if (!_this.isMove) return null;
_this.moveRect(ev.clientX - boxX, ev.clientY - boxY);
}
}, 15);
//鼠标松开,移除事件
document.onmouseup = function (event) {
document.onmousemove = null;
document.onmouseup = null;
// 存储当前的rect的宽高
_this.rectWidth = _this.rect.offsetWidth;
_this.rectHeight = _this.rect.offsetHeight;
// 获得当前矩形的offsetLeft 和 offsetTop
_this.rectOffsetLeft = _this.rect.offsetLeft;
_this.rectOffsetTop = _this.rect.offsetTop;
}
}
}
/**
* 初始化样式
*/
CreateDragRect.prototype.initStyle = function () {
this.rect.style.position = this.rectDefaultPosition;
this.rect.style.width = this.rectWidth + 'px';
this.rect.style.height = this.rectHeight + 'px';
this.rect.style.left = this.rectDefaultLeft + 'px';
this.rect.style.top = this.rectDefaultTop + 'px';
this.rect.style.background = this.rectBackgroundColor;
//依次为上 右 下 左
let dragIcons = [
{
cursor: 'nw-resize',
x: 'top',
y: 'left'
},
{
cursor: 'ne-resize',
x: 'top',
y: 'right'
},
{
cursor: 'se-resize',
x: 'right',
y: 'bottom'
},
{
cursor: 'sw-resize',
x: 'left',
y: 'bottom'
}
];
for (let i = 0, l = dragIcons.length; i < l; i++) {
let icon = document.createElement('i');
icon.id = Math.random().toString(36).substring(7);
icon.style.display = 'inline-block';
icon.style.width = this.dragIconSize;
icon.style.height = this.dragIconSize;
icon.style.position = 'absolute';
icon.style.zIndex = 10;
icon.style.cursor = dragIcons[i].cursor;
icon.style.backgroundColor = this.dragIconColor;
icon.style[dragIcons[i].x] = -parseInt(icon.style.width) / 2 + 'px';
icon.style[dragIcons[i].y] = -parseInt(icon.style.height) / 2 + 'px';
//绑定四个角的拖拽事件
this.bindDragEvent(icon, `${dragIcons[i].x}-${dragIcons[i].y}`);
//插入到矩形
this.rect.appendChild(icon);
}
};
/**
* 移动主矩形
*/
CreateDragRect.prototype.moveRect = function (x, y) {
if (this.isTopMove && this.isLeftMove) {
this.rect.style.left = x + 'px';
this.rect.style.top = y + 'px';
}
};
/**
* 移动主矩形缩放 - 左上
*/
CreateDragRect.prototype.nwRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, this.rectHeight - y);
if (isTopMove) {
this.rect.style.top = this.rectOffsetTop + y + 'px';
this.rect.style.height = height + 'px';
}
if (isLeftMove) {
this.rect.style.left = this.rectOffsetLeft + x + 'px';
this.rect.style.width = width + 'px';
}
};
/**
* 移动主矩形缩放 - 左下
*/
CreateDragRect.prototype.swRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height, isLeftMove, isTopMove } = this.getMinSize(this.rectWidth - x, y);
if (isLeftMove) {
this.rect.style.left = this.rectOffsetLeft + x + 'px';
this.rect.style.width = width + 'px';
}
if (isTopMove) {
this.rect.style.height = height + 'px';
}
};
/**
* 移动主矩形缩放 - 右上
*/
CreateDragRect.prototype.neRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height, isTopMove, isLeftMove } = this.getMinSize(x, this.rectHeight - y);
if (isTopMove) {
this.rect.style.height = height + 'px';
this.rect.style.top = this.rectOffsetTop + y + 'px';
}
if (isLeftMove) {
this.rect.style.width = width + 'px';
}
};
/**
* 移动主矩形缩放 - 右下
*/
CreateDragRect.prototype.seRectSize = function (x, y) {
//计算是否是最小宽度
const { width, height } = this.getMinSize(x, y);
this.rect.style.width = width + 'px';
this.rect.style.height = height + 'px';
};
/**
* 节流函数
* @param {*} fn
* @param {*} delay
*/
CreateDragRect.prototype.throttle = function (fn, delay) {
let last = 0;
return function () {
let curr = Date.now();
if (curr - last > delay) {
fn.apply(this, arguments);
last = curr;
}
}
}
/**
* 获取宽高
* @param {*} w
* @param {*} h
* @return { Object }
*/
CreateDragRect.prototype.getMinSize = function (w, h) {
let rectMinWidth = this.rectMinWidth;
let rectMinHeight = this.rectMinHeight;
//x拖拽
this.isLeftMove = w >= this.rectMinWidth;
//y拖拽
this.isTopMove = h >= this.rectMinHeight;
if (this.isLeftMove) rectMinWidth = w;
if (this.isTopMove) rectMinHeight = h;
return { width: rectMinWidth, height: rectMinHeight, isLeftMove: this.isLeftMove, isTopMove: this.isTopMove };
}
const dr = new CreateDragRect(document.getElementById('app-warpper'), {
x: 100,
y: 100,
width: 300,
height: 300,
});
</script>
</html>
jq移动矩形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="./jquery-1.10.2.min.js"></script>
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
height: 200px;
width: 200px;
background-color: red;
position: absolute;
/* 让文字无法被选中 */
user-select: none;
}
</style>
</head>
<body>
<div class="box"></div>box</div>
<script>
$(function () {
$.fn.extend({
Drag() {
//把this存起来,始终指向操作的元素
_this = this;
this.on('mousedown', function (e) {
//盒子距离document的距离
var positionDiv = $(this).offset();
//鼠标点击box距离box左边的距离
var distenceX = e.pageX - positionDiv.left;
//鼠标点击box距离box上边的距离
var distenceY = e.pageY - positionDiv.top;
$(document).mousemove(function (e) {
//盒子的x轴
var x = e.pageX - distenceX;
//盒子的y轴
var y = e.pageY - distenceY;
//如果盒子的x轴小于了0就让他等于0(盒子的左边界值)
if (x < 0) {
x = 0;
}
//盒子右边界值
if (x > $(document).width() - _this.outerWidth()) {
x = $(document).width() - _this.outerWidth();
}
//盒子的上边界值
if (y < 0) {
y = 0;
}
//盒子的下边界值
if (y > $(document).height() - _this.outerHeight()) {
y = $(document).height() - _this.outerHeight();
}
//给盒子的上下边距赋值
$(_this).css({
'left': x,
'top': y
});
});
//在页面中当鼠标抬起的时候,就关闭盒子移动事件
$(document).mouseup(function () {
$(document).off('mousemove');
});
})
//把this返回回去继续使用jqurey的链式调用
return this
}
})
$('.box').Drag();//直接调用Drag()方法就可以了
})
</script>
</body>
</html>
个人笔记,不喜勿喷,网络搜集,未完待续。