ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ЯНВАРЬ >>>

HTML ↴

<!DOCTYPE HTML>
<HTML>
<head> 
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<title>Свойство CSS3 Transition</title>
<style>
* {margin: 0; padding: 0;}

h1 {
	margin: 50px;
	text-align: center;
	color: red;
	border-bottom: 1px solid red;
}

div.box {
	float: left;
	width: 210px;
	height: 210px;
	margin: 5px;
	text-align: center;
}

div.primer {
	float: left;
	width:150px;
	height:150px;

background: #fff url(https://www.03www.ru/pic/001.jpg);
background-size: cover;
}

p {
	font-size: 1.1em;
	color: #FFF;
}
p.primer {
	color: #FFF;
}
div.primer.width {
		transition: width 2s;
		-webkit-transition: width 2s; /* Safari and Chrome */
		-moz-transition: width 2s; /* Firefox 4 */
		-o-transition: width 2s; /* Opera */
}
div.primer.width:hover {
	width:200px;
}

div.primer.height {
		transition: height 1s;
		-webkit-transition: height 1s;
		-moz-transition: height 1s;
		-o-transition: height 1s;
}	
div.primer.height:hover {
	height:200px;
}

div.primer.all {
		transition: 0.5s;
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		-o-transition: 0.5s;
}
div.primer.all:hover {
	height:200px;
	width: 200px;
		transition: 0.5s;
		-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
		-o-transition: 0.5s;
}

div.primer.p4 {
		transition: width 3s;
		-webkit-transition: width 3s;
		-moz-transition: width 3s;
		-o-transition: width 3s;
}
div.primer.p4:hover {
	width:200px;
		transition: width 1s;
		-webkit-transition: width 0.5s;
		-moz-transition: width 0.5s;
		-o-transition: width 0.5s;
}

div.primer.p5 {
		transition: width 2s, height 2s, background 2s;
		-webkit-transition: width 2s, height 2s, background 2s;
		-moz-transition: width 2s, height 2s, background 2s;
		-o-transition: width 2s, height 2s, background 2s;
}		
div.primer.p5:hover {
	width: 200px;
	height: 200px;
	background-color: #00ff00;	
}

div.primer.p6 {
		transition: width 1s ease;
		-webkit-transition: width 1s ease;
		-moz-transition: width 1s ease;
		-o-transition: width 1s ease;
}		
div.primer.p6:hover,
	div.primer.p7:hover,
		div.primer.p8:hover,
			div.primer.p9:hover,
				div.primer.p10:hover,
					div.primer.p11:hover {
	width: 200px;
}

div.primer.p7 {
		transition: width 1s linear;
		-webkit-transition: width 1s linear;
		-moz-transition: width 1s linear;
		-o-transition: width 1s linear;
}		
div.primer.p8 {
		transition: width 1s ease-in;
		-webkit-transition: width 1s ease-in;
		-moz-transition: width 1s ease-in;
		-o-transition: width 1s ease-in;
}		
div.primer.p9 {
		transition: width 1s ease-out;
		-webkit-transition: width 1s ease-out;
		-moz-transition: width 1s ease-out;
		-o-transition: width 1s ease-out;
}		
div.primer.p10 {
		transition: width 1s ease-in-out;
		-webkit-transition: width 1s ease-in-out;
		-moz-transition: width 1s ease-in-out;
		-o-transition: width 1s ease-in-out;
}		
div.primer.p11 {
		transition: width 1s cubic-bezier(0.6,0.1,0.1,0.6);
		-webkit-transition: width 1s cubic-bezier(0.6,0.1,0.1,0.6);
		-moz-transition: width 1s cubic-bezier(0.6,0.1,0.1,0.6);
		-o-transition: width 1s cubic-bezier(0.6,0.1,0.1,0.6);
}		
</style>
</head>
<body>
<div class=box>	
	<div class="primer height">
		<p class="primer">пример 1</p>
		<p>height 1s</p>
	</div>
</div>
<div class=box>
	<div class="primer width">
		<p class="primer">пример 2</p>
		<p>width 2s</p>
	</div>
</div>
<div class=box>
	<div class="primer all">
		<p class="primer">пример 3</p>
		<p>all 0.5s</p>
	</div>
</div>
<div class=box>
	<div class="primer p4">
		<p class="primer">пример 4</p>
		<p>width 1s</p>
		<p >:hover width 3s</p>
	</div>
</div>
<div class=box>
	<div class="primer p5">
		<p class="primer">пример 5</p>
		<p>width 2s, height 2s, background 2s</p>
	</div>
</div>
<div class=box>
	<div class="primer p6">
		<p class="primer">пример 6</p>
		<p>width 1s</p>
		<p>timing-function: ease</p>
	</div>
</div>
<div class=box>
	<div class="primer p7">
		<p class="primer">пример 7</p>
		<p>width 1s</p>
		<p>timing-function: linear</p>
	</div>
</div>
<div class=box>
	<div class="primer p8">
		<p class="primer">пример 8</p>
		<p>width 1s</p>
		<p>timing-function: ease-in</p>
	</div>
</div>
<div class=box>
	<div class="primer p9">
		<p class="primer">пример 9</p>
		<p>width 1s</p>
		<p>timing-function: ease-out</p>
	</div>
</div>
<div class=box>
	<div class="primer p10">
		<p class="primer">пример 10</p>
		<p>width 1s</p>
		<p>timing-function: ease-in-out</p>
	</div>
</div>
<div class=box>
	<div class="primer p11">
		<p class="primer">пример 11</p>
		<p>width 1s</p>
		<p>timing-function: cubic-bezier</p>
	</div>
</div>

<script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне