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

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

相关推荐
夫琅禾费米线9 分钟前
[有趣的JavaScript] 为什么typeof null返回 object
开发语言·前端·javascript
小镇程序员5 小时前
vue2 src自定义事件
前端·javascript·vue.js
AlgorithmAce7 小时前
Live2D嵌入前端页面
前端
nameofworld7 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
前端fighter8 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
GISer_Jing8 小时前
从0开始分享一个React项目:React-ant-admin
前端·react.js·前端框架
川石教育8 小时前
Vue前端开发子组件向父组件传参
前端·vue.js·前端开发·vue前端开发·vue组件传参
GISer_Jing9 小时前
Vue前端进阶面试题目(二)
前端·vue.js·面试
乐闻x9 小时前
Pinia 实战教程:构建高效的 Vue 3 状态管理系统
前端·javascript·vue.js
weixin_431449689 小时前
web组态软件
前端·物联网·低代码·编辑器·组态