Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>dhtml</title>
- <style>
- .box {
- /* border-style: solid; */
- /* border-width: 1px; */
- display: block;
- width: 100px;
- height: 100px;
- /* background-color: #0000FF; */
- -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
- transition: width 2s, height 2s, background-color 2s, transform 2s;
- }
- .box:hover {
- /* background-color: #FFCCCC; */
- width: 500px;
- height: 500px;
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- </style>
- </head>
- <body>
- <p>К блоку ниже применятся анимации для свойств: width, height, background-color, transform. Наведите на него, чтобы увидеть, как они анимируются</p>
- <img src="fr.png" class="box">
- </body>
- <!--Назначение обработчиков с помощью addEventListener лучше, чем с помощью DOM-свойств одноименным собятиям, так как не на все события можно с помощью DOM-свойств навестить обработчик. Примером является событие transitionend.
- В пример только второй обработчик сработает.-->
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement