简单的CSS圆形缩放动画

话不多说鼠标移动上去，看效果吧，效果预览

代码如下：

<!DOCTYPE html>

<html>

  <head>

    <title>css圆形缩放动画</title>

    <style>

      .circular {

        position: relative;

        width: 48px;

        height: 48px;

      }

      .circular i {

        position: absolute;

        top: 0;

        left: 0;

        width: 48px;

        height: 48px;

      }

      .circular i:before {

        content: '';

        border-radius: 50%;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background-color: #20a839;

      }

      .circular i:after {

        content: '';

        transition: all .3s;

        border-radius: 50%;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        transform: scale(0);

        background-color: #30cc54;

      }

      .circular:hover i:after {

        transform: scale(1);

      }

    </style>

  </head>

  <body>

    <div class="circular">

      <i></i>

    </div>

  </body>

</html>

简单的CSS圆形缩放动画的更多相关文章

  1. Silverlight & Blend动画设计系列三：缩放动画（ScaleTransform）

    在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...

  2. 缩放动画（ScaleTransform）

    在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...

  3. android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下，另行实现圆形scale动画

    ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...

  4. UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  5. 仿Inshot分享页图片圆形展开缩放动画

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/221 圆形展开缩放动画 关键代码: final Anima ...

  6. 简单CSS实现闪烁动画（+1白话讲解）

    原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...

  7. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  8. iOS开发笔记10:圆点缩放动画、强制更新、远程推送加语音提醒及UIView截屏

    1.使用CAReplicatorLayer制作等待动画 CALayer+CABasicAnimation可以制作很多简单的动画效果,之前的博客中介绍的“两个动画”,一个是利用一张渐变色图片+CABas ...

  9. AndroidTv Home界面实现原理（二）——Leanback 库的主页卡位缩放动画源码解析

    先看个效果图: 上一篇中,我们留了问题,在 Tv Home 界面这种很常见聚焦卡位放大动画效果,我们这一篇就来看看 Leanback 库是怎么实现的. 如果要我们自己实现的话,思路应该不难,就是写个放 ...

随机推荐

  1. 【Java并发编程】14、Thread，线程说明

    线程的状态:New.Runnable.Blocked.Waiting.Timed waiting.Terminated 1. RUNNABLE,对应"就绪"和"运行&qu ...

  2. 递归函数获得n个不重复的随机数

    // 递归函数获取不重复的随机数 var arr_end; // 用于保存最后得到的数组 function suiji(n) { var arr = [] // 产生n个随机数加入数组 for(var ...

  3. mysql 5.7 线程阻塞处理

    出现的错误: ERROR 1205 (HY000): Lock wait timeout exceeded; try restarting transaction 解决办法: 查看sleep的进程 m ...

  4. python爬虫入门---第三篇：保存一张图片

    import requests import os url = 'http://imgsrc.baidu.com/forum/w%3D580%3B/sign=749ed018cecec3fd8b3ea ...

  5. Python爬虫html解析工具beautifulSoup在pycharm中安装及失败的解决办法

    1.安装步骤: 首先,你要先进入pycharm的Project Interpreter界面,进入方法是:setting(ctrl+alt+s) ->Project Interpreter,Pro ...

  6. python之约束, 异常处理, md5

    1. 类的约束 1. 写一个父类. 父类中的某个方法要抛出一个异常 NotImplementedError (重点) 2. 抽象类和抽象方法 # 语法 # from abc import ABCMet ...

  7. (网页)Java日志记录框架Logback配置详解(企业级应用解决方案)(转)

    转自CSDN: 前言 Logback是现在比较流行的一个日志记录框架,它的配置比较简单学习成本相对较低,所以刚刚接触该框架的朋友不要畏惧,多花点耐心很快就能灵活应用了.本篇博文不会具体介绍Logbac ...

  8. 导入另一个 Git库到现有的Git库并保留提交记录

    在要合并到的目标git仓库,执行 "git pull  远程分支地址/本地git仓库根目录"

  9. PowerDesin把name复制到Comment，把Comment复制到Name

    PowerDesin把name复制到Comment,把Comment复制到Name的方法: PowerDesigner->Tools->Execute Commands->Edit/ ...

  10. 分布式文件系统(HDFS）与 linux系统文件系统 对比

    初次接触分布式文件系统,有很多迷惑.通过参考网络文章,这里进行对比一下Hadoop 分布式文件系统(HDFS)与 传统文件系统之间的关系:   Linux 文件系统 分布式文件系统 块 块对应物理磁盘 ...