用CSS和JavaScript写一个动画效果。
<!DOCTYPE html>
<html>
<head>
<title>Animation Example</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: move 2s infinite;
}
<pre><code> @keyframes move {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>
</code></pre>
</head>
<body>
<div id="box"></div>
<pre><code><script>
var box = document.getElementById("box");
box.addEventListener("mouseover", function() {
box.style.animationPlayState = "paused";
});
box.addEventListener("mouseout", function() {
box.style.animationPlayState = "running";
});
</script>
</code></pre>
</body>
</html>
<p>这个动画效果是一个红色的正方形在不断旋转，同时也有鼠标悬停时暂停的效果。在CSS中使用@keyframes定义动画的关键帧，然后在元素中使用animation属性来应用动画。在JavaScript中使用addEventListener来监听鼠标事件，并使用style属性来操作CSS样式。</p>
原文地址: https://www.cveoy.top/t/topic/bfsY 著作权归作者所有。请勿转载和采集!