실습문제 5-6
WEB/TRAINNING 2017. 11. 6. 19:37 |6. 이미지를 회전시키는 애니메이션을 작성하라
(1) 1초에 한 바퀴씩 무한번 반복한다<!DOCTYPE html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <html> <head> <title></title> </head> <style> @keyframes rotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } } img { animation-name: rotate; animation-duration: 1s; animation-iteration-count: infinite; } </style> <body> <h3>어지러워요</h3> <hr> <img src="test.png" width="90px" height="100px"> </body> </html> | cs |
(2) 왼쪽으로 90도 갔다가 다시 오른쪽으로 90도 가기를 1초에 1번씩 무한 반복한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <html> <head> <title></title> </head> <style> @keyframes rotate { 0% { transform:rotate(-90deg); } 50% { transform:rotate(90deg); } 100% { transform:rotate(-90deg); } } img { animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; } </style> <body> <h3>어지러워요</h3> <hr> <img src="spongebob.png" width="90px" height="100px"> </body> </html> | cs |
