前端动画笔记

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

相关推荐
mCell8 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip8 小时前
Node.js 子进程:child_process
前端·javascript
excel11 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙15 小时前
[译] Composition in CSS
前端·css
白水清风15 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix15 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780015 小时前
new、原型和原型链浅析
前端·javascript