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 ...
随机推荐
- Netty 实现 WebSocket 聊天功能
上一次我们用Netty快速实现了一个 Java 聊天程序(见http://www.waylau.com/netty-chat/).现在,我们要做下修改,加入 WebSocket 的支持,使它可以在浏览 ...
- Netty 实现聊天功能
Netty 是一个 Java NIO 客户端服务器框架,使用它可以快速简单地开发网络应用程序,比如服务器和客户端的协议.Netty 大大简化了网络程序的开发过程比如 TCP 和 UDP 的 socke ...
- Maven生命周期小记
1.Maven生命周期是为了所有的构建过程进行抽象和统一.Maven从大量的项目和构建工具中学习和反思,总结了一套高度完善.易扩展的生命周期.这个生命周期包含了项目的清理.初始化.编译.测试.打包.集 ...
- C和指针 第十五章 文件I/O
stdio.h中包含了声明FILE结构 struct _iobuf { char *_ptr; //文件输入的下一个位置 int _cnt; //当前缓冲区的相对位置 char *_base; //指 ...
- Ubuntu14.04源
Ubuntu14.04源: 来源: http://wiki.ubuntu.org.cn/Qref/Source (包含15.04.14.10.14.04.12.04.10.04的源) Ub ...
- Python之美--Decorator深入详解
转自:http://www.cnblogs.com/SeasonLee/archive/2010/04/24/1719444.html 一些往事 在正式进入Decorator话题之前,请允许我讲一个小 ...
- mysql基础类型知识总结
Mysql知识回顾 http://www.educity.cn/wenda/596225.html http://blog.csdn.net/dyllove98/article/details/928 ...
- Python3实现火车票查询工具
Python 实现火车票查询工具 一. 实验介绍 通过python3实现一个简单的命令行版本的火车票查询工具,用实际中的例子会更感兴趣,不管怎么样,既练习了又可以自己使用. 1. 知识点: Pyth ...
- js：使用js过程中遇到的一个小问题
在一个作业中使用了js,函数A调用函数B.当A和B中均含有变量i的时候,相关操作结果可能会出错. 将B中的i替换为j(j不存在于A中)后,结果正确. 目前考虑原因是两个变量i有相关性(或者说实际上就是 ...
- Linux 搭建Java web服务器
未经允许,不得转载 1.jdk的下载与配置 1.1下载 sudo wget http://download.oracle.com/otn-pub/java/jdk/8u45-b14/jdk-8u45- ...