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%间设置更多,旋转缩放设置更夸张些,动画完成的时间设置再短一些

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

相关推荐
jonssonyan1 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE5 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年7 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能18 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房18 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
摆烂为不摆烂22 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7723 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
伟笑1 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~1 小时前
重学前端003 --- CSS 颜色
前端·css
慧一居士1 小时前
CSS和CSS3区别对比
前端·css3