html跳动爱心代码,html+css实现跳动爱心❥(^_-)-Go语言中文社区

跳动爱心主要用了些css3的动画效果@keyframe,实现后的效果如下图(截图效果比较差)。代码再往下滑。

f3a9fb35b3e17a35fc66fb9004660e1e.gif

1.html代码

跳动爱心

2.css代码

*{

margin:0;

padding:0;

}

#background{

position:relative;

width:520px;

height:500px;

background:pink;

margin:30px auto;

}

.love{

width:300px;

height:300px;

background:#d5083b;

box-shadow:0px 0px 40px -4px #d5083b;

}

.love-left{

position:absolute;

top:0px;

left:0px;

border-radius:150px;

/*渐变色 渐变开始位置、渐变开始颜色、渐变结束颜色*/

background:linear-gradient(to left right,#ee0a44 0%,#d5083b 40%);

/*box-shadow:-15px -13px 40px -4px #d5083b;*/

/*box-shadow:0px 0px 40px -4px #d5083b;*/

/*background:red;*/

transform:scale(1);

animation:heart-beat 0.6s ease infinite;

z-index:3;

}

.love-right{

position:absolute;

top:0px;

right:0px;

border-radius:150px;

background:linear-gradient(to right left,#ee0a44 0%,#d5083b 50%);

/*background:red;*/

transform:scale(1);

animation:heart-beat 0.6s ease infinite;

z-index:2;

}

.love-bottom{

position:absolute;

top:109px;

left:110px;

transform:rotate(45deg) scale(1);

background:linear-gradient(to left top,#ee0a44 0%,#d5083b 40%);

/*background:red;*/

animation:heart-beat 0.6s ease infinite;

z-index:1;

}

@keyframes heart-beat{

0%{

transform:rotate(45deg) scale(1);

box-shadow:0px 0px 40px -4px #d5083b;

}

50%{

transform:rotate(45deg) scale(1.1);

box-shadow:5px 5px 40px 10px #d5083b;

}

100%{

transform:rotate(45deg) scale(1);

box-shadow:0px 0px 40px -4px #d5083b;

}

}

跳动爱心主要用了些css3的动画效果@keyframe,实现后的效果如下图(截图效果比较差)。

  • 9
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一段HTML5和CSS3制作的3D旋转爱心粒子代码,你可以将其复制到HTML文件中并在浏览器中查看效果: ```html <!DOCTYPE html> <html> <head> <title>3D旋转爱心粒子代码</title> <style> body { background-color: #000; overflow: hidden; } .heart { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; animation: rotate 10s linear infinite; } .heart .heart-piece { position: absolute; width: 100px; height: 100px; background-color: #f00; border-radius: 50%; transform-style: preserve-3d; animation: rotate 10s linear infinite; } .heart .heart-piece:before, .heart .heart-piece:after { content: ""; position: absolute; width: 100px; height: 100px; background-color: #f00; border-radius: 50%; transform-style: preserve-3d; animation: rotate 10s linear infinite; } .heart .heart-piece:before { transform: rotateY(90deg) rotateZ(45deg); } .heart .heart-piece:after { transform: rotateY(90deg) rotateZ(-45deg); } .heart .heart-piece:nth-child(1) { transform: rotateY(0deg) translateZ(50px); } .heart .heart-piece:nth-child(2) { transform: rotateY(90deg) translateZ(50px); } .heart .heart-piece:nth-child(3) { transform: rotateY(180deg) translateZ(50px); } .heart .heart-piece:nth-child(4) { transform: rotateY(-90deg) translateZ(50px); } @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } </style> </head> <body> <div class="heart"> <div class="heart-piece"></div> <div class="heart-piece"></div> <div class="heart-piece"></div> <div class="heart-piece"></div> </div> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值