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 ...
随机推荐
- 如何将已部署在ASM的资源迁移到ARM中
使用过Azure的读者都知道,Azure向客户提供了两个管理portal,一个是ASM,一个是ARM,虽然Azure官方没有宣布说淘汰ASM,两个portal可能会在很长的一段时间共存,但是考虑到AR ...
- 导出Excel通用工具类
导出Excel的两种方法: 一,POI 导入poi包 poi-3.11-beta3-20141111.jar /** * */ package com.car.ots.mpckp.utils; imp ...
- linux常用命令-压缩解压命令
gzip [文件] 压缩后文件格式 .gz,这个命令只能压缩文件,不能压缩目录.并且这个命令压缩后不保留源文件 gunzip [文件] 或者 gzip -d [文件] 解压缩.gz的压缩文件 tar ...
- Linux SVN 命令详解
1.将文件checkout到本地目录 svn checkout path(path是服务器上的目录) 例如:svn checkout svn://192.168.1.1/pro/domain ...
- bzoj4692: Beautiful Spacing
先二分答案后dp 设\(su[n]\)为\(\sum_{1}^{n}xi[i]\) 设\(f[n]\)为1时表示第n个单次能做某一行的结尾,且之前的空格满足二分出来的答案. 考虑怎样的\(f[i]\) ...
- Session、Cookie--2017年1月3日
Session Session 对象用于存储用户的信息.存储于 session 对象中的变量持有单一用户的信息,并且对于一个应用程序中的所有页面都是可用的. Session 对象 当您操作某个应 ...
- connect mysql from another host
vim /etc/mysql/my.cnf bind-address = 0.0.0.0 /etc/init.d/mysql restart mysql -uroot -p1234 # grant a ...
- Python: 处理mongodb文档,怎么让UTC时间转换为本地时间?
存储数据到MongoDB数据库时,一般我们会加一个更新数据的时间update_time.这时在python代码中 会用到datetime模块以便获取当前系统时间,但是存入到MongoDB数据库时,存储 ...
- I/O 函数总结
经过一段时间的学习,发现字符处理时或者文件处理时,经常需要进行输入(读入)和输出,而可供选择的函数很多,现在反而容易搞混淆,下面就对常用的7个 输入输出函数 进行总结和比较,以便于区分和熟练掌握. 标 ...
- dom操作导致超级卡顿。。。
var i=0;j=30;setinterval(function(){ document.getElementId(idname).style.top=j+'px'; i<3?i++:i=0; ...