| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image animations</title> | |
| <style> | |
| *{ | |
| box-sizing: border-box; | |
| } | |
| body{ | |
| background-color: rgb(247, 206, 206); | |
| } | |
| .main-container{ | |
| text-align: center; | |
| display: flex; | |
| align-items: center; | |
| flex-direction: column; | |
| } | |
| .main-container h1{ | |
| color: rgb(37, 3, 100); | |
| font-weight: bold; | |
| background-color: yellow; | |
| padding: 5px; | |
| border-radius: 10px; | |
| } | |
| .main-container p{ | |
| color: rgb(8, 179, 8); | |
| font-size: 20px; | |
| font-weight: bold; | |
| } | |
| .main-container .buttons{ | |
| width: 500px; | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| .btn{ | |
| padding: 5px; | |
| background-color: purple; | |
| color: white; | |
| width: 250px; | |
| font-size: 20px; | |
| border-radius: 6px; | |
| outline: none; | |
| margin: 10px; | |
| cursor: pointer; | |
| } | |
| img{ | |
| border: 5px solid yellow; | |
| border-radius: 10px; | |
| height: 400px; | |
| margin: 10px; | |
| } | |
| span{ | |
| color: red; | |
| } | |
| .animate1{ | |
| animation: flip 1s infinite; | |
| } | |
| .animate2{ | |
| animation: shake 2s infinite; | |
| } | |
| @keyframes flip{ | |
| 0%{ | |
| transform: rotateY(0deg); | |
| } | |
| 10%{ | |
| transform: rotateY(36deg); | |
| } | |
| 20%{ | |
| transform: rotateY(72deg); | |
| } | |
| 30%{ | |
| transform: rotateY(108deg); | |
| } | |
| 40%{ | |
| transform: rotateY(144deg); | |
| } | |
| 50%{ | |
| transform: rotateY(180deg); | |
| } | |
| 60%{ | |
| transform: rotateY(216deg); | |
| } | |
| 70%{ | |
| transform: rotateY(252deg); | |
| } | |
| 80%{ | |
| transform: rotateY(288deg); | |
| } | |
| 90%{ | |
| transform: rotateY(324deg); | |
| } | |
| 100%{ | |
| transform: rotateY(360deg); | |
| } | |
| } | |
| @keyframes shake{ | |
| 0%{ | |
| transform: rotate(1deg) translate(1px,1px); | |
| } | |
| 10%{ | |
| transform: rotate(0deg) translate(-1px,3px); | |
| } | |
| 20%{ | |
| transform: rotate(-1deg) translate(3px,1px); | |
| } | |
| 30%{ | |
| transform: rotate(3deg) translate(-1px,-1px); | |
| } | |
| 40%{ | |
| transform: rotate(1deg) translate(-1px,-3px); | |
| } | |
| 50%{ | |
| transform: rotate(-1deg) translate(3px,1px); | |
| } | |
| 60%{ | |
| transform: rotate(0deg) translate(1px,-3px); | |
| } | |
| 70%{ | |
| transform: rotate(3deg) translate(3px,-1px); | |
| } | |
| 80%{ | |
| transform: rotate(-1deg) translate(1px,-1px); | |
| } | |
| 90%{ | |
| transform: rotate(1deg) translate(3px,-3px); | |
| } | |
| 100%{ | |
| transform: rotate(0deg) translate(0px,0px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="main-container"> | |
| <h1> <span> Sync Programming</span> Image animations</h1> | |
| <p>Click on the below buttons to see the respective animation</p> | |
| <div class="buttons"> | |
| <button class="btn" onclick="flip()">Flip image</button> | |
| <button class="btn" onclick="shake()">Shake image</button> | |
| </div> | |
| <div class="img-container"> | |
| <img src="dance2.jpg" alt="" id="img"> | |
| </div> | |
| </div> | |
| <script> | |
| var img = document.getElementById('img'); | |
| function flip(){ | |
| img.classList.toggle('animate1') | |
| } | |
| function shake(){ | |
| img.classList.toggle('animate2') | |
| } | |
| </script> | |
| </body> | |
| </html> |
No comments:
Post a Comment