HTML5 | 超炫酷的HTML5圆圈光标动画特效
Posted 酷学编程
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5 | 超炫酷的HTML5圆圈光标动画特效相关的知识，希望对你有一定的参考价值。
话不多说，直接进入我们今天的主题！今天就为大家分享一款最近多人使用的纯html代码动画页面源码~
先让我们一起看看效果是怎么样的
是不是特别的炫酷呢！就问你想不想要源代码！现在就立马分享给你们哦！收好了~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
overflow: hidden;
}
.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: .15s ease-out;
}
.social-icon i {
position: absolute;
pointer-events: none;
z-index: 1000;
transition: .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>
</head>
<body>
<canvas></canvas>
<script>
var canvas = document.querySelector("canvas");
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var mouse = {
x: canvas.width / 2,
y: canvas.height / 2
}
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
window.addEventListener("mousemove", function(e) {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
var colors = [
{r: 255, g: 71, b: 71},
{r: 0, g: 206, b: 237},
{r: 255, g: 255, b: 255}
];
function Particle(x, y, dx, dy, r, ttl) {
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.r = r;
this.opacity = 1;
this.shouldRemove = false;
this.timeToLive = ttl;
this.randomColor = Math.floor(Math.random() * colors.length);
this.update = function() {
this.x += this.dx
this.y += this.dy
if (this.x + this.r >= canvas.width || this.x - this.r <= 0)
this.dx = -this.dx
if (this.y + this.r >= canvas.height || this.y - this.r <= 0)
this.dy = -this.dy
// Ensure that particles cannot be spawned past canvas boundaries
this.x = Math.min(Math.max(this.x, 0 + this.r), canvas.width - this.r)
this.y = Math.min(Math.max(this.y, 0 + this.r), canvas.height - this.r)
c.beginPath()
c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false)
c.strokeStyle =
'rgba(' +
colors[this.randomColor].r +
',' +
colors[this.randomColor].g +
',' +
colors[this.randomColor].b +
',' +
this.opacity +
')'
c.fillStyle =
'rgba(' +
colors[this.randomColor].r +
',' +
colors[this.randomColor].g +
',' +
colors[this.randomColor].b +
',' +
this.opacity +
')'
c.stroke()
c.closePath()
this.opacity -= 1 / (ttl / 0.1)
this.r -= r / (ttl / 0.1)
if (this.r < 0) this.r = 0 // Thank you Akash for the conditional!
this.timeToLive -= 0.1
}
this.remove = function() {
// If timeToLive expires, return a true value.
// This signifies that the particle should be removed from the scene.
return this.timeToLive <= 0;
}
}
function Explosion(x, y) {
this.particles = [];
this.init = function() {
for (var i = 1; i <= 1; i++) {
var randomVelocity = {
x: (Math.random() - 0.5) * 3.5,
y: (Math.random() - 0.5) * 3.5,
}
this.particles.push(new Particle(x, y, randomVelocity.x, randomVelocity.y, 30, 8));
}
}
this.init();
this.draw = function() {
for (var i = 0; i < this.particles.length; i++) {
this.particles[i].update();
if (this.particles[i].remove() == true) {
this.particles.splice(i, 1);
};
}
}
}
var explosions = [];
function animate() {
window.requestAnimationFrame(animate);
c.fillStyle = "#1e1e1e";
c.fillRect(0, 0, canvas.width, canvas.height);
explosions.push(new Explosion(mouse.x, mouse.y));
for (var i = 0; i < explosions.length; i++) {
explosions[i].draw();
}
}
animate();</script>
</body>
</html>
喜欢记得来一个
观看更加系统化的直播课程
领取更多前端相关开发资料
可以扫描下方二维码
加苏莱小姐姐的微信即可领取
以上是关于HTML5 | 超炫酷的HTML5圆圈光标动画特效的主要内容，如果未能解决你的问题，请参考以下文章 前端特效demo | 值得收藏的6个 HTML5 Canvas 实用案例 肝了一宿才收集的48个超炫酷的 CSS 文字特效，绝对值得收藏！！！