Пример:
Выбрать другой мяч для примера:
Другие мячи можно найти на сайте pngwing.com или ему подобных. Выбирая альтернативный мячик, обратите внимание, что падающий на него свет задается в CSS и поэтому лучше выбирать их без дополнительных графических теней.
HTML:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ball-section"> <div class="pos-x"> <div class="pos-y"> <div class="ball"> <div class="light"></div> <div class="ball-shape"></div> </div> </div> </div> </div> |
CSS:
Контейнер страницы, в котором находится мяч должен иметь стиль overflow-x: hidden
|
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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
.ball-section { --height: 400px; --size: 100px; --speed: 3s; height: var(--height); } .pos-x { animation-name: moveX; animation-duration:var(--speed); animation-timing-function:linear; animation-iteration-count: infinite; animation-direction: alternate; } .pos-y { animation-name: moveY; animation-duration:calc(var(--speed) * 0.725); animation-timing-function:linear; animation-iteration-count: infinite; animation-direction: alternate; } .ball { position: relative; width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden; animation-name: ballHeight; animation-duration: calc(var(--speed) / 2); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } .light { position: absolute; z-index: 1; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255,.7), rgba(255, 255, 255,.5) 10%, transparent 30% ,rgba(0,0,0,.6) 85%); } .ball-shape { height: 100%; background-color: #FFF; background-image: url(ball.png); background-size: 100%; animation-name: spinBall; animation-duration: var(--speed); animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes moveX { 0% {transform:translateX(0)} 100% {transform:translateX(calc(100% - var(--size)))} } @keyframes moveY { 0% {transform:translateY(0);} 100% {transform:translateY(calc(var(--height) - var(--size)))} } @keyframes spinBall { to {transform:rotate(360deg);} } @keyframes ballHeight { from {transform:scale(1);filter:drop-shadow(0 0 0 rgba(0,0,30,.4))} to{transform:scale(1.3);filter:drop-shadow(calc(var(--size) * .8) calc(var(--size) * .8) 10px rgba(0,0,30,.4))} } |
Где:
height - высота секции
size - размер мяча
speed - продолжительность анимации, влияющая на скорость движения мяча
За основу взято решение, найденное на codepen.io у пользователя Jomohop
Добавить комментарий: