简单的CSS圆形缩放动画

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

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>css圆形缩放动画</title>
  5.     <style>
  6.       .circular {
  7.         position: relative;
  8.         width: 48px;
  9.         height: 48px;
  10.       }
  11.       .circular i {
  12.         position: absolute;
  13.         top: 0;
  14.         left: 0;
  15.         width: 48px;
  16.         height: 48px;
  17.       }
  18.       .circular i:before {
  19.         content: '';
  20.         border-radius: 50%;
  21.         position: absolute;
  22.         top: 0;
  23.         left: 0;
  24.         right: 0;
  25.         bottom: 0;
  26.         background-color: #20a839;
  27.       }
  28.       .circular i:after {
  29.         content: '';
  30.         transition: all .3s;
  31.         border-radius: 50%;
  32.         position: absolute;
  33.         top: 0;
  34.         left: 0;
  35.         right: 0;
  36.         bottom: 0;
  37.         transform: scale(0);
  38.         background-color: #30cc54;
  39.       }
  40.       .circular:hover i:after {
  41.         transform: scale(1);
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <div class="circular">
  47.       <i></i>
  48.     </div>
  49.   </body>
  50. </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#多线程——同步

    多个线程(不仅仅局限于相同进程)如果需要访问相同的可变资源的话就可能需要考虑到线程同步的手段.CPU的线程和进程管控我这里就不去说了,计算机组成原理里面的东西 那么既然要让线程的步调一致,那么我们首先 ...

  2. Vue学习资料

    1. {{ msg }}插值表达式. v-text:将数据插入到页面中,没有闪烁问题. v-cloak:通过style属性选择器的方式display:none:防止闪烁问题. v-html:将标签解析 ...

  3. C++解析 xml，用到pugixml库

    参考网站: https://www.cnblogs.com/haomiao/p/5041065.html https://blog.csdn.net/iot_change/article/detail ...

  4. CentOS 7.4下使用yum安装MySQL5.7.20 最简单的

    CentOS7默认数据库是mariadb, 但是 好多用的都是mysql ,但是CentOS7的yum源中默认好像是没有mysql的. 上一篇安装的是5.6的但是我想安装5.7的  yum安装是最简单 ...

  5. 【读书笔记】iOS-Game Kit

    名字虽然叫Game Kit,但是Game Kit并不是仅仅开发游戏用的,它为开发者提供了两个非常实用的功能:使用Bonjour通过蓝牙进行点对点的网络传输功能,以及应用内语音聊天功能.有意思的是,语音 ...

  6. loadrunner 运行场景-场景运行原理

    运行场景-场景运行原理 by:授客 QQ:1033553122 运行原理 1 Remote Agent Dispatcher(Process) 运行Controller在负载机上开启应用程序. 2  ...

  7. Android常用数据类型转换

    String转int.float.double.byte[].bitmap Int i = Integer.parseInt(str); Float f = Float.parseFloat(str) ...

  8. Telephone dialer

    运行电话拨号器,需要加这个权限,否则不会打通电话.这个权限是用户权限,是谷歌工程师为了跟自己撇清关系,用户需要权限的时候自己加. 运行android程序的时候提示:ActivityManager: W ...

  9. spring容器、BeanFactory、ApplicatContext、WebApplicationContext

    1.spring容器 BeanFactory提供了IoC的功能:ApplicatContext建立在BeanFactory的基础上 在初始化BeanFactory的实现类时,并没有实例化Bean,直到 ...

  10. linux中使用nfs共享文件

    NFS需要使用远程过程调用 (RPC),也就是说,我们并不是只要启动NFS, 还需要启动RPC这个服务 服务器端 CentOS 7.4 ip:172.16.0.1 共享/tmp目录 共享/data目录 ...