A Simple Scene Animated with CSS3

最新推荐文章于 2020-09-29 07:17:50 发布
最新推荐文章于 2020-09-29 07:17:50 发布
阅读量539 收藏
点赞数

A Simple Scene Animated with CSS3 (requires Chrome, Safari, Firefox 5+, or IE10 PP3)

Use the button above to start and reset the animation.
Use the tabs at top right to view the code for each element of the animation. No images, no JavaScript. The only JavaScript on this page is for the button that starts and resets the animation, and for the tabs.
This demo was created for this article on Smashing Magazine.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Keyframe Animation Demo</title>
<style>
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,font,img,ins,kbd,q,s,samp,
small,strike,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	text-align: left;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol,ul {
	list-style: none;
}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
}
#container {
	width: 1080px;
	margin: 0 auto;
	overflow: hidden;
	padding: 50px 20px 0 20px;
}
	h1 {
		font-size: 30px;
		padding: 0 0 20px 0;
	}
	h1 span {
		font-size: 18px;
	}
	#left {
		overflow: hidden;
		float: left;
	}
		#left p {
			width: 470px;
			padding: 20px 0 0 0;
			font-family: Arial, Helvetica, sans-serif;
		}
#sky {
	width: 500px;
	height: 500px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-color: #525252;
}
#sky.animate {
	-webkit-animation-name: sky;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: sky;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: sky;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: sky;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
@-moz-keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
@-ms-keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
@keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
#ground {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 500px;
	height: 154px;
	background: #6c5228;
	z-index: 4;
}
#ground.animate {
	-webkit-animation-name: ground;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: ground;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: ground;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: ground;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
@-moz-keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
@-ms-keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
@keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
#sun {
	background: #ffd630;
	width: 130px;
	height: 130px;
	position: absolute;
	border-radius: 70px;
	z-index: 2;
	bottom: 0;
	left: 340px;
}
#sun.animate {
	-webkit-animation-name: sunrise;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: sunrise;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: sunrise;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
@-moz-keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
@-ms-keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
@keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
#cloud {
	position: relative;
	top: 50px;
	left: -100px;
	opacity: 0;
	z-index: 3;
}
#cloud.animate {
	-webkit-animation-name: cloud;
	-webkit-animation-duration: 12s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: cloud;
	-moz-animation-duration: 12s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: cloud;
	-ms-animation-duration: 12s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: cloud;
	animation-duration: 12s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
		left: 60px;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
@-moz-keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
		left: 60px;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
@-ms-keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
		left: 60px;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
@keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
		left: 60px;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
.cloud {
	border-radius: 90px / 30px;
	width: 160px;
	height: 50px;
	background: #fff;
	position: absolute;
	top: 10px;
}
.cloud-2 {
	left: 50px;
	top: 0;
}
.cloud-3 {
	left: 110px;
	top: 20px;
}
#moon {
	position: relative;
	opacity: 0;
	top: 50px;
	left: -100px;
}
#moon.animate {
	-webkit-animation-name: moon;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: moon;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation-name: moon;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation-name: moon;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@-webkit-keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}
@-moz-keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}
@-ms-keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}
@keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}
	.moon {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		background: #fff;
		position: absolute;
	}
	.moon-2 {
		background: #525252;
		position: absolute;
		top: -20px;
		left: 20px;
	}
#code {
	float: left;
	margin: 0 0 0 20px;
	width: 494px;
}
ul.headers {
	overflow: hidden;
}
	ul.headers li {
		float: left;
		width: 85px;
		border: dashed 1px #ccc;
		margin: 0 4px;
	}
	ul.headers li a {
		display: block;
		text-decoration: none;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		text-align: center;
		padding: 10px;
	}
	ul.headers li a:hover, ul.headers li a:active {
		background: #ccc;
		color: #fff;
	}
#tab_content {
	border: #ccc 1px dashed;
	margin: 20px 0 20px 3px;
	padding: 0 0 20px 10px;
	width: 456px;
}
div.tab {
	font-family: Arial, Helvetica, sans-serif;
	margin: 30px 0 0 10px;
}
div.tab pre {
	font-family: "Courier New", Courier, monospace;
	font-size: 13px;
}
input[type="button"] {
	margin: 20px 0 0 165px;
	padding: 5px;
}
</style>
</head>
<body style="width: 98%;">
<div id="container">
	<h1>A Simple Scene Animated with CSS3 <span>(requires Chrome, Safari, Firefox 5+, or IE10 PP3)</span></h1>
	<div id="left">
		<div id="sky" class="target">
			<div id="cloud" class="target">
				<div class="cloud cloud-1"></div>
				<div class="cloud cloud-2"></div>
				<div class="cloud cloud-3"></div>
			</div>
			<div id="sun" class="target"></div>
			<div id="moon" class="target">
				<div class="moon">
				</div>
				<div class="moon moon-2">
				</div>
			</div>
			<div id="ground" class="target"></div>
		</div><!-- #sky -->
		<input type="button" value="ANIMATE THE SCENE" id="startbutton">
		<p><strong>Use the button above to start and reset the animation.</strong></p>
		<p>Use the tabs at top right to view the code for each element of the animation. No images, no JavaScript. The only JavaScript on this page is for the button that starts and resets the animation, and for the tabs.</p>
		<p>This demo was created for <a href="http://www.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/">this article</a> on Smashing Magazine.</p>
	</div><!-- #left -->
	<div id="code">
		<div id="sidebar_tabs">
			<ul class="headers">
				<li><a href="#" class="tablink">Sun</a></li>
				<li><a href="#" class="tablink">Sky</a></li>
				<li><a href="#" class="tablink">Ground</a></li>
				<li><a href="#" class="tablink">Cloud</a></li>
				<li><a href="#" class="tablink">Moon</a></li>
			</ul>
			<div id="tab_content">
				<div class="tab tab1">
<pre>
#sun.animate {
	animation-name: sunrise;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes sunrise {
	0% {
		bottom: 0;
		left: 340px;
		background: #f00;
	}
	33% {
		bottom: 340px;
		left: 340px;
		background: #ffd630;
	}
	66% {
		bottom: 340px;
		left: 40px;
		background: #ffd630;
	}
	100% {
		bottom: 0;
		left: 40px;
		background: #f00;
	}
}
</pre>
				</div>
				<div class="tab tab2">
<pre>
#sky.animate {
	animation-name: sky;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes sky {
	0% {
		background-color: #525252;
	}
	33% {
		background-color: #6293e5;
	}
	66% {
		background-color: #6293e5;
	}
	100% {
		background-color: #525252;
	}
}
</pre>
				</div>
				<div class="tab tab3">
<pre>
#ground.animate {
	animation-name: ground;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes ground {
	0% {
		background: #6c5228;
	}
	33% {
		background: #48a037;
	}
	66% {
		background: #48a037;
	}
	100% {
		background: #6c5228;
	}
}
</pre>
				</div>
				<div class="tab tab4">
<pre>
#cloud.animate {
	animation-name: cloud;
	animation-duration: 12s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes cloud {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 1;
	}
	75% {
		opacity: 1;
		left: 100px;
	}
	100% {
		opacity: 0;
		left: 500px;
	}
}
</pre>
				</div>
				<div class="tab tab5">
<pre>
#moon.animate {
	animation-name: moon;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}
@keyframes moon {
	0% {
		opacity: 0;
		left: -100px;
	}
	50% {
		opacity: 0;
		left: -100px;
	}
	90% {
		opacity: 0;
		left: -100px;
	}
	100% {
		opacity: 1;
		left: 50px;
	}
}</pre>
				</div>
			</div><!-- #tab_content -->
		</div><!-- #sidebar_tabs -->
	</div><!-- #code -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(function () {
	var s = null,
	AnimationSpace = {
		settings: {
			tabHeaders: null,
			tabSections: null,
			currentIndex: null,
			speed: 800,
			collection: null,
			i: null,
			j: null,
			startButton: $("#startbutton")
		},
		init: function () {
			s = this.settings;
			s.tabSections = $("div.tab");
			$(s.tabSections[0]).slideDown(s.speed);
			$(s.tabSections[1]).slideUp(s.speed);
			$(s.tabSections[2]).slideUp(s.speed);
			$(s.tabSections[3]).slideUp(s.speed);
			$(s.tabSections[4]).slideUp(s.speed);
			this.getClickedTab();
			this.startAnimation();
		},
		getClickedTab: function () {
			s = this.settings;
			s.tabHeaders = $("#sidebar_tabs ul.headers a");
			s.collection = $("#tab_content div.tab");
			$(s.tabHeaders).click(function () {
				s.currentIndex = $(this).parent().index();
				for (s.i = 0, s.j = s.collection.length; s.i < s.j; s.i += 1) {
					if (s.i !== s.currentIndex) {
						$(s.tabSections[s.i]).slideUp(s.speed);
					} else {
						$(s.tabSections[s.i]).slideDown(s.speed);
					}
				}
				return false;
			});
		},
		startAnimation: function () {
			s = this.settings;
			s.startButton.click(function() {
				$("div.target").toggleClass("animate");
				if (s.startButton.attr("value") === "ANIMATE THE SCENE") {
					s.startButton.attr("value", "RESET THE ANIMATION");
				} else {
					s.startButton.attr("value", "ANIMATE THE SCENE");
				}
			});
		}
	};
	AnimationSpace.init();
});
</script>
</body>
</html>

hsany330
关注
svg配合css3动画_使用CSS和Snap.svg的SVG动画
culuo8053的博客
08-05 333
svg配合css3动画Today I wanted to share with you the ease of animation in SVG with the tools we have available to us today. SVG is still one of those subjects that can scare away a lot of developers, but I...
Animated.CSS:带有CSS3的动画CSS（cheetshet）
04-06
** Animated.CSS：带你深入了解带有CSS3的动画库 ** Animated.CSS是一个基于CSS3的开源库，专门用于创建各种丰富的动画效果。它通过提供简洁、易用的类名，让开发者可以快速地为网页元素添加动态效果，极大地提升了...
animatedWithDuration 的适用范围
u010871761的专栏
12-10 693
[UIView animateWithDuration:0.25 animations:^{             bkView.image = [[UIImage imageNamed:@"cell_bg_high"] stretchableImageWithLeftCapWidth:1 topCapHeight:50];         } completion:^(BOOL finis
css svg视频自适应_使用SVG和CSS步骤进行自适应的动画步行周期
cungui5726的博客
08-24 287
In the previous article I talked about steps() in CSS animation, and provided a simple example (the ticking second hand of an analog watch). The same core techniques can be used for more complex anima...
css动画 和 js动画_CSS动画使网站栩栩如生
culi4814的博客
08-24 263
css动画 和 js动画Animation is fast becoming an essential design tool that’s increasingly used to help our users understand and interact with our work. 动画正Swift成为一种必不可少的设计工具，越来越多地用于帮助我们的用户理解我们的作品并与我们的作品进行交...
AS3库
互动人生
06-27 2051
来自：http://blog.csdn.net/merryken/article/details/7787183/  非常感谢 Here is a round up of some of the most popular ActionScript 3.0 (AS3) libraries out there to use. Let me know if I have missed an
3d div带阴影_带盒阴影的3D阴影
culiao9310的博客
09-29 328
3d div带阴影View demo 查看演示Download Source 下载源When working with 3D transformed elements, you might notice that they don’t have any shading and appear to be very flat. In real life, obj...
放下Javascript：先学习HTML和CSS
cumian8165的博客
08-11 187
A growing trend in front end development is the idea that you can dive right in to Javascript and succeed. Honestly, for better or worse you probably can. But you’re just building on top of a fragile ...
(原创翻译) JavaFX CSS 参考手册
weixin_30699741的博客
01-20 473
原文位置：http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html Release: JavaFX 2.2 JavaFX CSS Reference Guide Contents Introduction CSS and the JavaFX Scene Graph ...
（转）使用Three.js制作一个基本的3D飞行游戏
qq_21222737的博客
02-20 2085
今天，我们将使用Three.js创建一个简单的3D飞机，使WebGL更简单。由于GLSL的复杂性和语法，WebGL对许多开发人员来说是一个相当陌生的世界。但是通过Three.js，浏览器中的3D变得非常容易实现。 在本教程中，我们将创建一个简单的3D场景，并在两个主要部分中进行一些交互。 在第一部分，我们将解释Three.js的基础知识，以及如何建立一个非常简单的场景。 第二部分详细介绍了如...
react-animated-css:React组件以显示或隐藏带有动画的元素
05-11
npm i react-animated-css --save 注意您必须在html页面中包含 ，此组件只是它的包装。 < head > < link rel =" stylesheet " href =" ...
animated.css:动画CSS源代码-css source code
03-25
animated.css是由设计大师Tugrulyildirim.com开发并维护的一个开源项目，其目标是简化CSS动画的实现过程，让开发者无需深入理解复杂的CSS3动画细节，就能轻松添加动画到网页元素中。这个项目是从Tugrulyildirim.com...
【高创新】基于鲸鱼优化算法WOA-Transformer-LSTM实现故障识别Matlab实现.rar
09-18
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
《冯唐成事心法》学习笔记01：逆境来，了怎么办？
09-18
《冯唐成事心法》学习笔记01：逆境来，了怎么办？
c语言课程设计-职工资源管理系统.7z
09-18
c语言课程设计-职工资源管理系统.7z
VB个人邮件处理系统(源代码+系统).zip
最新发布
09-18
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看REAdMe.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看REAdMe.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看READme.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
探索25个CSS3动画按钮与菜单实例教程
4. 菜单设计："Making a CSS3 Animated Menu"提供了创建交互式菜单的技巧，包括下拉菜单、悬停效果和鼠标悬停时的动态变换。 5. 纯CSS3解决方案：诸如"PureCSS3 Button"和"PureCSS Dropdown Menu using :target ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值