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

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

相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
rannn_1117 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go7 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5