html5酷炫3D魔方日历行程表动画特效



125 496 166



特效描述:html5 酷炫3D魔方 日历行程表 动画特效,html5具有有趣的悬停效果和背景色动画的3D立方体降临日历。单击“盒子”打开另一个不同元素动画的内容级别。

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />

2. 引入JS

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/charming.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/textfx.js"></script>
<script src="js/main.js"></script>

3. HTML代码

		<svg class="hidden">
			<defs>
				<symbol id="icon-arrow" viewBox="0 0 24 24">
					<title>arrow</title>
					<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
				</symbol>
				<symbol id="icon-drop" viewBox="0 0 24 24">
					<title>drop</title>
					<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
				</symbol>
				<symbol id="icon-github" viewBox="0 0 32.58 31.77">
					<title>github</title>
					<path d="M16.29,0a16.29,16.29,0,0,0-5.15,31.75c.81.15,1.11-.35,1.11-.79s0-1.41,0-2.77C7.7,29.18,6.74,26,6.74,26a4.31,4.31,0,0,0-1.81-2.38c-1.48-1,.11-1,.11-1a3.42,3.42,0,0,1,2.5,1.68,3.47,3.47,0,0,0,4.74,1.35,3.48,3.48,0,0,1,1-2.18C9.7,23.08,5.9,21.68,5.9,15.44a6.3,6.3,0,0,1,1.68-4.37,5.86,5.86,0,0,1,.16-4.31s1.37-.44,4.48,1.67a15.44,15.44,0,0,1,8.16,0c3.11-2.11,4.48-1.67,4.48-1.67A5.85,5.85,0,0,1,25,11.07a6.29,6.29,0,0,1,1.67,4.37c0,6.26-3.81,7.63-7.44,8a3.89,3.89,0,0,1,1.11,3c0,2.18,0,3.93,0,4.47s.29.94,1.12.78A16.29,16.29,0,0,0,16.29,0Z"/>
				</symbol>
			</defs>
		</svg>
		<main>
			<header class="codrops-header">
				<nav class="codrops-demos">
					<a class="current-demo link" href="index.html">Demo 1</a>
					<a class="link" href="index2.html">Demo 2</a>
					<a class="link" href="index3.html">Demo 3</a>
				</nav>
			</header>
			<div class="calendar-wrap">
				<div class="calendar">
					<div class="cube" data-bg-color="#F7E8ED" data-title="Peaceful World"></div>
					<div class="cube" data-bg-color="#F2D9E6" data-title="Impossible"></div>
					<div class="cube" data-bg-color="#ECC6DE" data-title="Everything"></div>
					<div class="cube" data-bg-color="#E0ECF5" data-title="Hung Up"></div>
					<div class="cube" data-bg-color="#DDF4DE" data-title="Live Freely"></div>
					<div class="cube" data-bg-color="#F0F1D5" data-title="Tolerable Planet"></div>
					<div class="cube" data-bg-color="#EEDECD" data-title="Normal"></div>
					<div class="cube" data-bg-color="#B8E6B3" data-title="Superhero"></div>
					<div class="cube" data-bg-color="#ABE3D8" data-title="New Weariness"></div>
					<div class="cube" data-bg-color="#E0E1F5" data-title="The Sinner"></div>
					<div class="cube" data-bg-color="#F7E8ED" data-title="Intellectual Wealth"></div>
					<div class="cube" data-bg-color="#F2D9E6" data-title="Limiting Principle"></div>
					<div class="cube" data-bg-color="#DFD1F0" data-title="Quaintly Free"></div>
					<div class="cube" data-bg-color="#E0ECF5" data-title="On A Level"></div>
					<div class="cube" data-bg-color="#DDF4DE" data-title="Experiences"></div>
					<div class="cube" data-bg-color="#F0F1D5" data-title="Entrenched"></div>
					<div class="cube" data-bg-color="#EEDECD" data-title="Happiness"></div>
					<div class="cube" data-bg-color="#B8E6B3" data-title="Working Jobs"></div>
					<div class="cube" data-bg-color="#ABE3D8" data-title="Spending Billions"></div>
					<div class="cube" data-bg-color="#E0E1F5" data-title="Principle Of Having"></div>
					<div class="cube" data-bg-color="#DFD1F0" data-title="Enemies"></div>
					<div class="cube" data-bg-color="#DFD1F0" data-title="Better World"></div>
					<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
					<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
					<div class="cube" data-inactive data-bg-color="#6161616" data-title="Coming soon"></div>
				</div>
				<div class="content">
					<div class="content__block">
						<h3 class="content__title">Peaceful World</h3>
						<p class="content__description">If everyone demanded peace instead of another television set, then there'd be peace.</p>
						<p class="content__meta">John Lennon</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Impossible</h3>
						<p class="content__description">To be content with little is difficult; to be content with much, impossible.</p>
						<p class="content__meta">Marie von Ebner-Eschenbach</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Everything</h3>
						<p class="content__description">The things you own end up owning you. It's only after you lose everything that you're free to do anything.</p>
						<p class="content__meta">Chuck Palahniuk</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Hung Up</h3>
						<p class="content__description">A lot of people get so hung up on what they can't have that they don't think for a second about whether they really want it.</p>
						<p class="content__meta">Lionel Shriver</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Live Freely</h3>
						<p class="content__description">It is the preoccupation with possessions, more than anything else that prevents us from living freely and nobly.</p>
						<p class="content__meta">Bertrand Russell</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Tolerable Planet</h3>
						<p class="content__description">What is the use of a house if you haven't got a tolerable planet to put it on?</p>
						<p class="content__meta">Henry David Thoreau</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Normal</h3>
						<p class="content__description">Normal is getting dressed in clothes that you buy for work and driving through traffic in a car that you are still paying for - in order to get to the job you need to pay for the clothes and the car, and the house you leave vacant all day so you can afford to live in it.</p>
						<p class="content__meta">Ellen Goodman</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Superhero</h3>
						<p class="content__description">The reality of loving God is loving him like he's a Superhero who actually saved you from stuff rather than a Santa Claus who merely gave you some stuff.</p>
						<p class="content__meta">Criss Jami</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">New Weariness</h3>
						<p class="content__description">Every increased possession loads us with new weariness.</p>
						<p class="content__meta">John Ruskin</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">The Sinner</h3>
						<p class="content__description">The Christmas tree, twinkling with lights, had a mountain of gifts piled up beneath it, like offerings to the great god of excess.</p>
						<p class="content__meta">Tess Gerritsen</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Intellectual Wealth</h3>
						<p class="content__description">Whoever prefers the material comforts of life over intellectual wealth is like the owner of a palace who moves into the servants' quarters and leaves the sumptuous rooms empty.</p>
						<p class="content__meta">Marie von Ebner-Eschenbach</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Limiting Principle</h3>
						<p class="content__description">An attitude to life which seeks fulfilment in the single-minded pursuit of wealth - in short, materialism - does not fit into this world, because it contains within itself no limiting principle, while the environment in which it is placed is strictly limited.</p>
						<p class="content__meta">Ernst F. Schumacher</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Quaintly Free</h3>
						<p class="content__description">To have so little, and it of so little value, was to be quaintly free.</p>
						<p class="content__meta">Wallace Stegner</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">On A Level</h3>
						<p class="content__description">I've always felt that your belongings have never been on a level with you.</p>
						<p class="content__meta">George Eliot</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Experiences</h3>
						<p class="content__description">We all need new ideas, images, and experiences far more than we need new stoves or cars or computers.</p>
						<p class="content__meta">Bill Holm</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Entrenched</h3>
						<p class="content__description">We are being called upon to act against a prevailing culture, to undermine our own entrenched tendency to accumulate and to consume, and to refuse to define our individuality by our presumed ability to do whatever we want.</p>
						<p class="content__meta">Lyanda Lynn Haupt</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Happiness</h3>
						<p class="content__description">The way of the consumerist culture is to spend so much energy chasing happiness that it has none left to be happy.</p>
						<p class="content__meta">Criss Jami</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Working Jobs</h3>
						<p class="content__description">Advertising has us chasing cars and clothes, working jobs we hate so we can buy shit we don't need.</p>
						<p class="content__meta">Chuck Palahniuk</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Spending Billions</h3>
						<p class="content__description">Our economy is based on spending billions to persuade people that happiness is buying things, and then insisting that the only way to have a viable economy is to make things for people to buy so they’ll have jobs and get enough money to buy things.</p>
						<p class="content__meta">Philip Slater</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Principle Of Having</h3>
						<p class="content__description">The real opposition is that between the ego-bound man, whose existence is structured by the principle of having, and the free man, who has overcome his egocentricity.</p>
						<p class="content__meta">Erich Fromm</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Enemies</h3>
						<p class="content__description">Happy slaves are the bitterest enemies of freedom.</p>
						<p class="content__meta">Marie von Ebner-Eschenbach</p>
					</div>
					<div class="content__block">
						<h3 class="content__title">Better World</h3>
						<p class="content__description">If you assume that there is no hope, you guarantee that there will be no hope. If you assume that there is an instinct for freedom, that there are opportunities to change things, then there is a possibility that you can contribute to making a better world.</p>
						<p class="content__meta">Noam Chomsky</p>
					</div>
					<div class="content__number">0</div>
					<button class="btn-back" aria-label="Back to the grid view">&crarr;</button>
				</div><!-- /content -->
			</div><!-- /calendar-wrap -->
		</main>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 弹出层拖动 窗口提示框 滑动星星打分 html5弹窗动画 转动旋转翻转 日历日期时间 html5动画h5动画 其他更多 html5按钮动画 图片翻转旋转 日历选择器 html5图片动画 提示框/弹出层 时间日期插件 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到