案例-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 ...
随机推荐
- redis 主从复制+读写分离+哨兵
1.redis读写分离应用场景 当数据量变得庞大的时候,读写分离还是很有必要的.同时避免一个redis服务宕机,导致应用宕机的情况,我们启用sentinel(哨兵)服务,实现主从切换的功能.redis ...
- UML 简介
虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合:
- L2Dwidget
只需要在[页首html代码]中引入L2Dwidget.js即可.<!-- 右下角live2d效果 --> <script src="https://eqcn.ajz.mie ...
- Js event对象offsetX，pageX，screenX，clientX详解
平时在测量元素位置时难以确定,下面给出具体的event对象中的各种属性,以便日后使用. 检测相对于浏览器的位置:clientX和clientY 当鼠标事件发生时,鼠标相对于浏览器左上 ...
- WebAPI 生成验证码
private HttpResponseMessage CreateCheckCodeImage(string checkCode) { HttpResponseMessage result = ne ...
- docker学习---搭建Docker私有库及删除库内镜像
环境准备系统: cat /etc/redhat-release CentOS Linux release (Core) 主机两台,分别是docker私有库服务器(IP 192.168.121.121) ...
- 入门phantomjs
前言 phantomjs是一个无界面浏览器,用来操作web页面的一个工具,比如登录,提交表单等等. 语法框 //创建一个浏览器对象 var page = require('webpage').crea ...
- jenkins参数化配置，pom.xml配置
1.要实现Jenkins参数化构建,要先在代码里写好能接收该参数value的配置,在pom.xml文件里加配置,如下: 1)<properties></properties>里 ...
- 割边的tarjan算法
与割点唯一一点不同是low[v]>=dfn[u]变为low[v]>dfn[u] 代码如下: bool vis[maxn]; int dfn[maxn],low[maxn]; int cnt ...
- Spring 讲解（四）
Spring 中使用注解注入 注解:就是一个类,使用 @ 注解名称. 实际开发中:使用注解取代 xml 配置文件. 1.常用注解释义 @component 取代 <bean class=&quo ...