前端css+jquery记一个特效动画
warning:
这篇文章距离上次修改已过187天，其中的内容可能已经有所变动。
以下是一个使用CSS和jQuery创建的简单动画特效的示例。这个特效会在鼠标悬停时触发，使得元素放大并显示出来。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画特效示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #333;
transition: transform 0.5s ease-in-out;
transform: scale(0);
}
</style>
</head>
<body>
<div class="box"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('.box').hover(function(){
$(this).css('transform', 'scale(1)');
}, function(){
$(this).css('transform', 'scale(0)');
});
});
</script>
</body>
</html>这段代码中，.box 类定义了一个方框并设置了过渡效果。当鼠标悬停在 .box 元素上时，jQuery 的 .hover 方法被触发，通过改变 transform 属性的值来触发放大缩小动画。
评论已关闭