前端动画笔记

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

相关推荐
幼儿园技术家4 分钟前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好1 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝1 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele1 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮2 小时前
【无标题】
开发语言·前端·javascript
谦行2 小时前
深度神经网络训练过程与常见概念
前端
Simon_He2 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊3 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录3 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃3 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端