HTML5:七天学会基础动画网页13

看完前面很多人可能还不是很明白0%-100%那到底是怎么回事,到底该怎么用,这里我们做一个普遍的练习------心跳动画

想让心❤跳起来,我们先分析一波,这个心怎么写,我们先写一个正方形,再令一个圆形前移:

再来一个圆向上移一下

最后再整体转一下,换成统一颜色就OK了

废话不多说,直接来看代码:

<title>心跳动画</title>

<style>

*{

margin: 0;

padding: 0;

}

.box{

width: 200px;

height: 200px;

background-color:red;

margin: 0 auto;

margin-top: 200px;

position: relative;

transform: rotate(45deg);

animation: name 2s infinite alternate;

}

/* 因为before元素与after元素是行内元素不能设置宽高要进行脱标 */

/* 用圆角制作两个圆,再移动到正方形的两边 */

.box::before{

content: '';

width: 200px;

height: 200px;

background-color: red;

position:absolute;

border-radius: 50%;

transform: translate(-100px,0px);

}

.box::after{

content: '';

width: 200px;

height: 200px;

background-color: red;

position:absolute;

border-radius: 50%;

transform: translate(0px,-100px);

}

@keyframes ++name++{

from{}

10%{transform: rotate(30deg) scale(1.5);}

20%{transform: rotate(60deg) scale(2);}

30%{transform: rotate(30deg) scale(.8);}

40%{transform: rotate(-30deg) scale(1.5);}

50%{transform: rotate(-60deg) scale(2);}

60%{transform: rotate(-90deg) scale(2.5);}

70%{transform: rotate(-30deg) scale(1.5);}

80%{transform: rotate(30deg) scale(.8);}

90%{transform: rotate(60deg) scale(1.5);}

to{transform: rotate(90deg) scale(2.5);}

}

</style>

</head>

<body>

<div class="box"></div>

</body>

然后我们就可以看到这个心❤跳起来了

如果想让它跳的更激动,这里缩放旋转我都是随便写的,我们可以让0%-100%间设置更多,旋转缩放设置更夸张些,动画完成的时间设置再短一些

这个动画基础也快结束了,后面可以直接来上手写一些网页带大家看一下。

相关推荐
ac.char8 分钟前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
贵沫末15 分钟前
React——基础
前端·react.js·前端框架
每天开心20 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry27 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9334 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子35 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982435 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug38 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo38 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html