CSS3中实现动态奥运五环

于 2021-12-09 01:24:56 发布
阅读量183 收藏 1
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63920681/article/details/121804575
版权

CSS动画 旋转特效 关键帧 变换属性 网页设计
关键词由CSDN通过智能技术生成

如何为我们的网页添砖加瓦 当然少不了我们的css动画特效了;

body：

			<body id="title">
				<div class="style">
					
				</div>
				<div class="cend">
					
				</div>
				<div class="first">
					
				</div>
				<div class="right">
					
				</div>
				<div class="left">
					
				</div>
              </body>

css：

<style type="text/css">
		
		//第一个 中左
		@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
		to{-webkit-transform: rotate(360deg)}
		}
		@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
		to{-moz-transform: rotate(359deg)}
		}
		@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
		to{-o-transform: rotate(359deg)}
		}
		@keyframes rotate{from{transform: rotate(0deg)}
		to{transform: rotate(359deg)}
		
		}
		
		
				#title{
					height: 500px;
					width: 500px;
				}			
				#title .cend{
					height: 100px;
					width: 100px;
					border-left:5px solid yellow;
					border-bottom: 5px solid yellow;
					position: fixed;
					left: 650px;
					top:350px;
					border-radius: 50% ;	
						-webkit-transition-property: -webkit-transform;
						-webkit-transition-duration: 0.01s;
						-moz-transition-property: -moz-transform;
						-moz-transition-duration: 0.01s;
						-webkit-animation: rotate 0.3s linear infinite;
						-moz-animation: rotate 0.3s linear infinite;
						-o-animation: rotate 0.3s linear infinite;	
						animation: rotate 0.3s linear infinite;
				}
				
		//第二个	 上面	
		@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
		to{-webkit-transform: rotate(360deg)}
		}
		@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
		to{-moz-transform: rotate(359deg)}
		}
		@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
		to{-o-transform: rotate(359deg)}
		}
		@keyframes rotate{from{transform: rotate(0deg)}
		to{transform: rotate(359deg)}
				
				}
						#title{
							height: 500px;
							width: 500px;
						}			
						#title .first{
							height: 100px;
							width: 100px;
							border-left:5px solid black ;
							border-bottom: 5px solid black;
							position: fixed;
							left: 725px;
							top:300px;
							border-radius: 50% ;	
								-webkit-transition-property: -webkit-transform;
								-webkit-transition-duration: 0.0001s;
								-moz-transition-property: -moz-transform;
								-moz-transition-duration: 0.0001s;
								-webkit-animation: rotate 0.003s linear infinite;
								-moz-animation: rotate 0.0003s linear infinite;
								-o-animation: rotate 0.0003s linear infinite;	
								animation: rotate 0.0003s linear infinite;
						}
				
		//第三个	 中右
		@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
		to{-webkit-transform: rotate(360deg)}
		}
		@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
		to{-moz-transform: rotate(359deg)}
		}
		@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
		to{-o-transform: rotate(359deg)}
		}
		@keyframes rotate{from{transform: rotate(0deg)}
		to{transform: rotate(359deg)}
		
		}
				#title{
					height: 500px;
					width: 500px;
				}			
				#title .style{
					height: 100px;
					width: 100px;
					border-left:5px solid green ;
					border-bottom: 5px solid green;
					position: fixed;
					left:800px;
					top:355px;
					border-radius: 50% ;	
						-webkit-transition-property: -webkit-transform;
						-webkit-transition-duration: 0.01s;
						-moz-transition-property: -moz-transform;
						-moz-transition-duration: 0.01s;
						-webkit-animation: rotate 0.3s linear infinite;
						-moz-animation: rotate 0.3s linear infinite;
						-o-animation: rotate 0.3s linear infinite;	
						animation: rotate 0.3s linear infinite;
				}
				
				
		//第四个	 左
				@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
				to{-webkit-transform: rotate(360deg)}
				}
				@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
				to{-moz-transform: rotate(359deg)}
				}
				@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
				to{-o-transform: rotate(359deg)}
				}
				@keyframes rotate{from{transform: rotate(0deg)}
				to{transform: rotate(359deg)}
				
				}
						#title{
							height: 500px;
							width: 500px;
						}			
						#title .left{
							height: 100px;
							width: 100px;
							border-left:5px solid #0078D4 ;
							border-bottom: 5px solid  #0078D4;
							position: fixed;
							left:600px;
							top:300px;
							border-radius: 50% ;	
								-webkit-transition-property: -webkit-transform;
								-webkit-transition-duration: 0.01s;
								-moz-transition-property: -moz-transform;
								-moz-transition-duration: 0.01s;
								-webkit-animation: rotate 0.3s linear infinite;
								-moz-animation: rotate 0.3s linear infinite;
								-o-animation: rotate 0.3s linear infinite;	
								animation: rotate 0.3s linear infinite;
						}
				
				
				
		//第五个	 右
				@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
				to{-webkit-transform: rotate(360deg)}
				}
				@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
				to{-moz-transform: rotate(359deg)}
				}
				@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
				to{-o-transform: rotate(359deg)}
				}
				@keyframes rotate{from{transform: rotate(0deg)}
				to{transform: rotate(359deg)}
				
				}
						#title{
							height: 500px;
							width: 500px;
						}			
						#title .right{
							height: 100px;
							width: 100px;
							border-left:5px solid darkred ;
							border-bottom: 5px solid darkred;
							position: fixed;
							left:850px;
							top:300px;
							border-radius: 50% ;	
								-webkit-transition-property: -webkit-transform;
								-webkit-transition-duration: 0.01s;
								-moz-transition-property: -moz-transform;
								-moz-transition-duration: 0.01s;
								-webkit-animation: rotate 0.3s linear infinite;
								-moz-animation: rotate 0.3s linear infinite;
								-o-animation: rotate 0.3s linear infinite;	
								animation: rotate 0.3s linear infinite;
						}
				
		
		*{
			background-color:  gray ;
		}
		</style>

好了让我们来看看最终效果：

瞎姬霸爱.
关注
专栏目录
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 4251
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
用html怎么制作风车,css3 animation实现风车转动
weixin_39526238的博客
06-10 1603
项目中经常有用到动画效果，比如Loading、风车转动等等。最简单的办法是使用gif，但是gif在半透明背景下有白边，体验不友好，好在现在可以使用css3的anmiation来实现动画效果，极大的提升了用户体验。下面是风车转动效果实现demo风车 - css3动画示例.windmill {width: 110px;height: 160px;overflow: hidden;background:...
html css3风车,CSS3 风车动画
weixin_34791250的博客
06-17 185
CSS语言：CSSSCSS确定body{background: #a5cad6;}h1{display: block;margin: 50px auto;width: 300px;text-align: center;font-size: 12px;}footer{font: 14px/1.3 'Microsoft YaHei';color: #000;font-size: 15px;line-h...
如何用css3实现风车效果
weixin_33949359的博客
09-20 184
2019独角兽企业重金招聘Python工程师标准>>> ...
html+css实现奥运五环
weixin_43983118的博客
11-15 531
效果实现及完整代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Olympic Rings</title> <style type="text/css"> .wrapper{ position: absolute; left: 4.
利用css3动画实现的风车效果
weixin_44544700的博客
03-31 778
CSS3动画样式不多，但是呢，它的每一个特性能实现的功能还是挺多的，有句话说的好，只有你想不当的，而没有你做不到的。下面呢，是本人利用CSS3中的动画来实现的风车效果。 下面是HTML样式： 用了4个div封装了一下风车的扇叶并将封装好的扇叶放入一个大的div中，最下面是风车的柄，这里给了它外面的div相对定位，这样固定风车柄时就可以直接相对于它外面的盒子设置偏移量就行了。 然后是CSS3样式：...
css3实现奥运五环颜色样式特效代码
03-20
本篇文章将详细介绍如何利用CSS3中的`border-radius`属性来实现奥运五环的颜色样式特效。奥运五环是国际奥林匹克委员会的标志，由五个相连的彩色圆环组成，代表五大洲的团结与友谊。通过CSS3，我们可以轻松地将这个...
HTML5基于CSS3奥运五环特效.zip
07-04
在“HTML5基于CSS3奥运五环特效”这个项目中，开发者利用这两门技术，重现了奥运五环的经典形象，并结合了下雪的背景动画，以庆祝如北京2022年冬奥会这样的体育盛事。 首先，HTML5是超文本标记语言的第五个版本，它...
CSS3 3D奥运五环图形特效.zip
最新发布
10-05
本资源"CSS3 3D奥运五环图形特效"是利用CSS3的特性，特别是3D变换功能，来创建出具有立体感的奥运五环图案，以此实现一种引人注目的动态特效。这些特效通常用于提升网站的互动性和吸引力，特别是在体育赛事或者活动...
css3实现奥运五环颜色样式代码.zip
07-04
在CSS3中实现奥运五环的颜色样式是一种利用前端技术展示动态视觉效果的典型应用。CSS3，即层叠样式表的第三版，引入了许多新特性，使得网页设计更加丰富多彩。在这个例子中，我们主要会涉及到以下几个核心知识点： ...
CSS3简单风车旋转动画.zip
05-24
CSS3简单风车旋转动画，有暂停、旋转、中速、高速等功能。
纯css3简单旋转风车动画特效.zip
07-03
css3风车动画，旋转风车，简单的风车特效。
HTML5 canvas 实现 大风车动画
07-05
HTML5 canvas 实现 大风车动画
一款很酷的HTML5+CSS3大风车旋转动画
09-25
HTML5+CSS3大风车旋转动画是一款很酷的HTML5动画，是一个可以旋转的大风车动画效果。
css奥运五环
weixin_34189116的博客
10-09 252
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...
html5 制作风车,[网页设计]html5 requestAnimationFrame制作动画：旋转风车
weixin_42509507的博客
06-24 1392
详细内容请点击在以往，我们在网页上制作动画效果的时候，如果是用javascript实现，一般都是通过定时器和间隔来实现的，出现HTML5之后，我们还可以用CSS3 的transitions和animations很方便的实现动画，这些技术手段在对于简单的或者对流畅性要求不高的动画不会有什么问题，然而随着用户体验的提高，我们制作的动画效果有了更高的要求，那么对于比较复杂的而且具有较高流畅性的动画效果，...
CSS风车动画
抚首
05-28 352
CSS代码： *{ margin: 0; padding: 0; } #box{ width: 200px; height: 200px; position: relative; float: left; top: 100px; left: 100px; animation:myRotate 3s linear infinite; } #box>div{ margin-top: 50px;
CSS动画，风车案例
热门推荐
诗水人间
06-20 16万+
风车案例案例： 关键代码： transform: rotate(120deg); 旋转120度。 transition:2s; 旋转120度花2秒完成。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padd
html css 奥运五环,使用css3怎么实现一个奥运五环
weixin_34977480的博客
06-16 422
使用css3怎么实现一个奥运五环发布时间：2021-04-06 16:52:39来源：亿速云阅读：93作者：Leah这篇文章将为大家详细讲解有关使用css3怎么实现一个奥运五环，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。1、z-index调各环的层级关系2、transparent设置透明度具体代码：html>Title*{margin:0...
html和css怎么实现奥运五环的代码
04-28
可以使用HTML的SVG标签和CSS的样式来实现奥运五环的效果。下面是一个简单的示例代码： ```html ``` 这个代码使用了SVG标签创建了五个圆形，每个圆形都有不同的颜色。可以使用CSS样式来更改圆形的大小...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瞎姬霸爱.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值