How to make Game in Html and CSS only on December 17, 2021 Get link Facebook Twitter Pinterest Email Other Apps How to make Game in Html and CSS only THE CSS PART DESING AS SHORT VIDEO IN SMALL WIDTH. YOU CAN CHANGE YOUR SELF CSS PART Html part Simple Game Using Html and CSS only CSS part *{ margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background: url("background.jpg"); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; } .background{ width: 800px; height: 550px; position: relative; border: 2px solid #fff; border-radius: 20px; box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.9), 8px 8px 25px rgba(0, 0, 0, 0.5); background: #eaeef0; overflow: hidden; } .sun{ position: absolute; top: 40px; right: 40px; width: 40px; height: 40px; background: #fff; border-radius: 50%; box-shadow: 0 0 40px #ffff5b, 0 0 60px #ffff5b, 0 0 80px #ffff5b, 0 0 100px #ffff5b; } .road{ position: absolute; width: 100%; height: 100px; top: 50%; left: 0; background: #333; } .road::before{ content: ""; position: absolute; width: 100%; height: 10PX; background: #0d9e0d; } .road::after{ content: ""; position: absolute; width: 100%; height: 4px; top: 50%; transform: translateY(-50%); background: repeating-linear-gradient(90deg, transparent 0, transparent 50%, #fff 50%, #fff 100%); background-size: 20px; animation: animateroad .2s linear infinite; } @keyframes animateroad { 0%{ background-position: 0; } 100%{ background-position-x:-20px; } } .fa-shuttle-van{ font-size: 6em; color: rgb(251,252, 253); position: absolute; left: 30px; z-index: 10; -webkit-text-stroke: 2px rgb(201, 7, 7); animation: van .2s linear infinite; bottom: 220px; } .fa-motorcycle{ font-size: 6em; color: rgb(251,252, 253); position: absolute; left: 250px; z-index: 10; -webkit-text-stroke: 2px rgb(201, 7, 7); animation: van .2s linear infinite; bottom: 220px; } @keyframes van{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(1px); } } .fa-cloud{ position: absolute; top: calc(5px * var(--i)); left: calc(15px * var(--i)); font-size: 5em; color: #fff; z-index: 1; -webkit-text-stroke: 2px #000; animation: cloud 3.5s linear infinite; animation-delay: calc(-1s * var(--i)); } @keyframes cloud{ 0%{ transform: translateX(350px); } 100%{ transform: translateX(-350px); } } .fa-tree{ position: absolute; bottom: 265px; font-size: 6em; color: #0d9d0d; z-index: 2; animation: cloud 7s linear infinite; animation-delay: calc(-1s * var(--i)); } .fa-mountain{ position: absolute; bottom: 200px; font-size: 15em; color: rgb(55, 152, 216); animation: cloud 15s linear infinite; animation-delay: calc(-3s * var(--i)); } Comments
Comments
Post a Comment