案例-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 ...
随机推荐
- 【目录】Identityserver 4 老张的哲学
随笔分类 - .IdentityServer4 从壹开始 [ Ids4实战 ] 之四 ║ 用户数据管理 & 前后端授权联调 摘要: 前言 哈喽~~~ 大家周一好!夏天到了,大家舒服了没有,熟话 ...
- Pycharm 激活码2017最新
BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...
- 【异常】Caused by: java.lang.IllegalStateException: Method has too many Body parameters
出现此异常原因是引文使用feign客户端的时候,参数没有用注解修饰 1.1GET方式错误写法 @RequestMapping(value="/test", method=Reque ...
- codelite配置信息
codelite下编译执行wxwidgets库需要修改链接库如下: 原来的c++ compiler配置-g;-O0;-Wall;$(shell wx-config --cflags --debug) ...
- dotNET面试（一）
1.列举ASP.NET 页面之间传递值的几种方式. 1).使用QueryString, 如....?id=1; response. Redirect().... 2).使用Session变量 3).使 ...
- 七、OIDC
在 OAuth 中,这些授权被称为scope. OpenID-Connect也有自己特殊的scope--openid , 它必须在第一次请求“身份鉴别服务器”(Identity Provider,简称 ...
- 错误描述：fatal error C1010: 在查找预编译头时遇到意外的文件结尾。是否忘记了向源中添加“#include "stdafx.h"”?(转)
错误分析: 此错误发生的原因是编译器在寻找预编译指示头文件(默认#include "stdafx.h")时,文件未预期结束.没有找到预编译指示信息的头文件"stdafx. ...
- Spring Boot Service注入为null mapper注入为null @Component注解下@Value获取不到值 WebsocketServer类里无法注入service
最近搞了一下websocket前台(这个网上有很多的教程这里就不班门弄斧啦) 以及前后台的交互 和后台的bug(搞了两天) 也是状态频发 bug不断 下面说一说问题. Websocket主类里面无法注 ...
- array_reduce — 用回调函数迭代地将数组简化为单一的值
定义和用法 array_reduce() 函数向用户自定义函数发送数组中的值,并返回一个字符串. 注释:如果数组是空的且未传递 initial 参数,该函数返回 NULL. 说明 array_redu ...
- Socket网络通信——IO、NIO、AIO介绍以及区别
一 基本概念 Socket又称"套接字",应用程序通常通过"套接字"向网路发出请求或者应答网络请求. Socket和ServerSocket类位于java.ne ...