Mr.J--心形跳动demo

最新推荐文章于 2022-11-13 16:05:13 发布

End_less__

最新推荐文章于 2022-11-13 16:05:13 发布

阅读量1.8k

点赞数 8

分类专栏： Javascript学习 CSS

本文链接：https://blog.csdn.net/ms_yjk/article/details/88876921

版权

Javascript学习同时被 2 个专栏收录

49 篇文章 1 订阅

订阅专栏

CSS

10 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS动画属性，如`position`、`animation`和`@keyframes`规则，来创建一个心形跳动的动画效果。通过`@keyframes`逐步改变样式以产生动画，解释了百分比和`from/to`在定义动画过程中的作用。文中还提供了样例布局，并提到了其他两个使用原生JS实现的动画Demo，分别是《黑客帝国》代码雨和贪吃蛇游戏。

摘要由CSDN通过智能技术生成

最近学了一点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)