写在前面
预览图皆为动图，文件体积略大，请大家耐心等待
本文包含了众多的 html + css + canvas + js 实现的前端动画，为了以免大家复制代码出错，故提供了完整的网盘下载路径，供大家直接下载
网盘路径
所有的例子都并非可完完全全应用到实际需求场景中的
本文所有的例子均是提供一个思路和方法，供大家改造
一. HTML5 房屋装饰工具
二. HTML5/CSS3 粒子效果进度条
三. Canvas 粒子效果文字动画特效
支持多种动态例子，欢迎大家前去尝试
四. Canvas 粒子模拟效果
五. Canvas 实现会跳舞的时间动画
六. HTML5 火焰文字特效
七. Canvas 3D 倒计时爆炸特效
八. Canvas 鼠标滑过星空背景特效
九. css3 跑马灯
预览图
源码
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
main{
display: flex;
background-color: #2c3a47;
/*用于设置图像居中 */
align-items: center;
justify-content: center;
width: 1920px;
height: 1000px;
animation: animate1 10s linear infinite;
}
/* 用于设置动画属性 其中filter用于做利镜其中的hue-rotate属性让图像运用色相旋转*/
@keyframes animate1 {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
main .cube {
position: relative;
height: 120px;
width: 120px;
}
main .cube span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 用于设置一个圆圈被分成几份 */
transform: rotate(calc(18deg*var(--i)));
}
/* :before用于设置在给定的属性之前添加效果 */
main .cube span::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: aqua;
box-shadow: 0 0 10px aqua ,0 0 20px aqua,0 0 40px aqua,0 0 80px aqua,0 0 100px aqua;
animation: animate 2s linear infinite;
animation-delay: calc(0.1s*var(--i));
}
@keyframes animate {
0% {
transform: scale(1);
}
80%,
100% {
transform: scale(0);
}
}
.loading{
color:#fff;
font-size: 20px;
position: relative;
top:100px;
right:100px;
}
@media (min-width:765px){
}
</style>
</head>
<body>
<main>
<div class="cube">
<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="loading">
<p>loading</p>
</div>
</main>
</body>
十. css3 彩虹爱心
预览图
源码
<svg id="hearts" viewBox="-600 -400 1200 800" preserveAspectRatio="xMidYMid slice">
<defs>
<symbol id="heart" viewBox="-69 -16 138 138">
<path d="M0,12
C 50,-30 110,50 0,120
C-110,50 -50,-30 0,12z"/>
</symbol>
</defs>
</svg>
const colors = ["#e03776","#8f3e98","#4687bf","#3bab6f","#f9c25e","#f47274"];
const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";
let heartsRy = []
function useTheHeart(n){
let use = document.createElementNS(SVG_NS, 'use');
use.n = n;
use.setAttributeNS(SVG_XLINK, 'xlink:href', '#heart');
use.setAttributeNS(null, 'transform', `scale(${use.n})`);
use.setAttributeNS(null, 'fill', colors[n%colors.length]);
use.setAttributeNS(null, 'x', -69);
use.setAttributeNS(null, 'y', -69);
use.setAttributeNS(null, 'width', 138);
use.setAttributeNS(null, 'height', 138);
heartsRy.push(use)
hearts.appendChild(use);
}
for(let n = 18; n >= 0; n--){useTheHeart(n)}
function Frame(){
window.requestAnimationFrame(Frame);
for(let i = 0; i < heartsRy.length; i++){
if(heartsRy[i].n < 18){heartsRy[i].n +=.01
}else{
heartsRy[i].n = 0;
hearts.appendChild(heartsRy[i])
}
heartsRy[i].setAttributeNS(null, 'transform', `scale(${heartsRy[i].n})`);
}
}
Frame()
