html5网页底部会跳动的小爱心，有大神有源码吗？

发布网友发布时间：2022-04-21 17:39

我来回答

共3个回答

热心网友时间：2023-07-02 07:50

在下研究了一下源代码，渗透到了服务器找了一下：

并强行爆破了一下

最终发现，这是引入了Font Awesome图标，并启用css3动画所制成的

原理为：

用Font Awesome引入一个心形，并用css设置为红色，再用css3关键帧动画使其放大缩小

这是从官网瓢来的源代码：（请确认已引入Font Awesome）

css3代码如下

@keyframes iconAnimate {

0%, 100% {

transform: scale(1);

}

10%, 30% {

transform: scale(0.9);

}

20%, 40%, 60%, 80% {

transform: scale(1.1);

}

50%, 70% {

transform: scale(1.1);

}

热心网友时间：2023-07-02 07:50

在头部添加下面的引用

添加li元素（心）

设置css

.fa-heart { /* 设置心的大小 */ font-size: 30px; /* 设置心的颜色 */ color: rgba(255, 0, 0, 0.1); animation: donghua /*调整第一个值可以调整跳动速度*/ 500ms 0ms infinite linear reverse } @keyframes donghua { from { color: rgba(255, 0, 0, 0.1); } to { color: rgba(255, 0, 0, 1); } }

操作如图，记得采纳哦，手写不易，不采纳以后再也不写答案了，

完整代码（直接复制使用）：

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><style>.fa-heart{font-size:30px;color:rgba(255,0,0,.1);animation:donghua .5s 0s infinite linear reverse}@keyframes donghua{from{color:rgba(255,0,0,.1)}to{color:rgba(255,0,0,1)}}</style></head><body><li class="fa fa-heart"></li></body></html>

热心网友时间：2023-07-02 07:51

那其实就是个gif图片追问并不是噢

全部栏目

html5网页底部会跳动的小爱心，有大神有源码吗？