HTML5動(dòng)畫效果能夠讓網(wǎng)頁(yè)更加生動(dòng)有趣，吸引用戶的眼球。下面將介紹幾種HTML5動(dòng)畫效果的代碼實(shí)現(xiàn)方法。

//1. 畫板效果
//創(chuàng)建畫板華麗綻放的動(dòng)畫效果，讓用戶在每畫一筆的時(shí)候都有一種成就感
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var increase = 0.1;
function drawCircle(x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'white';
ctx.fill();
}
function draw() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var circles = (canvas.width * canvas.height) / 12000;
var radius = 0;
while (circles--) {
var x = Math.random() * canvas.width;
var y = Math.random() * canvas.height;
radius = 0;
while (radius< 30) {
radius += increase;
drawCircle(x, y, radius);
}
}
}
window.addEventListener('load', function () {
draw();
});
//2. 鼠標(biāo)跟隨效果
//給網(wǎng)頁(yè)添加一個(gè)鼠標(biāo)跟隨效果，讓光標(biāo)的進(jìn)入和移出更加流暢，并增加用戶的使用體驗(yàn)
var area = document.querySelector('.area');
var circle = document.querySelector('.circle');
area.addEventListener('mousemove', function (event) {
var x = event.pageX;
var y = event.pageY;
circle.style.left = x + 'px';
circle.style.top = y + 'px';
});
area.addEventListener('mouseenter', function () {
circle.classList.add('active');
});
area.addEventListener('mouseleave', function () {
circle.classList.remove('active');
});
//3. 翻轉(zhuǎn)效果
//為網(wǎng)頁(yè)添加一個(gè)翻轉(zhuǎn)效果，讓用戶更加清晰地了解信息的展示和隱藏情況
var card = document.querySelector('.card');
var flipButton = document.querySelector('.flip-button');
function toggleFlip() {
card.classList.toggle('flip');
}
flipButton.addEventListener('click', toggleFlip);