<!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）的更多相关文章

  1. CSS3的2D 转换——旋转，缩放，translate()，skew()，matrix()

    2D转换方法:在平面对元素进行旋转,缩放,移动,拉伸. ㈠浏览器支持 ⑴2D转换效果有以下的浏览器支持:   ⑵在编辑代码的时候要注明用哪种浏览器打开,在前面加上前缀,下面是编辑器的简写形式,以及前缀 ...

  2. 偏移：translate ，旋转：rotate，缩放 scale，不知道什么东东：lineCap 实例

    <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas</ ...

  3. C++ STL 逆转旋转 reverse reverse_copy rotate

    #include <iostream>#include <algorithm>#include <vector>#include <iterator> ...

  4. 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)

    × 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...

  5. UIView动画效果之----翻转.旋转.偏移.翻页.缩放.取反的动画效

    翻转的动画 //开始动画 [UIView beginAnimations:@"doflip" context:nil]; //设置时常 [UIView setAnimationDu ...

  6. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

  7. 使用bootstrap网格系统自适应盒子宽度时保持所有盒子高度一致。

    使用了bootstrap网格系统的好处是很容易便实现了响应式布局,盒子可以根据设置的样式,随着屏幕的大小改变而自动改变宽度,但是也存在一个问题,那就是盒子的高度是由盒子的内容决定的,如果盒子里的内容不 ...

  8. 【css】IE盒子模型和标准W3C盒子模型

    其实盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型. 1.标准盒子 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 c ...

  9. ArcGIS案例学习笔记4_2_城乡规划容积率计算和建筑景观三维动画

    ArcGIS案例学习笔记4_2_城乡规划容积率计算和建筑景观三维动画 概述 计划时间:第4天下午 目的:城市规划容积率计算和建筑三维景观动画 教程: pdf page578 数据:实验数据\Chp13 ...

随机推荐

  1. Vue-基础(二)

    一,Vue中的组件化开发: Vue中的组件也就是Vue实例 组件类型: 通用组件(例如,表单,弹窗,布局类等) 业务组件(抽奖,机器分类) 页面组件(单页面开发程序的每个页面都是一个组件) 组件开发三 ...

  2. elasticsearch 嵌套对象之嵌套类型

    nested类型是一种特殊的对象object数据类型(specialised version of the object datatype ),允许对象数组彼此独立地进行索引和查询. 1. 对象数组如 ...

  3. 怎么更新 WIN10里的SMBv1协议

    控制面板 ---启用或关闭Windows功能---打开SMBv1服务:

  4. Redis的常用命令及数据类型

    Redis支持的五种数据类型 字符串 (string) 字符串列表 (list) 散列 (hash) 字符串集合 (set) 有序字符串集合 (sorted-set) key(键) keys * 获取 ...

  5. LNMP环境安装

    一.LNMP 1.使用LNMP的优点: 资源占用少 更多并发 代理服务器 热启动 稳定高效 负载均衡 邮件服务器 2.安装前准备: 2.1查看防火墙(默认开启): [root@localhost ~] ...

  6. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  7. 【Linux】 Centos7 安装 mysql-8.0

    本文介绍使用rpm包安装mysql, 以 mysql-8.0.17-1.el7.x86_64.rpm-bundle.tar 为例: 1.下载 MySQL下载地址:https://dev.mysql.c ...

  8. BZOJ 4619: [Wf2016]Swap Space(贪心)

    传送门 解题思路 首先肯定是先处理\(b>a\)的,这样可以获得更多空间.处理时要先处理\(a\)比较小的,再处理\(a\)比较大的,因为要求最小值,而\(b>a\)的总量是确定的,那么就 ...

  9. AcWing 220.最大公约数 欧拉函数打卡

    题目:https://www.acwing.com/problem/content/222/ 题意:求1-n范围内,gcd(x,y)是素数的对数 思路:首先我们可以针对每个素数p,那么他的贡献应该时  ...

  10. python基础三（深浅拷贝）

    1.赋值操作 list_1 = [1,2,3,['barry','Jerry']] list_2 = list_1 list_1[0] = 111 print(list_1) # [111, 2, 3 ...