简单的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. C-指针,二级指针,二维数组作为函数参数使用,C语言链表(详解)

    一级指针 int *p;            //表示定义一个int型(4字节)的指针p &p                 //表示p自身的地址位置 p                  ...

  2. SQL Server 中的一些概念

    学习SQL Server 2012编程入门经典(第4版)的笔记 1.事务日志 任意数据库的更改起初不进入数据库本身,而是不断地被写入到事务日志. 日志是数据进入磁盘上的最先位置. 2.表 数据库中实际 ...

  3. 正则表达式+XML+反射+设计模式作业

    正则表达式+XML+反射+设计模式作业 一.    填空题 Class.forName('com.bjsxt.stumgr.entity.Student').newInstance( ); 语句的作用 ...

  4. The server quit without updating PID file (data mysql.pid)

     (1)mysql的安装路径和运行路径 # whereis mysqld   (2)PATH变量指定的路径中,搜索mysql的信息    #  which mysqld  (3)查看配置文件   # ...

  5. idea vue.js插件安装

    Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...

  6. 【读书笔记】iOS-属性中的内存管理参数

    一,assign 代表设置时候直接赋值,而不是复制或者保留它. 二,retain. 会在赋值的时候把新值保留.此属性只能用于Object-C对象类型. 三,copy 在赋值时,将新值复制一份,复制工作 ...

  7. chrome 远程调试相关问题

    1.使用chrome remote debug时打开inspect时出现一片空白 2.如何不用FQ可以享受Chrome for android的远程调试功能 3.chrome://appcache-i ...

  8. HBase中此类异常解决记录org.apache.hadoop.ipc.RemoteException(java.io.IOException):

    ERROR: Can't get master address from ZooKeeper; znode data == null   一定注意这只是问题的第一层表象,真的问题是: File /hb ...

  9. 洗礼灵魂，修炼python（50）--爬虫篇—基础认识

    爬虫 1.什么是爬虫 爬虫就是昆虫一类的其中一个爬行物种,擅长爬行. 哈哈,开玩笑,在编程里,爬虫其实全名叫网络爬虫,网络爬虫,又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者 ...

  10. Xamarin入门，开发一个简单的练手APP

    之前周末用Xamarin练手做了个简单APP,没有啥逻辑基本就是个界面架子,MVVM的简单使用,还有Binding,Command的简单使用,还有一个稍微复杂点两个界面交互处理(子页面新增后关闭,父页 ...