前端动画笔记

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

相关推荐
翻滚吧键盘29 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹36 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出2 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的2 小时前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解2 小时前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端