点赞出现星星往上飘特效的代码 不用ID的
时间: 2024-03-26 17:42:16 浏览: 18
以下是使用CSS3实现点赞出现星星往上飘特效的代码:
```html
<button class="like-btn">
<span class="like-icon"></span>
点赞
</button>
```
```css
.like-btn {
position: relative;
display: inline-block;
padding: 10px 20px;
border-radius: 20px;
background-color: #f5f5f5;
color: #666;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.like-btn:hover {
background-color: #e0e0e0;
}
.like-icon {
position: absolute;
top: -10px;
right: -10px;
width: 30px;
height: 30px;
background-image: url('star.png');
background-size: 100% 100%;
animation: like 1s ease-out forwards;
}
@keyframes like {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(2);
opacity: 0;
}
}
```
其中,`like-icon` 类用于设置星星的样式,`animation` 属性用于设置动画效果,`@keyframes` 规则用于定义动画过程。注意,需要将实际使用的图片路径替换为 `star.png`。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)