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

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

HTML ↴

<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Цвет фона блока меняется при наведении с анимацией (transition)  [css3] </title>
        <style type="text/css">	
        	h1 {
	 			font:  18px "Helvetica Neue", arial, sans-serif;
			}
        	p {
        		border: 1px dashed silver;
				padding: 0.5em;
				border-radius: 0.5em;
				font:  12px/1.5 "Helvetica Neue", arial, sans-serif;
				background-color: rgb(254, 250, 218);
				max-width: 44em;
			}
    	    div {
    		    background-color: red;
    		    width: 300px;
    		    height: 300px;
    		    -o-transition-property: background-color; -webkit-transition-property: background-color;
                transition-property: background-color;
                -o-transition-duration: 4s;  -webkit-transition-duration: 4s;
                transition-duration: 4s;
            }
  		    div:hover { background-color: blue; }
      </style>
  </head>
  <body>
  		<h1>Example of changing the colour via CSS3 Transitons</h1>
  		<p>The <code>div</code> element below is initially red. Hover the <code>div</code> element to see it transiton from red to blue over 4 seconds.</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

ПРИМЕР ↴

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