爱心跳动效果 CSS实现

实现效果

砰砰砰

实现原理

通过动画改变每个元素的高度，从而实现每个元素高度变化的效果，为了使每个元素依次跳动，给每个元素添加一定的延时效果，使得从效果元素依次跳动

代码分析

核心动画

一共写了5个动画，但是实现的东西都是差不多的，只是改变的高度不同，这是其中的一个动画

改变元素的高度，并且上移一段距离，这个距离就是画爱心的关键，如果没有这个移动距离，元素始终保持着下端对齐，不会摆出爱心的效果，所以这个可以根据自己的实际高度来调定。

@keyframes jump1 {30%,50% {height: 60px;transform: translateY(-30px);}70%,100% {height: 20px;transform: translateY(0px);}
}

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>爱心跳动效果</title><style>* {margin: 0;padding: 0;}.loveBox {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: rgb(36, 40, 66);}.loveLine {height: 200px;}.loveLine li {float: left;list-style: none;width: 20px;height: 20px;border-radius: 10px;margin-right: 10px;}.loveLine li:nth-child(1) {background-color: red;animation: jump1 3s infinite;}.loveLine li:nth-child(2) {background-color: rgb(238, 118, 5);animation: jump2 3s 0.2s infinite;}.loveLine li:nth-child(3) {background-color: rgb(106, 10, 233);animation: jump3 3s 0.4s infinite;}.loveLine li:nth-child(4) {background-color: darkmagenta;animation: jump4 3s 0.6s infinite;}.loveLine li:nth-child(5) {background-color: rgb(245, 11, 147);animation: jump5 3s 0.8s infinite;}.loveLine li:nth-child(6) {background-color: rgb(32, 9, 231);animation: jump4 3s 1.0s infinite;}.loveLine li:nth-child(7) {background-color: rgb(36, 170, 81);animation: jump3 3s 1.2s infinite;}.loveLine li:nth-child(8) {background-color: #f62e74;animation: jump2 3s 1.4s infinite;}.loveLine li:nth-child(9) {background-color: red;animation: jump1 3s 1.6s infinite;}@keyframes jump1 {30%,50% {height: 60px;transform: translateY(-30px);}70%,100% {height: 20px;transform: translateY(0px);}}@keyframes jump2 {30%,50% {height: 120px;transform: translateY(-60px);}70%,100% {height: 20px;transform: translateY(0px);}}@keyframes jump3 {30%,50% {height: 160px;transform: translateY(-75px);}70%,100% {height: 20px;transform: translateY(0px);}}@keyframes jump4 {30%,50% {height: 180px;transform: translateY(-60px);}70%,100% {height: 20px;transform: translateY(0px);}}@keyframes jump5 {30%,50% {height: 200px;transform: translateY(-45px);}70%,100% {height: 20px;transform: translateY(0px);}}</style>
</head><body><div class="loveBox"><ul class="loveLine"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

感觉最近的文章内容都是很简单的东西，之后挑战一些有难度的东西吧！

爱心跳动效果 CSS实现相关推荐

使用css3画爱心并完成类似跳动效果
使用到的技术分别为:定位.位移.缩放和动画 <style>body {transform-style: preserve-3d;}.box {position: relative;marg ...
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
html怎么让爱心闪动,css画爱心并实现“爱心跳动”
第一次写博客,来记录自己在前端上的成长,并且希望能够借鉴到其他大神的经验来提高自己的水平.这次打算用css来画一个爱心并实现"爱心跳动"的功能,下面如果有表述不正确的叙述,欢迎各位 ...
利用CSS实现爱心跳动案例--浪漫爱心表白
CSS实现爱心跳动原理: 具体步骤: 先让大家看看心动的感觉吧: 不是吧,不是吧,如此浪漫的爱心表白竟然用CSS就可以完成.是的,你没有听错!接下来小编带大家制作爱心表白: 原理: 利用两个长方形的 ...
android 音符动画效果,纯css实现音符跳动效果
效果如图: image.png 代码: 纯css实现音符跳动效果 .voice { display: flex; align-items: flex-end; justify-content: cen ...
记录html+css制作一个上下跳动效果的动画
需求想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...
html音乐跳动的线,利用CSS3制作跳动音乐频谱跳动效果
[摘要] CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果. 在一个网站上看到"直播中"的提示标题, ...
鼠标点击出现小爱心的效果
鼠标点击出现小爱心的效果** 下面是js内容,引入即可! <script>(function(window,document,undefined){var hearts = [];wind ...
Canvas和JavaScript实现动态爱心粒子效果
爱心代码简述: 这段代码利用Canvas和JavaScript实现了一个简单的粒子效果,通过绘制爱心形状的粒子并随机生成.更新.绘制粒子,最终形成一个动态的爱心粒子效果.以下是代码的简要分析: 代码 ...

爱心跳动效果 CSS实现

爱心跳动效果 CSS实现

实现效果

实现原理

代码分析

完整代码

更多阅读

爱心跳动效果 CSS实现相关推荐

最新文章

热门文章