练习 css3动画

最新推荐文章于 2024-04-03 04:35:12 发布
最新推荐文章于 2024-04-03 04:35:12 发布
阅读量521 收藏 1
点赞数
分类专栏： H5+CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fantasy_geek/article/details/105568971
版权

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习 CSS3动画</title>
	<style type="text/css">
		body {
		  background-color : grey;
		}
		div{
			margin: 5px;
		}
		#caseVerte {
		  background-color : #30bf82;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float :left;
		}
		#caseBleu {
		  background-color : #40dbff;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float : left;
		}
		#caseRouge {
		  background-color : #bf3037;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float : left;
		  position : relative;
		}
		#caseMarron {
		  background-color : #ffa773;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float : left;
		  position : relative;
		}
		#caseViolette {
		  background-color : #592780;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float : left;
		  position : relative;
		}
		#caseBlanche {
		  background-color : #C2C2C2;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float : left;
		  position : relative;
		}
		#casePourpre {
		  background-color : #422c83;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float : left;
		  position : relative;
		}

		#caseVerteClaire {
		  background-color : #C9F76F;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float : left;
		  position : relative;
		}

		#caseGrise {
		  background-color : #222222;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float : left;
		  position : relative;
		}

		#caseMarronFonce {
		  background-color : #FFEC73;
		  height : 140px;
		  width : 150px;
		  padding-top : 10px;
		  float : left;
		  position : relative;
		}
		#caseVerte #load {
		  color : #fbfbfb;
		  font-family : calibri;
		  text-align : center;
		}
		#caseBleu #load {
		  color : #0086a6;
		  font-family : calibri;
		  text-align : center;
		}
		#caseRouge #load {
		  color : #ff737a;
		  font-family : calibri;
		  text-align : center;
		  margin-top : 50px; 
		}
		#caseMarron #load {
		  color : #bf6530;
		  font-family : calibri;
		  text-align : center;
		  margin-top : 50px; 
		}
		#caseViolette #load {
		  color : #D8A6FF;
		  font-family : calibri;
		  text-align : center;
		  margin-top : 100px;
		}
		#caseBlanche #load {
		  color : #fff;
		  font-family : calibri;
		  text-align : center;
		  position : absolute;
		  top : 42px;
		  left :42px;
		}
		#casePourpre #load {
		  color : #886ed7;
		  font-family : calibri;
		  text-align : center;
		  position : absolute;
		  top : 42px;
		  left :42px;
		}

		#caseVerteClaire #load {
		  color : #444444;
		  font-family : calibri;
		  text-align : center;
		  position : absolute;
		  top : 42px;
		  left :42px;
		}

		#caseGrise #load {
		  color : #222;
		  font-family : calibri;
		  text-align : center;
		  position : relative;
		  top : 42px;
		  font-size : 11px;
		}
		#caseVerte #case1 {
		  height  : 10px;
		  width : 100px;
		  background-color : #fbfbfb;
		  animation : case1 2.25s infinite;
		}

		#caseBleu #case1 {
		  height  : 10px;
		  width : 100px;
		  background-color : #0086a6;
		  animation : case1 2.25s infinite;
		}

		
		@keyframes case1 {
		  0% {width : 0%;}
		  50% {width : 90px;}
		  100% {width : 0%;}
		}

		#caseVerte #case2 {
		  height : 10px;
		  width : 10px;
		  background-color : #fbfbfb;
		  animation : case2 2s infinite;
		}

		#caseBleu #case2 {
		  height : 10px;
		  width : 10px;
		  background-color : #0086a6;
		  animation : case2 2s infinite;
		}

		@keyframes case2 {
		  0% {width : 0%;}
		  50% {width : 100px;}
		  100% {width : 0%;}
		}

		#caseVerte #case3 {
		  height : 10px;
		  width : 10px;
		  background-color : #fbfbfb;
		  animation : case3 1.75s infinite;
		}

		#caseBleu #case3 {
		  height : 10px;
		  width : 10px;
		  background-color : #0086a6;
		  animation : case3 1.75s infinite;
		}

		@keyframes case3 {
		  0% {width : 0%;}
		  50% {width : 95px;}
		  100% {width : 0%;}
		}

		#caseVerte #case4 {
		  height : 10px;
		  width : 10px;
		  background-color : #fbfbfb;
		  animation : case3 2.5s infinite;
		}

		#caseBleu #case4 {
		  height : 10px;
		  width : 10px;
		  background-color : #0086a6;
		  animation : case3 2.5s infinite;
		}

		@keyframes case4 {
		  0% {width : 0%;}
		  50% {width : 80px;}
		  100% {width : 0%;}
		}

		#caseVerte #case5 {
		  height : 10px;
		  width : 10px;
		  background-color : #fbfbfb;
		  animation : case3 1.5s infinite;
		}

		#caseBleu #case5 {
		  height : 10px;
		  width : 10px;
		  background-color : #0086a6;
		  animation : case3 1.5s infinite;
		}

		@keyframes case5 {
		  0% {width : 0%;}
		  50% {width : 105px;}
		  100% {width : 0%;}
		}

		#caseVerte #case6 {
		  height : 10px;
		  width : 10px;
		  background-color : #fbfbfb;
		  animation : case3 5s infinite;
		}

		#caseBleu #case6 {
		  height : 10px;
		  width : 10px;
		  background-color : #0086a6;
		  animation : case3 5s infinite;
		}

		@keyframes case6 {
		  0% {width : 0%;}
		  50% {width : 75px;}
		  100% {width : 0%;}
		}

		#top{
			height: 10px;
			width: 10px;
			border-radius: 50%;
			background-color: rgba(255,255,255,.5);
			position: absolute;
			top : 10px;
			left : 65px;
			animation: turnTop 2s infinite;
		}

		@keyframes turnTop{
			0%{top: 10px;}
			50%{top: 40px;background-color: rgba(255,255,255,1)}
			100%{top:10px;}
		}

		#left{
			height: 10px;
			width: 10px;
			border-radius: 50%;
			background-color: rgba(255,255,255,.5);
			position: absolute;
			bottom : 10px;
			left : 10px;
			animation: turnLeft 2s infinite;
		}
		@keyframes turnLeft{
			0% {bottom : 10px; left : 10px;}
			50% {bottom : 50px; left : 40px;background-color: rgba(255,255,255,1)}
			100% {bottom : 10px; left : 10px;}
		}

		#right {
		  height : 10px;
		  width : 10px;
		  border-radius : 50%;
		  background-color : rgba(255,255,255,.5);
		  position : absolute;
		  bottom : 10px;
		  right : 10px;
		  animation : turnRight 2s infinite;
		}
		@keyframes turnRight{
			0%{bottom : 10px;right : 10px;}
			50%{bottom: 50px; right: 40px;background-color: rgba(255,255,255,1)}
			100%{bottom : 10px;right : 10px;}
		}

		#boule {
		  height : 10px;
		  width : 10px;
		  position : absolute;
		  top : 80px;
		  left : 10px;
		  background-color : #bf6530;
		  border-radius : 50%;
		  animation : boule 2s infinite;
		}
		@keyframes boule {	
			0% {left : 10px;opacity : 0;}
			50% {height : 20px; width : 20px; opacity : 1;}
			100% {left : 120px; opacity : 0; height : 10px; width : 10px;}
		}

		#circle {
		  height : 50px;
		  width : 50px;
		  position : absolute;
		  top : 45px;
		  left : 45px;
		  border-radius : 50%;
		  background : linear-gradient(#D8A6FF,#FFECEE);
		  animation : turnCircle 2s infinite;
		  animation-timing-function : ease-in-out;
		}
		@keyframes turnCircle {
		  0% {transform : rotate(0deg);}
		  100% {transform : rotate(10080deg);}
		}

		#circleCache {
		  height : 40px;
		  width : 40px;
		  position : absolute;
		  border-radius : 50%;
		  background-color : #592780;
		  z-index : 5;
		}

		#point {
		  height : 2px;
		  width : 2px;
		  position : relative;
		  top : -22px;
		  left : 96px;
		  border-radius : 50%;
		  background-color : #D8A6FF;
		  animation : point 1.5s infinite;
		  animation-timing-function : linear;
		}
		@keyframes point {
		  0% {left : 96px; opacity : 0;}
		  5% {left : 96px; opacity : 1;}
		  15% {left : 96px; opacity : 0;}
		  30% {left : 99px; opacity : 0;}
		  45% {left : 99px; opacity : 1;}
		  60% {left : 99px; opacity : 0;}
		  75% {left : 102px; opacity : 0;}
		  90% {left : 102px; opacity : 1;}
		  100% {left : 102px; opacity : 0;}
		}

		#test {
		  height : 10px;
		  width : 10px;
		  position : absolute;
		  background-color : #fff;
		  border-radius : 50%;
		  top : 0px;
		  left : 10px;
		}

		#rond {
		  height  : 100px;
		  width : 100px;
		  border : 1px solid #fff;
		  border-radius : 50%;
		  position :absolute;
		  top : 20px;
		  left : 15px;
		  animation : rond 2s infinite;
		}

		@keyframes rond {
		  0% {transform : rotate(0deg);}
		  100% {transform : rotate(360deg);}
		}
		/****DEBUT VAGUE****/
		#vague {
		  position : absolute;
		  top : 72px;
		  left : 20px;
		}

		#vague1 {
		  height : 5px;
		  width : 5px;
		  background-color : #886ed7;
		  float : left;
		  animation : vague1 2.5s infinite;
		}

		@keyframes vague1 {
		  0% {height : 5px;}
		  50% {height : 30px;}
		  100% {height : 5px;}
		}

		#vague2 {
		  height : 5px;
		  width : 5px;
		  background-color : #886ed7;
		  float : left;
		  animation : vague2 2.5s infinite;
		  animation-delay : 0.5s;
		}

		@keyframes vague2 {
		  0% {height : 5px;}
		  50% {height : 30px;}
		  100% {height : 5px;}
		}

		#vague3 {
		  height : 5px;
		  width : 5px;
		  background-color : #886ed7;
		  float : left;
		  animation : vague3 2.5s infinite;
		  animation-delay : 1s;
		}

		@keyframes vague3 {
		  0% {height : 5px;}
		  50% {height : 30px;}
		  100% {height : 5px;}
		}

		#vague4 {
		  height : 5px;
		  width : 5px;
		  background-color : #886ed7;
		  float : left;
		  animation : vague4 2.5s infinite;
		  animation-delay : 1.5s;
		}

		@keyframes vague4 {
		  0% {height : 5px;}
		  50% {height : 30px;}
		  100% {height : 5px;}
		}

		#vague5 {
		  height : 5px;
		  width : 5px;
		  background-color : #886ed7;
		  float : left;
		  animation : vague5 2.5s infinite;
		  animation-delay : 2s;
		}

		@keyframes vague5 {
		  0% {height : 5px;}
		  50% {height : 30px;}
		  100% {height : 5px;}
		}

		#vague6 {
		  height : 5px;
		  width : 5px;
		  background-color : #886ed7;
		  float : left;
		  animation : vague6 2.5s infinite;
		  animation-delay : 2.5s;
		}

		@keyframes vague6 {
		  0% {height : 5px;}
		  50% {height : 30px;}
		  100% {height : 5px;}
		}
		/****FIN VAGUE****/

		/****DEBUT TRANSFORM****/
		#tranform {
		  position : absolute;
		  top : 85px;
		  left : 30px;
		}

		#transform1 {
		  height : 30px;
		  width : 30px;
		  border-radius : 50%; 
		  background-color : #444444;
		  position : absolute;
		  top : 85px;
		  left : 15px;
		  opacity : 0;
		  animation : transform 4s infinite;
		}

		#transform2 {
		  height : 30px;
		  width : 30px;
		  border-radius : 50%; 
		  background-color : #444444;
		  position : absolute;
		  top : 85px;
		  left : 54px;
		  opacity : 0;
		  animation : transform 4s infinite;
		  animation-delay : 0.5s;
		}

		#transform3 {
		  height : 30px;
		  width : 30px;
		  border-radius : 50%; 
		  background-color : #444444;
		  position : absolute;
		  top : 85px;
		  left : 94px;
		  opacity : 0;
		  animation : transform 4s infinite;
		  animation-delay : 1s;
		}

		@keyframes transform {
		  0% {border-radius : 0px; opacity : 0;}
		  20% {border-radius : 0px; opacity : 1;}
		  40% {border-radius : 0px; opacity : 0;}
		  60% {border-radius : 50%; opacity : 0;}
		  80% {border-radius : 50%; opacity : 1;}
		  100% {border-radius : 50%; opacity : 0;}
		}

		#progress {
		  height : 10px;
		  width : 120px;
		  position : absolute;
		  top : 60px;
		  left : 10px;
		  box-shadow : 0px 0px 10px #111111 inset;
		}

		#charge {
		  height : 10px;
		  width : 120px;
		  position : absolute;
		  top : 0px;
		  left : 0px;
		  background-color : #C9F76F;
		  margin : 0px;
		  animation : charge 7s infinite;
		  box-shadow : 0px 0px 5px #222 inset;
		}


		@keyframes charge {
		  0% {width : 0px;}
		  100% {width : 100%;}
		}

		#spinner {
		  height : 40px;
		  width : 40px;
		  border : 2px solid #61615e;
		  border-left-color : transparent;
		  border-right-color : transparent;
		  border-radius : 50%;
		  animation : spin 2s infinite;
		}


		@keyframes spin {
		  0% {transform : rotate(0deg);}
		  50% {transform : rotate(360deg);}
		  100% {transform : rotate(0deg);}
		}
	</style>
</head>
<body>
	<div id="caseVerte">  
		<div id="case1"></div>
		<div id="case2"></div>
		<div id="case3"></div>
		<div id="case4"></div>
		<div id="case5"></div>
		<div id="case6"></div>
		<div id="load">
			<p>loading ...</p>
		</div>
	</div>
	<div id="caseBleu">  
		<div id="case1"></div>
		<div id="case2"></div>
		<div id="case3"></div>
		<div id="case4"></div>
		<div id="case5"></div>
		<div id="case6"></div>
		<div id="load">
			<p>loading ...</p>
		</div>
	</div>
	<div id="caseRouge">
		<div id="load">
			<p>loading ...</p>
		</div>
		<div id="top"></div>
		<div id="left"></div>
		<div id="right"></div>
	</div>
	<div id="caseMarron">
		<div id="boule"></div>
		<div id="load">
			<p>loading ...</p>
		</div>
	</div>
	<div id="caseViolette">
		<div id="circle">
			<div id="circleCache"></div>
		</div>
		<div id="load">
			<p>loading</p>
		</div>
		<div id="point"></div>
	</div>
	<div id="caseBlanche">
		<div id="rond">
			<div id="test"></div>
		</div>
		<div id="load">
			<p>loading</p>
		</div>
	</div>
	<div id="casePourpre">
		<div id="load">
			<p>loading</p>
		</div>
		<div id="vague">
			<div id="vague1"></div>
			<div id="vague2"></div>
			<div id="vague3"></div>
			<div id="vague4"></div>
			<div id="vague5"></div>
			<div id="vague6"></div>
		</div>
	</div>
	<div id="caseVerteClaire">
		<div id="transform">
			<div id="transform1"></div>
			<div id="transform2"></div>
			<div id="transform3"></div>
		</div>
		<div id="load">
			<p>loading</p>
		</div>
	</div>
	<div id="caseGrise">
		<div id="progress">
			<div id="charge"></div>
		</div>
		<div id="load">
			<p>loading</p>
		</div>
	</div>
	<div id="caseMarronFonce">
		<div id="spinner"></div>
	</div>
</body>
</html>
任由天高
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 动画
qq_36146167的博客
01-23 222
动画 动画和过渡类似，都是可以实现一些动态的效果 不同的是过渡需要在某个属性发生变化时，才会触发 而动画可以自己触发动态效果 设置动画效果，必须先要设置一个关键帧，关键帧里设置了动画每一步的效果 @keyframes @keyframes name {} 设置关键帧 可选值： from 表示动画的开始状态 to 表示动画的结束状态 % 将动画过程百分化，可以设置 n 个状态，0% 等于 from，100% 等于 to，50% 时间一半的状态 animation 属性 animation
css3动画
honghaiash的博客
08-29 105
css3动画特效 一、transform（转换动画、直接动画） 1.rotate（旋转） 包含三种状态，x、y、z三轴的变化 rotatex、rotatey、rotatez（默认） 旋转（rotate）实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
css3-animation-复习篇
weixin_61463372的博客
01-08 375
1. `@keyframes`使用 @keyframes 动画名 { from { // 开始要的操作的帧动画 background: #fff; } to { // 结束要的操作的帧动画 background: #e74c3c; } }
CSS3动画练习
yingchuyi的博客
10-20 61
【代码】CSS3动画练习。
CSS基础练习题
m0_57048774的博客
06-01 746
CSS基础练习题
html/css加载动画效果练习（附源码直接粘贴进）
loveforlongtime的博客
03-16 494
前端 加载动画效果制作（附源码）
html5和css3的选择题,前端开发面试题HTML5+CSS3
weixin_34177635的博客
06-03 606
1.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html 表示层 CSS 行为层 js。2.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等Presto内核：Opera7及...
animationsAndTransforms:练习CSS动画和变换
04-04
本次练习的主题“animationsAndTransforms”聚焦于CSS中的两大重要特性：CSS动画（CSS Animations）和CSS变换（CSS Transforms）。这两个特性为网页元素提供了动态效果，使用户体验更加生动有趣。 **CSS 动画 (CSS ...
css3 操作练习
03-01
这个“css3 操作练习”显然是一份旨在帮助学习者熟悉和掌握CSS3新特性的实践资料，通过名为“weapp-douban-film”的项目，很可能是模拟微信小程序中的豆瓣电影展示功能。接下来，我们将深入探讨CSS3的一些关键知识点...
css3_practice:css3练习
07-23
在本实践项目中，我们将深入探讨CSS3，这是一种强大的样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现。...通过不断练习，你将更好地理解如何利用CSS3来提升网页的交互性和美观度。
HTML5 简单的sin曲线动画练习
04-09
一个简单练习 关于HTML5 Canvas 动画的学习。
Html/CSS动画效果个人练习（5）
01-08
CSS动画效果个人练习第五天 Html源代码 comic2 CSS源代码 * { padding: 0; margin: 0; } body { background-color: rgb(41, 45, 62); } .container { font-size: 120px; font-weight: bold; text-transform: uppercase; } svg { position: absolute; width: 100%; height: 100%; } .text { fill: none; stroke-widt
teresina:CSS3练习
03-29
在"teresina:CSS3练习"项目中，可能包含了利用以上提到的一些或全部CSS3特性进行的实践练习。通过分析teresina-master文件夹中的内容，你可以发现如何将这些特性应用于实际网页设计，例如创建响应式布局、动态效果、...
css3按钮动画特效大全鼠标滑过按钮动画特效
11-05
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是按钮的动画特效。"css3按钮动画特效大全鼠标...通过不断练习和创新，你可以创造出更多富有创意和吸引力的CSS3按钮动画。
CSS3的2D动画属性，含面试题+答案
最新发布
2401_84098088的博客
04-03 908
资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-7IqRdk8g-1712090070327)][外链图片转存中…(img-ahQ24aGX-1712090070327)]资料过多，篇幅有限，需要文中全部资料可以点击这里免费获取。
HTML动画练习
weixin_49217619的博客
06-10 133
效果： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS3 小动画练习——行驶的汽车
qq_35370002的博客
12-17 1407
CSS3 小动画练习——行驶的汽车 今天来使用 CSS3 中的 animotion 动画绘制一个在公路上行走的汽车。 首先我们在网上随便找到一张免扣的汽车素材。 [外链图片转存失败,源站可能有防盗链机 首先我们绘制公路 <div class="road"> <img src="car.png" alt="" class="car" /> <ul> <li></li> //马路的白色虚线 <li><
html-css10 过渡/米兔练习/动画/动画练习/小球动画/平移和小米移动图
Kerryliuyue的博客
09-15 489
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
CSS3动画属性练习-小熊跑跑
angry_rooster的博客
06-06 725
小熊跑跑 通过CSS的动画属性"animation"和at-rule关键帧@keyframe实现一个小熊在雪山奔跑的效果 图片素材见文末 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值