Advertisement
Guest User

Untitled

a guest
Oct 21st, 2019
114
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.31 KB | None | 0 0
  1.  <html>
  2. <head>
  3.     <title>dhtml</title>
  4.     <style>
  5.       .box {
  6.     /* border-style: solid; */
  7.     /* border-width: 1px; */
  8.     display: block;
  9.     width: 100px;
  10.     height: 100px;
  11.     /* background-color: #0000FF; */
  12.     -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
  13.     transition: width 2s, height 2s, background-color 2s, transform 2s;
  14.     }
  15.  
  16.     .box:hover {
  17.     /* background-color: #FFCCCC; */
  18.     width: 500px;
  19.     height: 500px;
  20.     -webkit-transform: rotate(360deg);
  21.     transform: rotate(360deg);
  22.     }
  23.     </style>
  24. </head>
  25. <body>
  26.     <p>К блоку ниже применятся анимации для свойств: width, height, background-color, transform. Наведите на него, чтобы увидеть, как они анимируются</p>
  27.   <img src="fr.png" class="box">
  28. </body>
  29. <!--Назначение обработчиков с помощью addEventListener лучше, чем с помощью DOM-свойств одноименным собятиям, так как не на все события можно с помощью DOM-свойств навестить обработчик. Примером является событие transitionend.
  30. В пример только второй обработчик сработает.-->
  31. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement