前端动画笔记

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>动画</title>

<style type="text/css">

.box{

width: 300px;

height: 500px;

border: 5px solid orange;

font-size: 36px;

color: black;

line-height: 200px;

/* step2:绑定动画

animation:动画名称 持续时间 次数 速度 延迟

infinite:无限次

/*from: 开始帧

to:结束帧

百分比:时间节点

*/

animation:changge 10s infinite linear 1s;

}

/* 动画:

step1:创建关键帧 @keyframes 动画名称{

from{}

to{}

}

*/

@keyframes changge {

0%,15%{width: 300px;

height: 500px;

border: 5px solid orange;

}

20%,40%{/* 某种状态持续一段时间 */

transform: rotate(0);

background-color: aqua;

/* 开始帧 */ }

45%,65% {

width: 800px; /* 结束帧 */

transform: rotate(180deg);

background-color: pink;

}

60%{

width: 1200px;

height: 200px;

background-color: blue;

}

100%{

width: 300px;

height: 300px;

background-color: aquamarine;

transform: rotate(360deg);

}

}

</style>

</head>

<body>

<div class="box">这是cp</div>

</body>

</html>

相关推荐
web守墓人35 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L40 分钟前
CSS知识复习5
前端·css
许白掰41 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法