简单的CSS圆形缩放动画
简单的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圆形缩放动画的更多相关文章
- Silverlight & Blend动画设计系列三：缩放动画（ScaleTransform）
在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...
- 缩放动画（ScaleTransform）
在Silverlight的动画框架中,ScaleTransform类提供了在二维空间中的坐标内进行缩放操作,通过ScaleTransform可以在水平或垂直方向的缩放和拉伸对象,以实现一个简单的缩放动 ...
- android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下，另行实现圆形scale动画
ViewAnimationUtils.createCircularReveal()的简介: ViewAnimationUtils.createCircularReveal()是安卓5.0才引入的,快速 ...
- UI设计篇·入门篇·简单动画的实现，透明动画/旋转动画/移动动画/缩放动画，混合动画效果的实现，为动画设置监听事件，自定义动画的方法
基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...
- 仿Inshot分享页图片圆形展开缩放动画
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/221 圆形展开缩放动画 关键代码: final Anima ...
- 简单CSS实现闪烁动画（+1白话讲解）
原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- iOS开发笔记10:圆点缩放动画、强制更新、远程推送加语音提醒及UIView截屏
1.使用CAReplicatorLayer制作等待动画 CALayer+CABasicAnimation可以制作很多简单的动画效果,之前的博客中介绍的“两个动画”,一个是利用一张渐变色图片+CABas ...
- AndroidTv Home界面实现原理（二）——Leanback 库的主页卡位缩放动画源码解析
先看个效果图: 上一篇中,我们留了问题,在 Tv Home 界面这种很常见聚焦卡位放大动画效果,我们这一篇就来看看 Leanback 库是怎么实现的. 如果要我们自己实现的话,思路应该不难,就是写个放 ...
随机推荐
- Clock Pictures（kmp + Contest2075 - 湖南多校对抗赛（2015.04.26））
Problem H: Clock Pictures Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 73 Solved: 18[Submit][Stat ...
- 在UAP中如何通过WebView控件进行C#与JS的交互
最近由于项目需求,需要利用C#在UWP中与JS进行交互,由于还没有什么实战经验,所有就现在网上百度了一下,但是百度的结果显示大部分都是在Android和IOS上面的方法,UWP中的几乎没有.还好微软又 ...
- 分布式日志框架之ExceptionLess【二】：自行搭建帮助文档【译文】
原文地址:https://github.com/exceptionless/Exceptionless/wiki/Self-Hosting ExceptionLess自行托管环境搭建 一.测试环境 如 ...
- blfs（systemv版本）学习笔记-编译安装sudo并创建普通用户配置sudo权限
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! blfs书中sudo的安装配置章节:http://www.linuxfromscratch.org/blfs/view/8.3/ ...
- sql server:查詢系統表
---查看所有存储过程或视图的位置 select a.name,a.[type],b.[definition] from sys.all_objects a,sys.sql_modules b whe ...
- 2017-11-06 日语编程语言"抚子" - 第三版特色初探
"中文编程"知乎专栏原链 原文: 日语编程语言"抚子" - 第三版特色初探 它山之石可以攻玉. 学习其他的母语编程语言, 相信对中文编程语言的设计和实践有借鉴意 ...
- 【读书笔记】iOS-优化内存
imageNamed:方法创建UIImage对象,这些对象不再使用的时候 会放到应用的默认自动回收池中,而不是当前的事件循环的自动回收池中,这样的对象占用的内存只有在应用结束的时候 才会回收.如果用这 ...
- 关于input的焦点事件
关于input的焦点事件 $(".scanf_integral").focus(function(){//获取焦点//获取焦点后触发的事件 }) $(".scanf_in ...
- 13、多进程multiprocessing、进程池
内容相关: multiprocessing: 进程的创建与运行 进程常用相关函数 进程池: 为什么要有进程池 进程池的创建与运行:串行.并行 回调函数 多进程multiprocessing: pyth ...
- Spark ML逻辑回归
import org.apache.log4j.{Level, Logger} import org.apache.spark.ml.classification.LogisticRegression ...