css3实现圆形逐渐减少动画
写这个动画刚开始完全没有思路，后来参考网上的资料发现可以用半圆实现，具体原理如下：
1.，一个div作为背景，三个div做出三个半圆出来，一个用于旋转，一个靠左（用于与背景吻合），一个靠右（用于与背景吻合）。
2.做出另一组div更换背景色即可实现反方向的旋转。
代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.outer{
position:relative;
left:100px;
top:100px;
height:100px;
width:100px;
}
.cont1,.cont2{
position:absolute;
height:100%;
width:100%;
border-radius:50px;
overflow: hidden;
}
.cont1{
background:red;
opacity:1;
animation:hide 4s steps(1,end) infinite;
}
.cont2{
background:blue;
opacity:0;
animation:show 4s steps(1,end) infinite;
}
.rotateDiv{
position:absolute;
left:0;
top:0;
border-radius:50px 0 0 50px;
background:blue;
height:100%;
width:50%;
transform-origin:center right;
animation:rotate 2s infinite linear;
/* transition:transform 2s;*/
}
.right{
position:absolute;
left:50px;
top:0;
border-radius:0 50px 50px 0;
background:blue;
height:100%;
width:50%;
opacity:1;
animation: hide 2s steps(1,end) infinite;
}
.left{
position:absolute;
left:0;
top:0;
border-radius:50px 0 0 50px;
background:red;
height:100%;
width:50%;
opacity:0;
animation: show 2s steps(1,end) infinite;
}
/* .left-rotate:hover{
transform:rotate(180);*/ .cont2 .rotateDiv, .cont2 .right{
background:red;
}
.cont2 .left{
background:blue;
}
/*css动画*/
@keyframes rotate
{
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
@keyframes show
{
0% {opacity:0;}
50%,100% {opacity:1;}
}
@keyframes hide
{
0% {opacity:1;}
50%,100% {opacity:0;}
}
</style>
</head>
<body>
//css3动画
<div class="outer">
<div class="cont1">
<div class="rotateDiv"></div>
<div class="right"></div>
<div class="left"></div> </div>
<!--反方向的旋转-->
<div class="cont2">
<div class="rotateDiv"></div>
<div class="right"></div>
<div class="left"></div>
</div>
</div>
</body>
</html>
其中用到了一个css3,动画的step(1,end)，不太理解。。。
css3实现圆形逐渐减少动画的更多相关文章
- 纯CSS3实现圆形进度条动画
悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)
源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
- 纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- 重新想，重新看——CSS3变形，过渡与动画①
学习CSS3,觉得最难记忆的部分除了flex特性之外,就要属变形,过渡和动画部分了.作为初学者,总有种犯懒的心理,想着既然IE8浏览器都不完全支持CSS动画属性,还要考虑浏览器兼容问题,那么就不那么着 ...
- 实用CSS3的transform实现多种动画效果
查看效果:http://keleyi.com/a/bjad/b6x9q8gs.htm 以下是代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. ...
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- css3很美的蟠桃动画
查看效果:http://hovertree.com/texiao/css3/26/ 源码下载:http://hovertree.com/h/bjaf/ndhxgfkn.htm 效果图如下: 代码如下: ...
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
随机推荐
- java时间类型操作
java中Date类型与字符串相互转化 Date date = new Date(); System.out.println(date); //DateFormat类为一个 ...
- uboot 第三天学习
make jCPU_NUM 以CPU_NUM数量同时进行编译CPU_NUM = 当前PC的处理器数量*处理器的核心数 从上电开始1.系统上电,执行固化在IROM中的代码,目的初始化基本的系统功能,已经 ...
- AngularJS2.0 教程系列（一）
http://my.oschina.net/u/2275217/blog/482178
- 复习（2）【postman,charles,filezilla server】
Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件.通常我们可以用它来测试接口. Charles是在Mac下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的 ...
- WebForm控件--2016年12月29日
简单控件 1.Label => <span id="Label1">Label1</span> 2.Literal => Text 填 ...
- js_apply与call
在ECAMScript3给Function的原型定义了两个方法,它们是Function.prototype.call和Function.prototype.apply. 本文详细介绍了apply与ca ...
- ABAP 出库单打印 产品 A搭A A搭B显示方式
*&---------------------------------------------------------------------* *& Report *& ...
- SQL 基础
创建模式 create schema <schema_name> authorization <username> 没有指定schema_name时默认是用户名 删除模式 dr ...
- maven项目断点依赖maven插件
- Android安全攻防战，反编译与混淆技术完全解析（上）
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/49738023 之前一直有犹豫过要不要写这篇文章,毕竟去反编译人家的程序并不是什么值 ...