前端动画笔记

<!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>

相关推荐
roman_日积跬步-终至千里30 分钟前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang33 分钟前
在Windows上搭建开发环境
前端·后端
littleplayer33 分钟前
Redux在iOS中的使用
前端
跟橙姐学代码35 分钟前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling55535 分钟前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati35 分钟前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试
Cache技术分享39 分钟前
188. Java 异常 - Java 异常处理规范
前端·后端
不一样的少年_41 分钟前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手1 小时前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript