jquery仿盖章效果
时间: 2023-08-17 14:06:55 浏览: 118
要实现仿盖章效果,你可以使用 jQuery 来添加动画效果。下面是一个示例代码,展示了如何使用 jQuery 来实现一个简单的盖章效果:
HTML 代码:
```html
<div class="seal">
<div class="inner-circle"></div>
<div class="outer-circle"></div>
<div class="text">公章</div>
</div>
<button id="stampBtn">盖章</button>
```
CSS 代码:
```css
.seal {
width: 200px;
height: 200px;
position: relative;
background-color: red;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.inner-circle {
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
}
.outer-circle {
width: 160px;
height: 160px;
background-color: red;
border-radius: 50%;
position: absolute;
}
.text {
color: white;
font-size: 24px;
}
.stamp {
animation: stampEffect 0.5s linear;
}
@keyframes stampEffect {
from { transform: scale(1); opacity: 1; }
to { transform: scale(0.8); opacity: 0.5; }
}
```
JavaScript/jQuery 代码:
```javascript
$(document).ready(function() {
$('#stampBtn').click(function() {
$('.seal').addClass('stamp');
setTimeout(function() {
$('.seal').removeClass('stamp');
}, 500);
});
});
```
在上述代码中,我们使用了 jQuery 的 `addClass()` 和 `removeClass()` 方法来添加和移除 `stamp` 类,这个类包含了一个盖章的动画效果。点击按钮时,通过添加和移除类来触发盖章效果。
需要注意的是,这只是一个简单的示例,实际应用中可能需要更复杂的动画效果和逻辑来实现更真实的盖章效果。可以根据具体需求进行调整和扩展。
阅读全文