<!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. hdu 1130How Many Trees?(卡特兰数）

    卡特兰数又称卡塔兰数,英文名Catalan number,是组合数学中一个常出现在各种计数问题中出现的数列. 以比利时的数学家欧仁·查理·卡塔兰 (1814–1894)的名字来命名,其前几项为(从第零 ...

  2. 页面跳转到Area区域连接

    @Html.ActionLink("主页", "Index", new { controller = "Test", Action = &q ...

  3. go语言从例子开始之Example10.map(字典)

    map 是 Go 内置关联数据类型(在一些其他的语言中称为哈希 或者字典 ) package main import "fmt" func main() { 要创建一个空 map, ...

  4. MAVEN项目标准目录结构（转）

    转自:http://blog.csdn.net/lengyue_wy/article/details/6718637 版权声明:本文为博主原创文章,未经博主允许不得转载.    1.标准目录结构: s ...

  5. github 配置ssh

    https://www.cnblogs.com/superGG1990/p/6844952.html

  6. ruby之基础语法

    ruby语法之哈希 =>相当于python的字典 ruby语法之数组 =>相当于python的列表 举例: gitaly= Hash.new #建立新Hash类型 gitaly['firs ...

  7. iSkysoft iMedia Converter Deluxe Mac如何制作视频？视频格式转换工具制作动图的方法

    使用iSkysoft iMedia Converter Deluxe Mac如何制作视频?使用视频格式转换工具,你可以轻松进行动图或视频的制作,也可以把你喜欢的视频的某一段提取出来,制作成你自己风格的 ...

  8. ICU lirary DownLoad

    { //https://github.com/unicode-org/icu }

  9. Tomcat访问任意磁盘的图片资源

    项目中用户上传的大量图片存放在项目底下带来诸多不便.每次部署项目都需要拷贝出来,防止覆盖掉以前的 图片.容易丢失,前功尽弃.甚至造成经济损失.不可估量. 如何配置tomcat访问图片路径呢?首页你代码 ...

  10. Python--线程队列(queue)、multiprocessing模块（进程对列Queue、管道(pipe)、进程池）、协程

    队列(queue) 队列只在多线程里有意义,是一种线程安全的数据结构. get与put方法 ''' 创建一个“队列”对象 import queue q = queue.Queue(maxsize = ...