案例-2D会旋转的盒子（rotate）， 会缩放的盒子（scale），动画（animation）
2024-10-07 18:14:13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 会旋转的盒子样式开始 */
.box {
overflow: hidden;
position: relative;
width: 200px;
height: 200px;
border: 1px solid pink;
}
.box::after {
position: absolute;
top: 0;
left: 0;
content: "文字";
width: 200px;
height: 200px;
background: pink;
transform: rotate(90deg);
transform-origin: left bottom;
transition: all 0.4s;
}
div:hover::after {
transform: rotate(0deg);
}
/* 会旋转的盒子样式结束 */
/* 会缩放的盒子样式开始 */
li {
list-style: none;
float: left;
text-align: center;
width: 40px;
line-height: 40px;
margin: 20px 20px;
height: 40px;
border: 1px solid #000;
border-radius: 50%;
transition: all 0.3s;
}
li:hover {
transform: scale(1.2);
}
/* 会缩放的盒子样式结束 */
/* 仿热力图坐标发光样式开始 */
@keyframes scale {
70% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
.city {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dottod {
width: 8px;
height: 8px;
background: dodgerblue;
border-radius: 50%;
}
[class^="pused"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px dodgerblue;
border-radius: 50%;
animation: scale 1.2s linear infinite;
}
.pused2 {
animation-delay: 0.4s;
}
.pused2 {
animation-delay: 0.8s;
}
/* 仿热力图坐标发光样式结束 */
</style>
</head>
<body>
<div class="box">会旋转的盒子</div>
<h3>会缩放的盒子：</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<h3>动画</h3>
<div class="city">
<div class="dottod"></div>
<div class="pused1"></div>
<div class="pused2"></div>
<div class="pused3"></div>
</div>
</body>
</html>
最新文章
- overflow
- 登录成功，拿到token
- MYSQL界面操作系统之phpMyAdmin
- UBUNTU中如何获得root权限
- Mysql数据库实践操作之————批量插入数据（100万级别的数据）
- SDUT 3340 数据结构实验之二叉树一：树的同构
- Flash中的文本应用
- QT小技巧学习记录
- BZOJ 1146: [CTSC2008]网络管理Network( 树链剖分 + 树状数组套主席树 )
- XML文件解析数据结构
- spring4学习笔记
- PTA 树的遍历
- Nearest Common Ancestors （POJ 1330）
- 高效遍历匹配Json数据与双层for循环遍历Json数据
- 随机生成id
- tf多线程读取数据
- BigDecimal 工具类
- 十三、springboot集成定时任务(Scheduling Tasks)
- jQuery 复制节点的元素实现添加到购物车功能
- Centos7中使用ipset