简单的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. Ubuntu下redis允许外部链接

    原文地址: https://blog.csdn.net/a150827/article/details/51352395 redis在ubuntu安装后默认是只有本地访问,需要别的ip访问我们需要修改 ...

  2. 基于IDEA的bs三层架构

    1.在大学的老师讲课中,可能会用到myeclipse或者eclipse来进行编译运行.其中的缺点就是要自行去下载开发所需要的一些jar包,要考虑都版本的不同造成的影响,且ORACLE和MYSQL的链接 ...

  3. js array 数组添加与删除数据

    //新建数组 var ids =new Array(); //向数组中添加数据 ids.push(1); //删除下标为i的数组元素 ids.remove(i); //自定义删除函数: Array.p ...

  4. √n求单值欧拉函数

    基本定理: 首先看一下核心代码: 核心代码 原理解析: 当初我看不懂这段代码,主要有这么几个问题: 1.定理里面不是一开始写了一个n*xxx么?为什么代码里没有*n? 2.ans不是*(prime[i ...

  5. Ajax的实现及使用-zepto

    正文 之前归纳了ajax技术的基础知识,汗颜的是这两篇本应该在年初补上的,但因为种种原因,并没有补上.不过还好最近有空,所以开始整理之前的日记.共分为两篇:对于zepto ajax代码的实现解析;对于 ...

  6. WebLogic 11g的安装与配置详谈配置详谈

     之前以weblogic8.1为例介绍了其具体安装,但是由于现在weblogic 11g毕竟使用越来越广泛 ,因此,下面将介绍weblogic 11g的具体安装以及配置: 一.安装步骤(基本跟之前we ...

  7. .Net Core(一)环境搭建与基本使用

    .Net Core(一)环境搭建与基本使用 一.系统配置 a) Linux下如果想要打开类似任务管理器,可以使用top命令,在控制台会动态刷新CPU和内存占用.进程等信息.vmstat和free命令可 ...

  8. 《ASP.NET MVC企业实战》(一) MVC开发前奏

    一.工具和方法 学到了一些没用过的工具和方法: a)删除多余的using指令并排序:一个类头部的using一般会有很多用不到的,在完成类的编写后,可以右键选择”组织using”来删除没用的using并 ...

  9. Android事件总线（二）EventBus3.0源码解析

    1.构造函数 当我们要调用EventBus的功能时,比如注册或者发送事件,总会调用EventBus.getDefault()来获取EventBus实例: public static EventBus ...

  10. (后端)sql server 按时间段查询

    百度的资料,保存下来: 在写按时间段查询的sql语句的时候 一般我们会这么写查询条件: where date>='2010-01-01' and date<='2010-10-1'. 但是 ...