html基础入门----简单动画

1.实现步骤：

（1）定义动画

（2）执行动画

（1）定义动画

方式一：@keyframes 动画名{form{开始状态}to{结束状态}
}该方式没有中间状态方式二：@keyframes 动画名{0%{开始状态}*%{中间状态}100%{结束状态}
}

（2）执行动画

animation：动画名执行时间延迟时间次数曲线执行方向；

次数无数次：infinite

运动曲线匀速：linear

执行方向从form到to,再从to到from：alternate

注意：如果有多个动画执行，用逗号隔开

示例：

圆的缩放

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;/* 设置圆角 */border-radius: 50%;background: lightblue;/* 执行动画 */animation: change 3s infinite linear alternate;}/* 定义动画 */@keyframes change{from{/* 开始状态不变就不写 */}to{width: 400px;height: 400px;background: pink;}}</style>
</head>
<body><div></div>
</body>
</html>

html基础入门----简单动画相关推荐

Linux基础入门,简单讲解
Linux基础入门,简单讲解涵盖内容:计算机组成与Linux操作系统概论任务要求:大概了解计算机的主要组成部件,明白计算机磁盘分区方式,常用的计算单元换算以及LINUX是什么.有什么特点即可. 文 ...
SDL教程零基础入门简单操作 day1
1.0 SDL 简介文章目录 1.0 SDL 简介 1.1 什么是 SDL? 1.2 SDL 可以做什么? 2. 在VS上获取和安装 SDL 2.1 SDL2库下载 2.2 安装SDL2 2.3 在 ...
Electron 基础入门简单明了，看完啥都懂了
什么是 Electron? 介绍使用 JavaScript, HTML 和 CSS 构建跨平台(Windows.MacOs.Linux)的桌面应用--这是Electron官网的简介最初被GitHu ...
EGE基础入门篇（三）：开场动画
EGE专栏:EGE专栏上一篇:EGE基础入门篇(二):开始使用EGE 下一篇:EGE基础入门篇(四):窗口简单操作文章目录开场动画 1. EGE开场动画的默认方式 2. 开场动画的开启 3. 开 ...
视频教程-Python零基础入门高薪必看动画课程-Python
Python零基础入门高薪必看动画课程从事多年的Web应用开发,拥有10余年一线开发经验和教学经验.曾在中国银行从事数据采集服务,现专注于Python教学相关工作.参与过O2O外卖平台系统.微信商城 ...
python做动画视频教程_Python零基础入门动画教程
课程答疑: QQ群:913293727 适用人群在校大学生/应届毕业生/业余编程爱好者/初.中开发学习者/大中专院校师生/数据分析人员/技术支持/测试人员课程概述--课程大纲-- 1.Python ...
html间隔代码_HTML+CSS基础入门开发，经典Loading加载缩放动画特效
大家好,本篇文章分享经典Loading加载缩放动画特效,欢迎参考和指正. 效果图: Loading加载缩放动画特效 HTML代码: CSS代码: 知识点: animation:是CSS3的动画属性,这 ...
numpy基础篇-简单入门教程4
numpy基础篇-简单入门教程4 np.set_printoptions(precision=3),只显示小数点后三位 np.random.seed(100)rand_arr = np.random. ...
最基础的postman入门简单使用教程
最基础的postman入门简单使用教程 1.首先第一步是下载下载地址:链接:https://pan.baidu.com/s/18qxlLWs4z51SVlW7TpwVyQ 提取码:9802 ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...

html基础入门----简单动画

html基础入门----简单动画相关推荐

最新文章

热门文章