Сделать падение объекта

223

23 января 2021, 09:20

Хотелось бы увидеть, как возможно реализовать на css падение какого-то маленького объекта по касательной, ну или допустим падающую звезду или еще что-то такое. Очень интересно)

Answer 1

Вариантов множества.. Но раз в метках CSS, то вот два

@keyframes и div

Здесь анимируется именно позиция div (элемента);

body {margin: 0; overflow: hidden;} 
.block { 
  display: block; 
  width: 25vh; 
  height: 25vh; 
  background: url('https://www.mountainfamily.org/wp-content/uploads/2018/01/Review-star.png') no-repeat center center / contain; 
  animation: star 5s linear infinite; 
  position: absolute; 
  left: 0; top: 0; 
} 
 
@keyframes star { 
  to { 
    left: 100%; 
    top: 100%; 
  } 
}

<div class="block"></div>

@keyframes и background-position

А тут уже анимируется именно позиция background'а

body { 
  margin: 0; 
  overflow: hidden; 
} 
 
.snowContainer { 
  width: 100vw; 
  height: 100vh; 
  background: url('http://zastavok.net/main/zima/1507481531.jpg') no-repeat center center / cover; 
} 
 
#snow { 
  width: 100%; 
  height: 100%; 
  background-image: url("https://yraaa.ru/_pu/27/15825154.png"), url("https://yraaa.ru/_pu/27/89961317.png"), url("https://yraaa.ru/_pu/27/21791255.png"); 
  animation: snow 20s linear infinite; 
} 
 
@keyframes snow { 
  0% { 
    background-position: 0 0, 0 0, 0 0; 
  } 
  100% { 
    background-position: 500px 1000px, 400px 400px, 300px 300px; 
  } 
}

<div class="snowContainer"> 
  <div id="snow"></div> 
</div>

P.s. за анимацию спасибо сайту Yraaa.

Answer 2

Пример на JS, но меняю я атрибуты CSS, просто так легко задать псевдослучайное поведение.

Добавьте к стилю атрибут transition и установите желаемый параметр, который необходимо изменить, а дальше браузер сделает все сам.

let r = i => Math.random()*(i||1); 
setInterval(function() { 
 
  let star = document.createElement('div'); 
  document.body.append(star) 
  let s = star.style; 
   
  s.width = `${11+r(11)}px` 
  s.height = `${11+r(7)}px` 
  s.backgroundColor = `hsl(${r(360)},${25+r(50)}%,${25+r(50)}%)` 
  s.position = `absolute` 
  s.transition = `${1+r(3)}s cubic-bezier(${r()},${r()},${r()},${r()}) `  
  s.left = `${120+r(window.innerWidth-240)}px` 
  s.top = `-30px` 
   
  setTimeout(a => { 
    s.top = `${130+r(30)}px`; 
    s.transform = `rotate(${r(2000)-1000}deg)` 
    s.backgroundColor = `hsl(${r(360)},${25+r(50)}%,${25+r(50)}%)` 
    s.transform = `translate(${r(200)-100}px) rotate(${r(1000)-500}deg)` 
  }, 100) 
   
  setTimeout(a => s.backgroundColor = `hsl(${r(360)},${25+r(50)}%,${25+r(50)}%)`, r(500) + 100) 
  setTimeout(a => s.opacity = 0, 6000); 
  setTimeout(a => star.remove(), 9000); 
   
}, 200)

Answer 3

Решение SVG

Имитация ударов бильярдных шаров о бортики по касательной.

В качестве бортиков выступают границы SVG полотна, которые можно ограничивать шириной и высотой в процентах, например: width="50%" height="50%".

Анимация одного шарика:

<circle cx="50%" cy="20%" r="3%" fill="url(#grad_blue)" >
 <animate attributeName="cx" dur="3" values="3%;97%;3%"  
   repeatCount="indefinite" /> 
 <animate attributeName="cy" dur="2.8" values="3%;97%;3%"  
   repeatCount="indefinite" />
</circle>

Радиус шарика равен r="3%", следовательно, чтобы он не вылетел за правый бортик, максимальное смещение вправо по оси Х-ов не должно превышать 97%, аналогично смещение влево не более 3%. То есть, шарик должен коснутся стенки и отлететь. Это реализуется в атрибуте values="3%;97%;3%"

Точно также реализуется анимация attributeName="cy" по оси Y-ов.

Взаимодействие двух анимаций для координат центра шарика cx и cy создаёт иллюзию удара по касательной и отскока.

вариант с размерами: SVG: width="50%" height="50%"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" style="border:1px solid  grey;"> 
 
 <radialGradient id="grad_blue" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> 
   <stop stop-color="white" offset="0"/> 
   <stop stop-color="blue" offset="25%"/> 
   <stop stop-color="rgb(0,0,192)" offset="50%"/> 
   <stop stop-color="rgb(0,0,127)" offset="70%"/> 
   <stop stop-color="rgb(0,0,64)" offset="85%"/> 
   <stop stop-color="rgb(0,0,0)" offset="100%"/> 
 </radialGradient>    
  
  <!-- Синий шар --> 
<circle cx="50%" cy="20%" r="3%" fill="url(#grad_blue)" > 
   
 <animate attributeName="cx" dur="3" values="3%;97%;3%"   
   repeatCount="indefinite" />  
 <animate attributeName="cy" dur="2.8" values="3%;97%;3%"   
   repeatCount="indefinite" /> 
</circle> 
 
 <radialGradient id="grad_red" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> 
   <stop stop-color="white" offset="0"/> 
   <stop stop-color="red" offset="25%"/> 
   <stop stop-color="rgb(192,0,0)" offset="50%"/> 
   <stop stop-color="rgb(127,0,0)" offset="70%"/> 
   <stop stop-color="rgb(64,0,0)" offset="85%"/> 
   <stop stop-color="rgb(0,0,0)" offset="100%"/> 
 </radialGradient> 
 
   <!-- Красный шар --> 
<circle cx="30%" cy="70%" r="3%" fill="url(#grad_red)" > 
 
 <animate attributeName="cx" dur="2.7" values="97%;3%;97%"   
   repeatCount="indefinite" />  
 <animate attributeName="cy" dur="3.1" values="3%;97%;3%"   
   repeatCount="indefinite" /> 
</circle> 
  
</svg>

Вариант - width="100%" height="25%"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="25%" style="border:1px solid  grey;"> 
 
 <radialGradient id="grad_blue" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> 
   <stop stop-color="white" offset="0"/> 
   <stop stop-color="blue" offset="25%"/> 
   <stop stop-color="rgb(0,0,192)" offset="50%"/> 
   <stop stop-color="rgb(0,0,127)" offset="70%"/> 
   <stop stop-color="rgb(0,0,64)" offset="85%"/> 
   <stop stop-color="rgb(0,0,0)" offset="100%"/> 
 </radialGradient>    
  
  <!-- Синий шар --> 
<circle cx="50%" cy="20%" r="3%" fill="url(#grad_blue)" > 
   
 <animate attributeName="cx" dur="3" values="3%;97%;3%"   
   repeatCount="indefinite" />  
 <animate attributeName="cy" dur="2.8" values="3%;97%;3%"   
   repeatCount="indefinite" /> 
</circle> 
 
 <radialGradient id="grad_red" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> 
   <stop stop-color="white" offset="0"/> 
   <stop stop-color="red" offset="25%"/> 
   <stop stop-color="rgb(192,0,0)" offset="50%"/> 
   <stop stop-color="rgb(127,0,0)" offset="70%"/> 
   <stop stop-color="rgb(64,0,0)" offset="85%"/> 
   <stop stop-color="rgb(0,0,0)" offset="100%"/> 
 </radialGradient> 
 
   <!-- Красный шар --> 
<circle cx="30%" cy="70%" r="3%" fill="url(#grad_red)" > 
 
 <animate attributeName="cx" dur="2.7" values="97%;3%;97%"   
   repeatCount="indefinite" />  
 <animate attributeName="cy" dur="3.1" values="3%;97%;3%"   
   repeatCount="indefinite" /> 
</circle> 
  
</svg>

Вариант - width="25%" height="100%"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
xmlns:xlink="http://www.w3.org/1999/xlink" width="25%" height="100%" style="border:1px solid  grey;"> 
 
 <radialGradient id="grad_blue" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> 
   <stop stop-color="white" offset="0"/> 
   <stop stop-color="blue" offset="25%"/> 
   <stop stop-color="rgb(0,0,192)" offset="50%"/> 
   <stop stop-color="rgb(0,0,127)" offset="70%"/> 
   <stop stop-color="rgb(0,0,64)" offset="85%"/> 
   <stop stop-color="rgb(0,0,0)" offset="100%"/> 
 </radialGradient>    
  
  <!-- Синий шар --> 
<circle cx="50%" cy="20%" r="3%" fill="url(#grad_blue)" > 
   
 <animate attributeName="cx" dur="3" values="3%;97%;3%"   
   repeatCount="indefinite" />  
 <animate attributeName="cy" dur="2.8" values="3%;97%;3%"   
   repeatCount="indefinite" /> 
</circle> 
 
 <radialGradient id="grad_red" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> 
   <stop stop-color="white" offset="0"/> 
   <stop stop-color="red" offset="25%"/> 
   <stop stop-color="rgb(192,0,0)" offset="50%"/> 
   <stop stop-color="rgb(127,0,0)" offset="70%"/> 
   <stop stop-color="rgb(64,0,0)" offset="85%"/> 
   <stop stop-color="rgb(0,0,0)" offset="100%"/> 
 </radialGradient> 
 
   <!-- Красный шар --> 
<circle cx="30%" cy="70%" r="3%" fill="url(#grad_red)" > 
 
 <animate attributeName="cx" dur="2.7" values="97%;3%;97%"   
   repeatCount="indefinite" />  
 <animate attributeName="cy" dur="3.1" values="3%;97%;3%"   
   repeatCount="indefinite" /> 
</circle> 
  
</svg>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Разложение ряда S(y) функции

Задание состоит в том, чтобы написать программу вывода графиков функции y(x) для аргумента x, изменяющегося от a до b с шагом h (вводится с клавиатуры)...

c++

Задание по C++, структуры и функции [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

112

c++

C++ constructor delegation

Можно ли в конструкторе, два раза вызвать другой конструктор?

c++

Как в stl контейнерах (например std::list) получить и удалить элемент из контейнера за один вызов функции?

Есть ли какая-то возможность забрать элемент из std::list одновременно удаляя его (не вызывая отдельно два метода front и pop_front)? Если такого метода...

110