简单的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. 【IDEA&&Eclipse】5、IntelliJ IDEA常见配置

    [idea配置jdk] http://blog.csdn.net/tolcf/article/details/50803414 [idea intellij 如何配置tomcat]http://jin ...

  2. 【协议】1、tcp，http，socket协议介绍

    1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别”的网络之上. ...

  3. WCF Service 转换为Web Service 中字段属性

    1.新建WCF服务,服务中包含对象 2.部署WCF服务,并将其转换为应用程序 3.通过添加服务引用,使用WCF服务 4.调用对应的对象时需要对应的值设置为True. 参考:https://cloud. ...

  4. Python 练习: 打印0到99小于50或大于70的数字

    for i in range(100): if i < 50 or i > 70: print(i) 注意: range(100) 表示 0 到 99 个数字

  5. 【读书笔记】iOS-iOS流媒体

    在网络上直接看电影已经不是什么新鲜的事情,在iOS等移动设备上也有很多在线视频应用,如国内的PPS和PPLive应用,还有一些新闻视频都可以在线观看,如USA TODY.所以这些在线视频都采用流媒体技 ...

  6. 第三次web作业

    em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0 ...

  7. ComponetOne 2014 v3版本正式发布

    2014年11月18日---ComponentOne Studio Enterprise 2014 v3版全球正式发布.ComponentOne Studio Enterprise是世界知名的Micr ...

  8. springboot 学习之路 20 (整合RabbitMQ)

    整合RabbitMQ: 我的操作系统是window7 ,所以在整合ribbotMQ之前需要先安装rabbitMq服务:安装步骤请参考:window下安装RabbitMQ  这个详细介绍了安装步骤,请按 ...

  9. [20171225]没有备份数据文件的恢复.txt

    [20171225]没有备份数据文件的恢复.txt --//别人问的问题,增加了数据文件没有备份,如何恢复,实际上很简单,因为当前控制文件有记录建立时间只要从建立数据文件开始的--//归档日志都存在恢 ...

  10. python第三十六天-----类中的特殊成员方法

    __doc__ 查看尖的描述信息 __module__表示当前操作的对象所在的模块 __class__表示当前操作的对象所属的类 __init__构造方法 通过类创建对象自动执行 __del__析构方 ...