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

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

HTML ↴

<!DOCTYPE HTML><HTML><head> <META http-equiv=Content-Type content="text/html; charset=windows-1251">
<title>Javascript Библиотека javascript + CSS Постепенное увеличение блока с заменой цвета фона  (CSS3 animation-name animation-duration animation-iteration animation-direction)</title>
<LINK href="https://www.03www.ru/2012-10/style.css" rel="stylesheet" type="text/css"><link rel="icon" href="https://www.03www.ru/favicon.ico" type="image/x-icon"><link rel="shortcut icon" href="https://www.03www.ru/favicon.ico" type="image/x-icon"><script type="text/javascript" src="https://www.03www.ru/2012-10/byn-w2.js"></script><script type="text/javascript" src="https://www.03www.ru/2012-10/areknopka.js" charset="windows-1251"></script>
</head><body onkeypress="test(event)"   id="top"  onload="preview.document.write (document.getElementsByTagName ('textarea')[0].value); preview.document.close(); preview.focus(); ;"><div id="top"><div class="s1" onclick="location.href='https://www.03www.ru/'">SE@RCHER</div><div class="s2" onclick="location.href='https://www.03www.ru/'">SE@RCHER</div><div class="s3"><a href="https://www.03www.ru/"><img src="https://www.03www.ru/2412092.gif" alt="Золотая библиотека JAVASCRIPT"  width="140"></a> Библиотека JAVASCRIPT + CSS</div><div class="s4"><a href="https://www.03www.ru/"><img src="https://www.03www.ru/2412092.gif" alt="Золотая библиотека JAVASCRIPT"   width="140"></a> Библиотека JAVASCRIPT + CSS</div><div class="s5"><a href="https://www.03www.ru/"><img src="https://www.03www.ru/2412092.gif" alt="Золотая библиотека JAVASCRIPT"   width="140"></a> ЛУЧШИЕ JAVASCRIPT</div><div class="s6"><a href="https://www.03www.ru/"><img src="https://www.03www.ru/1997-3.gif" width="80"  alt="Золотая библиотека JAVASCRIPT"></a></div><div style="position:absolute; width:68px; height:41px; z-index:30000; top: 66px; left: 75px;cursor:pointer" onclick="window.open('http://www.03www.su/037/dr.htm')"><div class="s7">1997<br><script  type="text/javascript">today=new Date();y0=today.getFullYear();document.write(y0);</script></div></div></div><DIV id=byn><B class=btop><B class=bb1></B><B class=bb2></B><B class=bb3></B><B class=bb4></B></B><div class="bboxcontent"><p><ul><ul id="vert-text"><li  class="txt1" onClick="javascript:window.open('https://www.03www.ru/','','fullscreen,scrollbars')">     Р а з д е л ы                 J  a  v  a  s  c  r  i  p  t                         </li> </ul><li style="margin-bottom:4px;margin-top:-30px"><a href="https://www.03www.ru/">~~ Библиотека  Javascript</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%E2%E8%E4%E5%EE">Javascript :: Видео</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%E2%F0%E5%EC%FF">Javascript ::Время</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%E3%E5%ED%E5%F0%E0%F2%EE%F0">Javascript ::Генератор</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%E7%E2%F3%EA">Javascript :: Звук</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%E8%E3%F0%E0">Javascript :: Игра </a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EA%E0%EB%E5%ED%E4%E0%F0%FC">Javascript ::Календарь</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EA%E0%EB%FC%EA%F3%EB%FF%F2%EE%F0">Javascript :: Калькулятор</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EA%ED%EE%EF%EA%E0">Javascript :: Кнопка</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EB%E8%ED%EA">Javascript ::Линк</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EC%E5%ED%FE">Javascript ::Меню</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EE%E1%F0%E0%EC%EB%E5%ED">Javascript ::Обрамление</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EE%EA%ED%EE">Javascript :: Окно</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EF%E5%F7%E0%F2%FC">Javascript ::Печать</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EF%EE%E4%F1%EA%E0%E7">Javascript :: Подсказка</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%EF%EE%E8%F1%EA">Javascript ::Поиск</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F0%E5%E4%E8%F0%E5%EA%F2">Javascript :: Редирект</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F1%EA%F0%E8%EF%F2">Javascript ::Скрипт</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F1%F2%E0%F2%F3%F1">Javascript ::Статус</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F1%F2%E8%EB%FC">Javascript ::Стиль</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F2%E0%E1%EB%E8%F6%E0">Javascript ::Таблица</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F2%E5%E3">Javascript ::Тег</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F2%E5%EA%F1%F2">Javascript ::Текст</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F2%E8%F2%F3%EB">Javascript ::Титул </a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F4%E8%EB%FC%F2%F0">Javascript ::Фильтр</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F4%EE%ED">Javascript ::Фон</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F4%EE%F0%EC%E0">Javascript :: Форма</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F4%EE%F2%EE">Javascript :: Фото</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F4%EE%F2%EE%E3%E0%EB%E5%F0%E5%FF">Javascript :: Фотогалерея</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=%F6%E2%E5%F2%20">Javascript :: Цвет</a></li><li><a href="https://www.03www.ru/index00.php?act=search&text=iframe">Javascript :: IFRAME</a></li></ul><p style="font-size:150%;padding-left:10px;">※ ※ ※ ※ </p><ul><ul id="vert-text"><li  class="txt1" onClick="javascript:window.open('https://www.03www.ru/','','fullscreen,scrollbars')">Б и б л и о т е к и      J  a  v  a  s  c  r   i  p  t                                              </li> </ul><li><a href="https://www.03www.ru/index00.php?act=search&text=jquery"  title="Библиотека Javascript JQUERY">Javascript :: JQUERY</a></li><li><A href="https://www.03www.ru/101/index.html#b01" target="_blank"  title="Библиотека Javascript cerabox">Javascript :: cerabox</A></li><li><A href="https://www.03www.ru/101/index.html#b02" target="_blank"  title="Библиотека Javascript colorbox">Javascript :: colorbox</A></li><li><A href="https://www.03www.ru/101/index.html#b03" target="_blank"  title="Библиотека Javascript cu3ox">Javascript :: cu3ox</A></li><li><A href="https://www.03www.ru/101/index.html#b04" target="_blank"  title="Библиотека Javascript facebox">Javascript :: facebox</A></li><li><A href="https://www.03www.ru/101/index.html#b05" target="_blank"  title="Библиотека Javascript fancybox">Javascript :: fancybox</A></li><li><A href="https://www.03www.ru/101/index.html#b06" target="_blank"  title="Библиотека Javascript fancyzoom">Javascript :: fancyzoom</A></li><li><A href="https://www.03www.ru/101/index.html#b07" target="_blank"  title="Библиотека Javascript fancyzoom 2">Javascript :: fancyzoom 2</A></li><li><A href="https://www.03www.ru/101/index.html#b08" target="_blank"  title="Библиотека Javascript floatbox">Javascript :: floatbox</A></li><li><A href="https://www.03www.ru/101/index.html#b09" target="_blank"  title="Библиотека Javascript floatbox 2">Javascript :: floatbox 2</A></li><li><A href="https://www.03www.ru/101/index.html#b10" target="_blank"  title="Библиотека Javascript hoverzoom">Javascript :: hoverzoom</A></li><li><A href="https://www.03www.ru/101/index.html#b11" target="_blank"  title="Библиотека Javascript greybox">Javascript :: greybox</A></li><li><A href="https://www.03www.ru/101/index.html#b12" target="_blank"  title="Библиотека Javascript highslide">Javascript :: highslide</A></li><li><A href="https://www.03www.ru/101/index.html#b13" target="_blank"  title="Библиотека Javascript jsimagebox">Javascript :: jsimagebox</A></li><li><A href="https://www.03www.ru/101/index.html#b14" target="_blank"  title="Библиотека Javascript imagebox">Javascript :: imagebox</A></li><li><A href="https://www.03www.ru/101/index.html#b15" target="_blank"  title="Библиотека Javascript imagezoom">Javascript :: imagezoom</A></li><li><A href="https://www.03www.ru/101/index.html#b16" target="_blank"  title="Библиотека Javascript leightbox">Javascript :: leightbox</A></li><li><A href="https://www.03www.ru/101/index.html#b17" target="_blank"  title="Библиотека Javascript lightbox">Javascript :: lightbox</A></li><li><A href="https://www.03www.ru/101/index.html#b18" target="_blank"  title="Библиотека Javascript mootools">Javascript :: mootools</A></li><li><A href="https://www.03www.ru/101/index.html#b19" target="_blank"  title="Библиотека Javascript leightbox 2">Javascript :: leightbox 2</A></li><li><A href="https://www.03www.ru/101/index.html#b20" target="_blank"  title="Библиотека Javascript litebox">Javascript :: litebox</A></li><li><A href="https://www.03www.ru/101/index.html#b21" target="_blank"  title="Библиотека Javascript lightbox2">Javascript :: lightbox 2</A></li><li><A href="https://www.03www.ru/101/index.html#b22" target="_blank"  title="Библиотека Javascript lytebox">Javascript :: lytebox</A></li><li><A href="https://www.03www.ru/101/index.html#b23" target="_blank"  title="Библиотека Javascript lytebox 2">Javascript :: lytebox 2</A></li><li><A href="https://www.03www.ru/101/index.html#b24" target="_blank"  title="Библиотека Javascript mbgallery">Javascript :: mbgallery</A></li><li><A href="https://www.03www.ru/101/index.html#b25" target="_blank"  title="Библиотека Javascript milkbox">Javascript :: milkbox</A></li><li><A href="https://www.03www.ru/101/index.html#b26" target="_blank"  title="Библиотека Javascript nodefire">Javascript :: nodefire</A></li><li><A href="https://www.03www.ru/101/index.html#b27" target="_blank"  title="Библиотека Javascript picbox">Javascript :: picbox</A></li><li><A href="https://www.03www.ru/101/index.html#b28" target="_blank"  title="Библиотека Javascript prettyphoto">Javascript :: prettyphoto</A></li><li><A href="https://www.03www.ru/101/index.html#b29" target="_blank"  title="Библиотека Javascript curvycorner">Javascript :: curvycorner</A></li><li><A href="https://www.03www.ru/101/index.html#b30" target="_blank"  title="Библиотека Javascript netzgestade">Javascript :: netzgestade</A></li><li><A href="https://www.03www.ru/101/index.html#b31" target="_blank"  title="Библиотека Javascript jquerycorner">Javascript :: jquerycorner</A></li><li><A href="https://www.03www.ru/101/index.html#b32" target="_blank"  title="Библиотека Javascript videolightbox">Javascript :: videolightbox</A></li><li><A href="https://www.03www.ru/101/index.html#b33" target="_blank"  title="Библиотека Javascript nodefire 2">Javascript :: nodefire 2</A></li><li><A href="https://www.03www.ru/101/index.html#b34" target="_blank"  title="Библиотека Javascript jqueryphoto">Javascript :: jqueryphoto</A></li> <li><A href="https://www.03www.ru/101/index.html#b80" target="_blank"  title="Библиотека Javascript SHADOWBOX">Javascript :: shadowbox</A></li><li><A href="https://www.03www.ru/101/index.html#b35" target="_blank"  title="Библиотека Javascript S3SLIDER">Javascript :: s3slider</A></li><li><A href="https://www.03www.ru/101/index.html#b36" target="_blank"  title="Библиотека Javascript tinybox">Javascript :: tinybox</A></li></ul><br><br><p style="margin-left:40px"><a href="https://www.03www.ru/5.php"   target="_blank">@ ДЛЯ ПИСЕМ</a></p><ul><li><a href="http://www.03skazki.ru/"  target="_blank">.::. Лучшие сказки мира</a></li><li><a href="http://www.03pressa.ru/"  target="_blank">.::. Детективы и фантастика</a></li><li><a href="http://www.03www.su/dosug.htm"  target="_blank">.::. Для досуга</a></li></ul><br><p style="text-align:center"><script type="text/javascript" src="https://www.03www.ru/js/mail.js"></script><br><br><script type="text/javascript" src="https://www.03www.ru/schet/online.php"></script></p><br></div><B class=bbottom><B class=bb4></B><B class=bb3></B><B class=bb2></B><B class=bb1></B></B></DIV><DIV id=byn2><B class=btop><B class=bb1></B><B class=bb2></B><B class=bb3></B><B class=bb4></B></B><DIV class=bboxcontent2><br><h1>ИЗБРАННЫЕ ПРИМЕРЫ 2013 года</h1><br><script id="tempxjs" rindex="341" type="text/javascript" src="https://www.03www.ru/temp-x.js"></script><h1 style="text-align:center;font: bold 24px Arial,sans-serif; color:#FFCC66;;text-shadow: 1px 1px 2px #000;behavior: url(byn.htc);}"><script type="text/javascript" src="titl.js"></script></h1><form name="copy" method="post" action="https://www.03www.ru/"><SCRIPT TYPE="text/javascript">function check(){ztext=document.copy.txt.value;document.copy.viewer.value=ztext.length/1000;}</script> <h2>HTML ↴ </h2><br><br><textarea class=TxtArea id=TxtA  onfocus="this.select();check()" ondblClick="javascript:HighlightAll('copy.txt')" name="txt" rows=24 cols=36 style="border:1px solid #000">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Постепенное увеличение блока с заменой цвета фона  (CSS3 animation-name animation-duration animation-iteration animation-direction)</title>
<style type="text/css">
.invert img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.invert img:hover {
  -webkit-filter: invert(100%); 
}
</style>

</head>
<body>
<p>Этот пример не работает в Internet Explorer</p>

<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>

размер Kb

ПРИМЕР ↴

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

на главную страницу примеров 2013 г. - клавиша ESC

смотреть примеры дальше - клавиша стрелка на клавиатуре ↦