Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *{ margin: 0; padding: 0; } .container{ width: 1366px; height: 805px; background-image: url(https://www.frontendforever.com/uploads/assets/bg5.jpg); background-repeat: no-repeat; background-size: cover; } .pool{ position: relative; margin: -150px 30px; width: 1220px; height: 500px; background: skyblue; border:50px solid black; transform-style: preserve-3d; transform-origin: bottom; transform: perspective(2000px) rotateX(86deg); } #img1 img{ width: 300px; height: 200px; position: absolute; top: 35%; left: 2%; z-index: 10; transform: rotateY(-180deg); } #img2 img{ width: 300px; height: 200px; position: absolute; top: 35%; right: 2%; z-index: 10; } #img1 #board{ position: absolute; right: 0; width: 80px; height: 20px; top: 60%; background: white; transform-style: preserve-3d; transform-origin: bottom; transform: rotateX(80deg); } #img2 #board{ position: absolute; left: 0; width: 80px; height: 20px; top: 60%; background: white; transform-style: preserve-3d; transform-origin: bottom; transform: rotateX(80deg); } .down{ width: 1300px; height: 196px; background: rgba(135,206,235,.7); border-top: 10px solid black; border-left: 10px solid black; border-right: 10px solid black; position: absolute; bottom: 1px; left: 2%; } .down img{ width: 60px; height: 60px; position: absolute; top: -40%; right: 50%; animation: bird 30s linear infinite; } @keyframes bird{ 0%{ transform: translateX(300px); } } #img3 img{ width: 300px; height: 200px; position: absolute; top: 65%; animation: swim 10s linear infinite; } @keyframes swim{ 0%{ } 100%{ transform: translateX(1050px); } }
console.log("Event Fired")