简单的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 库是怎么实现的. 如果要我们自己实现的话,思路应该不难,就是写个放 ...
随机推荐
- request请求 HTTPBody 格式
//Json格式 [mtbRequset setValue:@"application/json" forHTTPHeaderField:@"Content- ...
- 【Java深入研究】5、Proxy动态代理机制详解
在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们不但要知道怎么通过AOP来满足的 ...
- @RequestBody发送请求报400错误
参数不使用@RequestBody 在使用Postman进行Post请求时,通常做法是填入key和value的值即可. 参数使用@RequestBody 使用@RequestBody注解时,在发送请求 ...
- AOP,过滤器,监听器,拦截器【转载】
面向切面编程(AOP是Aspect Oriented Program的首字母缩写) ,我们知道,面向对象的特点是继承.多态和封装.而封装就要求将功能分散到不同的对象中去,这在软件设计中往往称为职责分配 ...
- 解说css中的margin属性缩写方式
<html> <body> <div style="border: 1px solid red;"> <div style="b ...
- 7种html5css3网页图片展示特效代码
鼠标拖拽图片渐变透明切换特效 mobile手机左右滑动切换幻灯片 游戏透明提示图层幻灯片特效 可以编辑滚动条灯片颜色的scroll插件 几种文字动画显示插件代码 360度背景图片旋转的css3动画 左 ...
- 安装 kubernetes v1.11.1
kubernetes 版本 v1.11.1 系统版本:Centos 7.4 3.10.0-693.el7.x86_64 master: 192.168.0.205 node1: 192.168.0.2 ...
- 解决element-ui的el-select组件文字超过宽度时不出现横向滚动条问题
我用的element-ui是V1.4.3. 目前遇到一个问题,在用el-select组件的时候,当选项的内容很长的时候,会撑开下拉菜单的宽度,这样影响美观.具体如下图所示: 解决这个问题的思路:设置下 ...
- 2018-01-03 烂尾工程: Java实现的汇编语言编译器
在半年前的中文编程的尝试历程小记中简单介绍了这一项目. 由于短期内估计不会继续进行, 而且这个项目好像是至今个人在中文命名实践中的代码量最大的一个项目, 谨在此作一小结. 最新的源码库在program ...
- ：hover在ios无效问题
:hover 设置的样式在ios显示不出来,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态. 解决方案: 方案1 js绑定: document.body ...