教大家写几个可能用得上的css3简单动画

最新推荐文章于 2024-03-31 18:29:06 发布
最新推荐文章于 2024-03-31 18:29:06 发布
阅读量2.7k 收藏 3
点赞数 2
分类专栏： css 文章标签： css3 动画 简单

例子1：菊花状的Loading效果

  • 第一步画出静态的小菊花。

sk-fading-circle {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
}

<div class="sk-fading-circle">
  <div class="sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle"></div>
</div>

静态小菊花其实是一个外层div里嵌套12个小div。小div通过 border-radius画成圆型，并通过margin: 0 auto;定位到顶格居中位置。由于12个小div都是absolute定位，因此都重叠在了一起。

  • 第二步将12个重叠的圆分散开。

.sk-fading-circle .sk-circle2 { transform: rotate(30deg);}
.sk-fading-circle .sk-circle3 { transform: rotate(60deg);}
… //节省篇幅，每个圆每隔30度递增旋转
.sk-fading-circle .sk-circle12 { transform: rotate(330deg);}

<div class="sk-fading-circle">
  <div class="sk-circle1 sk-circle"></div>
  … //为缩减篇幅省略中间10个div
  <div class="sk-circle12sk-circle"></div>
</div>

用transform的rotate将各个圆点旋转，形成完整的菊花状。如果你对transform不熟的话，看下图，第二个圆点旋转30度的示意图，其余圆点的旋转自行脑补：

  • 三步通过animation控制opacity属性，让每个点淡进淡出

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}
@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}
.sk-fading-circle .sk-circle:before {
  ……
  animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

这样每个点都在像信号灯一样同步地闪烁。

最后一步，给每个点设置animation-delay延时，以错开闪烁的时间，形成常见的菊花转转的效果

.sk-fading-circle .sk-circle2:before {animation-delay: -1.1s; }
.sk-fading-circle .sk-circle3:before { animation-delay: -1s; }
.sk-fading-circle .sk-circle4:before { animation-delay: -0.9s; }
… //为缩减篇幅省略中间代码
.sk-fading-circle .sk-circle12:before { animation-delay: -0.1s; }

因为是12个圆点，每个圆点的闪烁间隔时间0.1s，因此第1个圆点没有animation-delay延时，立即闪烁。第二个圆点，从-1.1s开始闪烁（负数不理解的话，参考animation一文，意思是从该时间点开始启动，之前的动画效果不显示）。之后每个圆点均以0.1s递增的速度延迟。最终形成常见的菊花转转的Loading效果

例子2：ios版菊花Loading

明白了原理后，无非是在例子1的基础上，将圆点改成竖条，opacity半透明即可。

例子3：琴谱版Loading

  • 第一步，画出静态琴谱，很简单无非是一个外层div，内嵌几个并排的div而已。

.spinner {
  height: 40px;
}
.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
}

<div class="spinner">
  <div></div>
  … //你可以根据需求多加几个div
  <div></div>
</div>
  • 第二步，琴谱动起来

.spinner > div {
  ……
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
@keyframes sk-stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.4); }  
  20% { transform: scaleY(1.0); }
}

例1,2中用了transform的rotate实现旋转。例3用了transform的scaleY实现拉伸

最后一步，设置延时，让每个琴键在不同时间内拉伸。


.spinner .rect2 {  animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1.0s; }
.spinner .rect4 { animation-delay: -0.9s; }
.spinner .rect5 { animation-delay: -0.8s; }

<div class="spinner">
  <div class="rect1"></div>
  … //为节省篇幅省略中间代码
  <div class="rect5"></div>
</div>





贴一段源码，直接复制去用吧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css简单动画</title>
</head>
<style type="text/css">
	.ani,.ani2{
		width: 40px;
		height: 40px;
		position: relative;
		margin: 50px auto;
	}
	.ani div{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.ani div:before{
		content: "";
		display: block;
		margin: 0 auto;
		width: 15%;
		height: 15%;
		background: cyan;
		border-radius: 100%;
		-webkit-animation: ani 1.2s infinite ease-in-out both;
	}
	.ani div:nth-child(1),.ani2 div:nth-child(1)
	{-webkit-transform:rotate(30deg);}
	.ani div:nth-child(2),.ani2 div:nth-child(2)
	{-webkit-transform:rotate(60deg);}
	.ani div:nth-child(3),.ani2 div:nth-child(3)
	{-webkit-transform:rotate(90deg);}
	.ani div:nth-child(4),.ani2 div:nth-child(4)
	{-webkit-transform:rotate(120deg);}
	.ani div:nth-child(5),.ani2 div:nth-child(5)
	{-webkit-transform:rotate(150deg);}
	.ani div:nth-child(6),.ani2 div:nth-child(6)
	{-webkit-transform:rotate(180deg);}
	.ani div:nth-child(7),.ani2 div:nth-child(7)
	{-webkit-transform:rotate(210deg);}
	.ani div:nth-child(8),.ani2 div:nth-child(8)
	{-webkit-transform:rotate(240deg);}
	.ani div:nth-child(9),.ani2 div:nth-child(9)
	{-webkit-transform:rotate(270deg);}
	.ani div:nth-child(10),.ani2 div:nth-child(10)
	{-webkit-transform:rotate(300deg);}
	.ani div:nth-child(11),.ani2 div:nth-child(11)
	{-webkit-transform:rotate(330deg);}
	.ani div:nth-child(12),.ani2 div:nth-child(12)
	{-webkit-transform:rotate(360deg);}
	@-webkit-keyframes ani {
		0%,39%,100%{opacity: 0;}
		40%{opacity: 1;}
	}
	.ani div:nth-child(1):before,.ani2 div:nth-child(1):before
	{-webkit-animation-delay: -1.1s;}
	.ani div:nth-child(2):before,.ani2 div:nth-child(2):before
	{-webkit-animation-delay: -1.0s;}
	.ani div:nth-child(3):before,.ani2 div:nth-child(3):before
	{-webkit-animation-delay: -0.9s;}
	.ani div:nth-child(4):before,.ani2 div:nth-child(4):before
	{-webkit-animation-delay: -0.8s;}
	.ani div:nth-child(5):before,.ani2 div:nth-child(5):before
	{-webkit-animation-delay: -0.7s;}
	.ani div:nth-child(6):before,.ani2 div:nth-child(6):before
	{-webkit-animation-delay: -0.6s;}
	.ani div:nth-child(7):before,.ani2 div:nth-child(7):before
	{-webkit-animation-delay: -0.5s;}
	.ani div:nth-child(8):before,.ani2 div:nth-child(8):before
	{-webkit-animation-delay: -0.4s;}
	.ani div:nth-child(9):before,.ani2 div:nth-child(9):before
	{-webkit-animation-delay: -0.3s;}
	.ani div:nth-child(10):before,.ani2 div:nth-child(10):before
	{-webkit-animation-delay: -0.2s;}
	.ani div:nth-child(11):before,.ani2 div:nth-child(11):before
	{-webkit-animation-delay: -0.1s;}






	.ani2 div{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.ani2 div:before{
		content: "";
		display: block;
		margin: 0 auto;
		width: 3px;
		height: 15px;
		background: orange;
		border-radius: 100%;
		-webkit-animation: ani 1.2s infinite ease-in-out both;
	}
</style>
<body>
	<div class="ani">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>






	<div class="ani2">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>

  
  

   
   

  
  

  
  


  
  

  
  


  
  

  
  

   
   其他效果，代码很简单，看一次就懂了：
  
  

  
  


  
  

  
  

   
   <!DOCTYPE html>
<html>



   
   	<head>

   
   		<meta charset="UTF-8">

   
   		<title></title>

   
   	</head>

   
   	<style>

   
   		.loading{

   
   			width: 10px;

   
   			height: 10px;

   
   			margin: 0 auto;

   
   		}

   
   		.loading:after{

   
   			overflow: hidden;

   
   			display: inline-block;

   
   			vertical-align: bottom;

   
   			animation: ellipsis 2s infinite;

   
   			content: "\2026"; 

   
   		}

   
   		@-webkit-keyframes ellipsis{

   
   			from{

   
   				width:2px;

   
   			}

   
   			to{

   
   				width: 15px;

   
   			}

   
   		}

   
   		.spinner {

   
   			width: 40px;

   
   			height: 40px;

   
   			/*border-radius: 50%;*/

   
   			background-color: #FFC952;

   
   			margin: 100px auto;

   
   			-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;

   
   			animation: sk-rotateplane 1.2s infinite ease-in-out;

   
   		}

   
   		

   
   		@-webkit-keyframes sk-rotateplane {

   
   			0% {

   
   				-webkit-transform: perspective(120px)

   
   			}

   
   			50% {

   
   				-webkit-transform: perspective(120px) rotateY(180deg)

   
   			}

   
   			100% {

   
   				-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)

   
   			}

   
   		}

   
   		

   
   		@keyframes sk-rotateplane {

   
   			0% {

   
   				transform: perspective(120px) rotateX(0deg) rotateY(0deg);

   
   				-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)

   
   			}

   
   			50% {

   
   				transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);

   
   				-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)

   
   			}

   
   			100% {

   
   				transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

   
   				-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);

   
   			}

   
   		}

   
   		

   
   		.sk-folding-cube {

   
   			margin: 20px auto;

   
   			width: 40px;

   
   			height: 40px;

   
   			position: relative;

   
   			-webkit-transform: rotateZ(45deg);

   
   			transform: rotateZ(45deg);

   
   		}

   
   		

   
   		.sk-folding-cube .sk-cube {

   
   			float: left;

   
   			width: 50%;

   
   			height: 50%;

   
   			position: relative;

   
   			-webkit-transform: scale(1.1);

   
   			-ms-transform: scale(1.1);

   
   			transform: scale(1.1);

   
   		}

   
   		

   
   		.sk-folding-cube .sk-cube:before {

   
   			content: '';

   
   			position: absolute;

   
   			top: 0;

   
   			left: 0;

   
   			width: 100%;

   
   			height: 100%;

   
   			background-color: #FFC952;

   
   			-webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;

   
   			animation: sk-foldCubeAngle 2.4s infinite linear both;

   
   			-webkit-transform-origin: 100% 100%;

   
   			-ms-transform-origin: 100% 100%;

   
   			transform-origin: 100% 100%;

   
   		}

   
   		

   
   		.sk-folding-cube .sk-cube2 {

   
   			-webkit-transform: scale(1.1) rotateZ(90deg);

   
   			transform: scale(1.1) rotateZ(90deg);

   
   		}

   
   		

   
   		.sk-folding-cube .sk-cube3 {

   
   			-webkit-transform: scale(1.1) rotateZ(180deg);

   
   			transform: scale(1.1) rotateZ(180deg);

   
   		}

   
   		

   
   		.sk-folding-cube .sk-cube4 {

   
   			-webkit-transform: scale(1.1) rotateZ(270deg);

   
   			transform: scale(1.1) rotateZ(270deg);

   
   		}

   
   		

   
   		.sk-folding-cube .sk-cube2:before {

   
   			-webkit-animation-delay: 0.3s;

   
   			animation-delay: 0.3s;

   
   		}

   
   		

   
   		.sk-folding-cube .sk-cube3:before {

   
   			-webkit-animation-delay: 0.6s;

   
   			animation-delay: 0.6s;

   
   		}

   
   		

   
   		.sk-folding-cube .sk-cube4:before {

   
   			-webkit-animation-delay: 0.9s;

   
   			animation-delay: 0.9s;

   
   		}

   
   		

   
   		@-webkit-keyframes sk-foldCubeAngle {

   
   			0%,

   
   			10% {

   
   				-webkit-transform: perspective(140px) rotateX(-180deg);

   
   				transform: perspective(140px) rotateX(-180deg);

   
   				opacity: 0;

   
   			}

   
   			25%,

   
   			75% {

   
   				-webkit-transform: perspective(140px) rotateX(0deg);

   
   				transform: perspective(140px) rotateX(0deg);

   
   				opacity: 1;

   
   			}

   
   			90%,

   
   			100% {

   
   				-webkit-transform: perspective(140px) rotateY(180deg);

   
   				transform: perspective(140px) rotateY(180deg);

   
   				opacity: 0;

   
   			}

   
   		}

   
   		

   
   		@keyframes sk-foldCubeAngle {

   
   			0%,

   
   			10% {

   
   				-webkit-transform: perspective(140px) rotateX(-180deg);

   
   				transform: perspective(140px) rotateX(-180deg);

   
   				opacity: 0;

   
   			}

   
   			25%,

   
   			75% {

   
   				-webkit-transform: perspective(140px) rotateX(0deg);

   
   				transform: perspective(140px) rotateX(0deg);

   
   				opacity: 1;

   
   			}

   
   			90%,

   
   			100% {

   
   				-webkit-transform: perspective(140px) rotateY(180deg);

   
   				transform: perspective(140px) rotateY(180deg);

   
   				opacity: 0;

   
   			}

   
   		}

   
   	</style>



   
   	<body>

   
   		<div class="loading"></div>

   
   		

   
   		<div class="spinner"></div>



   
   		<div class="sk-folding-cube">

   
   			<div class="sk-cube1 sk-cube"></div>

   
   			<div class="sk-cube2 sk-cube"></div>

   
   			<div class="sk-cube4 sk-cube"></div>

   
   			<div class="sk-cube3 sk-cube"></div>

   
   		</div>

   
   	</body>


</html>

吴少雄
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
20个CSS3动画实战案例开发
03-04
本套课程，大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战，让小伙伴们能够轻松上手，企业公司项目开发过程中遇到的页面动画交互效果需求实现，以及一些更加炫酷创意动画想法的实现，成为一名酷酷哒前端开发工程师。本课程为20套CSS3动画实战课程，所集合构成的一套实战课程。适合热爱前端动画的小伙伴们，课程的主要内容包括： 01.3D文字效果制作、02.雪花飘落效果、03.图文模糊效果、04.文字卡片折叠效果、05.六角形效果、06. 进度条颜色跟随效果、07. 动态视频背景效果、08. 按键文字跳动效果、09. 弹跳小球效果、10. 3D翻折菜单导航效果、11. 3D圆环层叠动画效果、12. 水波浪球起伏效果、13. 遮罩透明滤镜文字效果、14. 阴阳无极八卦阵效果、15. 文字双屏进入进出效果、16. 炫酷光影加载效果、17. 文字背景水波浪效果、18. 炫酷发光倒影按钮、19. 扁平预加载动画效果、20. 烟囱冒烟动画效果
html5实现正在加载中样式
WhoWrongsWhere的专栏
03-04 5607
css: .sk-fading-circle {  width: 40px;  height: 40px;  position: relative;  } .sk-fading-circle .sk-circle {    width: 100%;    height: 100%;    position: absolute;    left: 0;    top: 0; 
html 页面正在加载中,html5实现正在加载中样式
weixin_39606575的博客
06-03 1401
css:.sk-fading-circle {width: 40px;height: 40px;position: relative;}.sk-fading-circle .sk-circle {width: 100%;height: 100%;position: absolute;left: 0;top: 0;}.sk-fading-circle .sk-circle:before {conte...
CSS3常用动画效果合集（最全），看看这篇文章吧
最新发布
03-31 299
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料。
css3动画及案例
qq_42481626的博客
05-09 829
css3动画 1、2d动画 translate() ：平移。根据左（X轴）和顶部（Y轴）位置给定的参数，从当前位置移动。 rotate() ：旋转。在一个给定度数顺时针旋转的元素，负值是允许的，这样的元素逆时针旋转。（如rotate值（30deg）元素顺时针旋转30度。） scale() ：伸缩。该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。如（scale（2,3）转变宽度为原...
使用CSS3动画做了四个小案例
weixin_64965154的博客
05-14 1392
box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-offset（阴影垂直偏移量，正方向为bottom） blur-然后我们可以来设置她的高可以使用vh，(是指可视窗口的高度。3. Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部。2.X-offset:是指阴影水平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边。
微信小程序--几个有趣的css3动画
03-29
微信小程序小教程--几个有趣的css3动画       先看下效果：  (此图片来源于网络，如有侵权，请联系删除! ) 除了有点快，动画效果还可以。 它是怎么实现的？ 拿第一个双块舞动画研究一下好啦。 mxml:     ...
CSS3几个基本动画
05-17
四个基本的CSS3动画图片，分别是图片放大特效，图片X轴翻转，Y轴翻转，Z轴旋转
简单几步用纯CSS3实现3D翻转效果
01-19
作为前端开发人员的必修课，CSS3能带我们完成许多基本动效，本期我们将用CSS3实现hover翻转效果~ 第一步非常简单，我们简单画1个演示方块，为其 添加transition和transform属性 ： // 本示例均使用Sass语法 .block ...
css3实现的几个动画
01-23
css3制作的动画效果，可以满座目前常用的动画，比如放大缩小，震动，左右移动等等一系列操作，本插件是一个转发插件，不属于本人创作，用着好用所以共享之。 转发的不要分的，怎么默认5分呢 css3制作的动画效果，...
纯CSS3实现滚动的齿轮动画效果
12-13
原理的话也比较简单，主要是css3画圆，然后弄出几个轮子的齿（这里构建锯齿的方法是我个人比较满意的地方，就是用一个贯穿整个圆形的长条，然后transform:rotate一定的度数，然后按照规律写下去，一个轮子就出来了。...
CSS3动画简单案例
qq_52622178的博客
04-08 1291
CSS3动画简单案例 刚学习完h5和c3,做了两个简单动画。 1.动画的放大缩小： 代码如下: <style> @keyframes move { 0%{ transform: scale(1); } 25%{ transform: scale(1.1); } 50%{ transform: scale(1); } 75%{ transform: scal
css3中的动画特效案例
CSH_lucky的博客
04-26 1711
引言 最近学完css3的知识，下面做了几个有趣案例，来帮助自己熟悉css3的知识。 一、升空的孔明灯 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>孔明灯</title> <style> *{ ...
【源码案例】14个超炫酷 HTML5/CSS3应用和动画特效实例
web前端开发
10-20 5244
html5现在已经不是很前卫的东西了，越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享几款超绚丽的HTML5/CSS3应用和动画特...
css3各种动画效果合集（一）
qq_53541336的博客
09-19 459
效果展示。
css3初体验之animation简单动画例子【来回滑动的小球】
且听风吟
08-17 8306
Document div{width: 200px;height: 200px;border: 1px dashed green;} div span{ display:inline-block; width: 30px; height: 30px; border-radius: 100%; background-color: red; animat
使用CSS3动画做了四个小案例(下)
weixin_64965154的博客
05-14 403
🤡。
CSS3 动画案例
xiangxiongfly
01-04 991
动画案例
常用的css动画效果
weixin_51464636的博客
07-11 1132
【代码】常用的css动画效果。
给我几个好用的css动画网站和css好看的边框网站
06-09
以下是几个好用的 CSS 动画和边框网站： 1. Animista：一个在线的动画生成器，提供了大量的 CSS 动画模板，可以生成自定义的 CSS 动画代码。 2. Hover.css：提供了大量的鼠标悬停效果，包括旋转、缩放、移动、透明...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值