在CSS3中，你可以使用:hover、:active、:focus等伪类来触发动画。这里有一个简单的例子，当鼠标悬停在元素上时，元素会放大并改变颜色：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
CSS (styles.css):
.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.5);
background-color: blue;
}
在这个例子中，当鼠标悬停在.box元素上时，它会放大到原来的1.5倍，并将背景颜色从红色变为蓝色。transition属性用于定义动画的持续时间、缓动函数等。
如果你需要在特定事件发生时触发动画，例如点击按钮，你可以使用JavaScript来添加或删除一个类，然后在CSS中定义这个类对应的动画效果。这里有一个简单的例子：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="myButton">Click me</button>
<div class="box"></div>
<script src="scripts.js"></script>
</body>
</html>
CSS (styles.css):
.box {
width: 100px;
height: 100px;
background-color: red;
transition: all 0.3s ease-in-out;
}
.box.active {
transform: scale(1.5);
background-color: blue;
}
JavaScript (scripts.js):
document.getElementById('myButton').addEventListener('click', function() {
var box = document.querySelector('.box');
box.classList.toggle('active');
});
在这个例子中，当用户点击按钮时，.box元素会添加或删除active类，从而触发动画效果。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
