新增第234个小实例：圣诞按钮
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
56d80cb355
commit
ff384fb261
|
|
@ -241,6 +241,7 @@
|
|||
231. HTML5+CSS3小实例：文字边框视觉错位
|
||||
232. HTML5+CSS3小实例：旋转中的视差效果
|
||||
233. HTML5+CSS3小实例：环形文字加载动画
|
||||
234. HTML5+CSS3+JS小实例：圣诞按钮
|
||||
|
||||
#### 赞赏作者
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background-color: #121225;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.snow-button{
|
||||
padding: 12px;
|
||||
min-width: fit-content;
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
.button{
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 6px;
|
||||
padding: 10px 16px;
|
||||
min-width: 130px;
|
||||
color: #fff;
|
||||
background-image: linear-gradient(to bottom,#f12828,#a00332,#9f0f31),linear-gradient(to bottom,#ae0034,#6f094c);
|
||||
background-clip: padding-box,border-box;
|
||||
background-origin: padding-box,border-box;
|
||||
box-shadow: inset 0 1px rgb(255 255 255 / 0.25),inset 0 -1px rgb(0 0 0 / 0.1),0 2px 4px rgb(0 0 0 / 0.25);
|
||||
transition-property: transform, filter;
|
||||
transition-duration: 0.2s;
|
||||
will-change: transform;;
|
||||
}
|
||||
.button:active{
|
||||
transform: scale(0.93);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
.button::after{
|
||||
content: "";
|
||||
--overflow-x:4px;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: calc(var(--overflow-x) * -1);
|
||||
border-image-source: url("/images/snow-cap.png");
|
||||
border-image-slice: calc(6 * 56 / 20) fill;
|
||||
border-image-width: calc(28px / 3);
|
||||
border-image-repeat: round;
|
||||
width: calc(100% + var(--overflow-x) * 2);
|
||||
height: 28px;
|
||||
filter: drop-shadow(0 2px 1px rgb(0 0 0 / 0.25));
|
||||
opacity: 1;
|
||||
animation: fadeIn 2s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0%,50%{
|
||||
opacity: 0;
|
||||
}
|
||||
100%{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.canvas{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>圣诞按钮</title>
|
||||
<link rel="stylesheet" href="234.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="snow-button">
|
||||
<button class="button">点赞</button>
|
||||
<button class="button">关注</button>
|
||||
<button class="button">收藏</button>
|
||||
</div>
|
||||
<!-- 用于绘制雪花 -->
|
||||
<canvas class="canvas"></canvas>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="234.js"></script>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
const canvas = document.querySelector(".canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// 获取设备像素比
|
||||
const pixelRatio = window.devicePixelRatio || 1;
|
||||
|
||||
// 创建雪花的数组
|
||||
const snowflakes = [];
|
||||
|
||||
// 定义雪花的构造函数
|
||||
class Snowflake {
|
||||
constructor() {
|
||||
// 雪花的x坐标，随机生成
|
||||
this.x = Math.random() * canvas.width;
|
||||
// 雪花的y坐标，随机生成
|
||||
this.y = Math.random() * canvas.height;
|
||||
// 雪花的最大尺寸
|
||||
const maxSize = 3;
|
||||
// 雪花的尺寸，随机生成
|
||||
this.size = Math.random() * (maxSize - 1) + 1;
|
||||
// 雪花的速度，尺寸乘以0.35
|
||||
this.velocity = this.size * 0.35;
|
||||
// 雪花的透明度
|
||||
const opacity = this.size / maxSize;
|
||||
// 雪花的填充颜色、透明度
|
||||
this.fill = `rgb(255 255 255 / ${opacity})`;
|
||||
// 雪花的风速
|
||||
this.windSpeed = (Math.random() - 0.5) * 0.1;
|
||||
// 雪花的风的角度
|
||||
this.windAngle = Math.random() * Math.PI * 2;
|
||||
}
|
||||
// 判断雪花是否超出画布
|
||||
isOutsideCanvas() {
|
||||
return this.y > canvas.height + this.size;
|
||||
}
|
||||
// 重置雪花的坐标
|
||||
reset() {
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = -this.size;
|
||||
}
|
||||
// 更新雪花的坐标
|
||||
update() {
|
||||
this.windAngle += this.windSpeed;
|
||||
this.wind = Math.cos(this.windAngle) * 0.5;
|
||||
|
||||
this.x += this.wind;
|
||||
this.y += this.velocity;
|
||||
|
||||
if (this.isOutsideCanvas()) {
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
// 绘制雪花
|
||||
draw() {
|
||||
ctx.beginPath();
|
||||
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = this.fill;
|
||||
ctx.fill();
|
||||
ctx.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建雪花的函数
|
||||
const createSnowflakes = () => {
|
||||
// 计算雪花的数量，根据画布的宽高比计算
|
||||
snowflakeCount = Math.floor(window.innerWidth * window.innerHeight / 1400);
|
||||
|
||||
// 循环创建雪花的实例
|
||||
for (let i = 0; i < snowflakeCount; i++) {
|
||||
snowflakes.push(new Snowflake());
|
||||
}
|
||||
};
|
||||
|
||||
// 重置画布的函数
|
||||
const resizeCanvas = () => {
|
||||
// 获取画布的宽高
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
// 设置画布宽高
|
||||
canvas.width = width * pixelRatio;
|
||||
canvas.height = height * pixelRatio;
|
||||
canvas.style.width = width + "px";
|
||||
canvas.style.height = height + "px";
|
||||
// 设置画布的缩放比例
|
||||
ctx.scale(pixelRatio, pixelRatio);
|
||||
// 清空雪花的数组
|
||||
snowflakes.length = 0;
|
||||
// 重新创建雪花的实例
|
||||
createSnowflakes();
|
||||
};
|
||||
|
||||
// 监听画布的resize事件,调用resizeCanvas函数
|
||||
window.addEventListener("resize", resizeCanvas);
|
||||
|
||||
resizeCanvas();
|
||||
|
||||
// 渲染函数
|
||||
const render = () => {
|
||||
requestAnimationFrame(render);
|
||||
|
||||
// 清空画布
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
// 遍历雪花的数组,更新雪花的坐标,绘制雪花
|
||||
snowflakes.forEach((snowflake) => {
|
||||
snowflake.update();
|
||||
snowflake.draw();
|
||||
});
|
||||
};
|
||||
|
||||
// 开始渲染
|
||||
render();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Loading…
Reference in New Issue