案例-2D会旋转的盒子（rotate）， 会缩放的盒子（scale），动画（animation）
<!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>
案例-2D会旋转的盒子（rotate）， 会缩放的盒子（scale），动画（animation）的更多相关文章
- CSS3的2D 转换——旋转，缩放，translate()，skew()，matrix()
2D转换方法:在平面对元素进行旋转,缩放,移动,拉伸. ㈠浏览器支持 ⑴2D转换效果有以下的浏览器支持: ⑵在编辑代码的时候要注明用哪种浏览器打开,在前面加上前缀,下面是编辑器的简写形式,以及前缀 ...
- 偏移：translate ，旋转：rotate，缩放 scale，不知道什么东东：lineCap 实例
<!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...
- C++ STL 逆转旋转 reverse reverse_copy rotate
#include <iostream>#include <algorithm>#include <vector>#include <iterator> ...
- 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)
× 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...
- UIView动画效果之----翻转.旋转.偏移.翻页.缩放.取反的动画效
翻转的动画 //开始动画 [UIView beginAnimations:@"doflip" context:nil]; //设置时常 [UIView setAnimationDu ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
- 使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。
使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不 ...
- 【css】IE盒子模型和标准W3C盒子模型
其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...
- ArcGIS案例学习笔记4_2_城乡规划容积率计算和建筑景观三维动画
ArcGIS案例学习笔记4_2_城乡规划容积率计算和建筑景观三维动画 概述 计划时间:第4天下午 目的:城市规划容积率计算和建筑三维景观动画 教程: pdf page578 数据:实验数据\Chp13 ...
随机推荐
- 算法8-5：Prim算法
Prim算法用于计算最小生成树.Prim算法分为两种,一种是懒汉式,一种是饿汉式. 懒汉式Prim 懒汉式Prim算法过程例如以下: 首先将顶点0增加到MST中 从MST与未訪问顶点之间边中选出最短的 ...
- 50.Maximal Square（最大正方形）
Level Medium 题目描述: Given a 2D binary matrix filled with 0's and 1's, find the largest square conta ...
- db2中将表中的某一字段设置为自增长
DB2可以使用generated always as identity 将某一个字段指定为自增长的字段: 这表示id自动是一个自增长的字段,它从1开始增加每次增加1.也可以通过generated 将字 ...
- Uncaught PDOException: SQLSTATE[HY000] [2002] No such file or directory
执行下面的代码报错: $pdo = new PDO('mysql:dbname=db_test;host=localhost', 'root', '123456'); PHP Fatal error: ...
- thinkphp5 自动注册Hook机制钩子扩展
Hook.php 文件已更新1.修复在linux环境下类的 \ 在basename 下无法获取到类名的问题2.修复linux 环境下无法使用hook::call 调用失败问题 请先安装thinkphp ...
- 十、设计模式之代理(Proxy)模式
什么是代理模式 代理模式是对象的结构模式,为其他对象提供一种对象以控制对这个对象的访问. 代理模式的结构图如下:(源自大话设计模式) Subject:定义了RealSubject和Proxy的公共 ...
- 基于AtomicReference的单例模式写法
AtomicReference类主要属性(来源于jdk1.7中的源码) public class AtomicReference<V> implements java.io.Seriali ...
- input file 上传文件类型控制
文件类型 accept *.3gpp audio/3gpp, video/3gpp.ac3 audio/ac3.asf allpication/vnd.ms-asf.au audio/basic.cs ...
- oracle exp不生成dumpfile，预估出实际导出文件的大小。
目的:在不创建dumpfile前预估出需要的导出文件大小. 适用于export 实验步骤如下:OS: Linux test20 2.6.18-238.el5 #1 SMP Sun Dec ...
- Guarded Suspension模式简单实现
Guarded Suspension 意为保护暂停,假设服务器很短时间内承受大量的客户端请求,客户端请求的数量超过服务器本身的即时处理能力,而服务器又不能丢弃任何一个客户端请求,此时可以让客户端的请求 ...