案例-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 ...
随机推荐
- html input标签 要求只能输入纯数字
在input标签添加以下代码即可 oninput = "value=value.replace(/[^\d]/g,'')" <input type="text&qu ...
- Feign基础教程
https://blog.csdn.net/u010862794/article/details/73649616 简介 Feign使得 Java HTTP 客户端编写更方便.Feign 灵感来源于R ...
- 最新版WinRAR5.61去广告代码教程分享（仅供学习交流）
最新版WinRAR5.61去广告代码教程分享(仅供学习交流) 第一步:到WinRAR官网www.rarlab.com下载自己需要的版本,选择Chinese Simplified 64bit 安装即可. ...
- 07.interrupt
/** *isInterrupted */ public class InterruptDemo { public static void main(String[] args) throws Int ...
- C++ 浅谈 strlen 与 sizeof的区别
先举个栗子: 字符串数组跟字符串指针,然后分别使用sizeof跟strlen看输出结果. char strA[] = "2017-7-19"; char *strB = " ...
- Spring Boot Service注入为null mapper注入为null @Component注解下@Value获取不到值 WebsocketServer类里无法注入service
最近搞了一下websocket前台(这个网上有很多的教程这里就不班门弄斧啦) 以及前后台的交互 和后台的bug(搞了两天) 也是状态频发 bug不断 下面说一说问题. Websocket主类里面无法注 ...
- Quartz.Net 任务调度之特性(3)
再实现类中使用,就是继承IJob的类 [PersistJobDataAfterExecution] //执行后的保留作业数据,链式传参(上一次的任务数据) [DisallowConcurrentExe ...
- 【leetcode】983. Minimum Cost For Tickets
题目如下: In a country popular for train travel, you have planned some train travelling one year in adva ...
- 【原理】Reids字典
I.字典的实现 Redis的字典使用哈希表作为底层实现. 1.1 哈希表 Redis字典所使用的哈希表结构定义如下: typedef struct dictht { // 哈希表数组 dictEntr ...
- Python深度学习
序言 目的驱动型学习 概念解释 资料 https://www.tensorflow.org/ https://www.imooc.com/video/17186 https://www.cnblogs ...