最近学了一点CSS动画的属性，看了课程之后，重新做了一下心跳跳动的小demo。

属性

position

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

animation

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

@keyframes 规则

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

以上内容均来自菜鸟教程（CSS3教程）

demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Heart</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="heart"><!-- 左侧心形  --><div class='topLeft'></div><!-- 右侧心形 --><div class='topRight'></div><!-- 心底部 --><div class='bottom'></div>
</div>
<br /><br /><br />
<div style="text-align:center;clear:both;">
</div>
</body>
</html>

样式布局

此次心跳的图形由三部分组成，并使用border-radius属性进行圆角。使用transform属性进行图片缩放，rotate属性进行角度变化，旋转，防止看起来比较僵硬的变化。


body {background: black;
}
.heart {/* 内容居中 */margin: 100px auto;/* 定义宽高 */width: 200px;height: 200px;/* border: 1px solid #0094ff; *//* 定位 */position: relative;/* 调用动画名字 */animation-name: shake;/* 动画时间 */animation-duration: .5s;/* 动画执行次数 */animation-iteration-count: infinite;
}
.heart div {/* border: 1px solid #0094ff; */width: 100%;height: 100%;/* 位置操作 */position: absolute;/* 背景颜色 */background: pink;/* 调用动画 */animation-name: shadow;/* 定义动画时间 */animation-duration: .5s;/* 动画执行次数 */animation-iteration-count: infinite;
}
.topLeft,
.topRight {
/* 定义心形圆角 */
border-radius: 100px 100px 0 0;
}
/* <!-- 旋转正方形 --> */
.topLeft {
transform: translate(-50px, 0) rotate(-45deg);
}
.topRight {
transform: translate(50px, 0) rotate(45deg);
}
.bottom {
transform: translate(0, 64px) rotate(45deg) scale(.9, .9);
}
/* 定义动画 */@keyframes shake {from {transform: scale(.9, .9);}to {transform: scale(1.1, 1.1);}
}/* 改变心跳颜色时这部分要同时进行改变 */
@keyframes shadow {from {box-shadow: 0px 0px 0px pink;}to {box-shadow: 0px 0px 50px pink;}
}

原生JS实现《黑客帝国》代码雨开头 demo rain

原生JS实现贪吃蛇 Snake demo

源码见我github(Github.Jackyjk_gameJS)

Mr.J--心形跳动demo相关推荐

利用MATLAB绘制各种表白心形-跳动心形
利用MATLAB绘制各种表白心形♥ 跳动三维心形表白情人节必备面向工科屌丝男固定心形的各种画法见下面连接链接: https://blog.csdn.net/weixin_44044161/ar ...
Mr.Captain东：跳动的心（CSS3）
CSS3新特性利用CSS3新特性制作,具有跳动效果的心使用软件: 1. HBulider 2. 火狐浏览器使用知识点 CSS3新特性: 1.border-radius 属性是一个最多可指定四个 ...
【输出一个静态“心形”图案、一个跳动的“心”——使用C++、C语言来实现】
阅读目录题目代码(1)---静态"心形"(C++) 运行(1) 代码(2)---动态"心形"(C语言) 运行(2) 题目使用C++.C语言来打印一个静态& ...
51单片机基于Proteus的8X8点阵滚动显示心形
代码及仿真原理图下载地址: https://download.csdn.net/download/qq_41639829/10641349 一.效果展示及连线方式注:制作动图时效果显示不好二.所用 ...
C++ 和 EasyX绘制心形代码
环境准备 Visual Studio 2019 Community(或任意VC10以上) 这里给出的Visual Studio链接是2022的,可以在页面最下端找到较早的下载项选项.详细的安装过程请移 ...
c++心形编码_c语言心形告白代码实现
心形告白代码实现 1.彩色告白 #include #include #include #include #define u 0.1 #define v 0.053 void setcolor(unsi ...
php编程输出心形图案_利用php输出不同的心形图案，php心形图案_PHP教程
利用php输出不同的心形图案,php心形图案首先为大家分享php输出心形曲线的代码,代码如下效果如下: 利用php输出笛卡尔心形图案,代码如下复制代码代码如下:$width = 600; $h ...
php 实现心芯图案,利用php输出不同的心形图案
首先为大家分享php输出心形曲线的代码,代码如下效果如下: 利用php输出笛卡尔心形图案,代码如下复制代码代码如下: $width = 600; $height = 650; header(&q ...
C语言520心形表白，初学者福利！！
C语言实现打印出心形,初学者的表白神器. 解题思路:这道例题我分了4部分,前3行一部分,4-6行一部分,7-13行一部分,最后一行一部分,读者请仔细阅读注释,小林写的很详细了. 前三行输出,为了让初学 ...

Mr.J--心形跳动demo

属性