CSS случайное размещение и отзывчивость div

Я создал анимацию звездной ночи, но мне было интересно, есть ли у кого-нибудь лучший способ разместить div «случайно» только с помощью CSS ??? А еще у меня проблемы с реакцией. Спасибо за ваше время! просто пытаюсь научиться.

проверьте полный код на http://codepen.io/anon/pen/MeeYWO?editors= 1100

#star-bl:nth-of-type(5) {
    left: -350px;
    top: 225px;
}

#star-bl:nth-of-type(6) {
    left: 750px;
    top: 250px;
}

#star-bl:nth-of-type(7) {
    left: -450px;
}

#star-sm:nth-of-type(8) {
    left: -225px;
}

#star-sm:nth-of-type(9) {
    left: 500px;
}

#star-sm:nth-of-type(10) {
    left: -100px;
}

animation html css responsive
person user3393940    schedule 15.06.2016    source источник
comment
что именно вы пытаетесь сделать?   -  person Gaurav Aggarwal    schedule 15.06.2016
comment
поиск более простого способа кодирования размещения звезд, а не повторения nth-of-type (x) количество раз   -  person user3393940    schedule 16.06.2016
comment
Это грязная песочница, но она работает... использует JS и прослушиватель анимации для присвоения случайных значений 100% ключевому кадру на каждой итерации анимации. codepen.io/ashleedawg/pen/qBBKKeg   -  person ashleedawg    schedule 09.11.2019

Ответы (3)


arrow_upward
3
arrow_downward

На данный момент это невозможно в чистом CSS (я надеюсь, что calc(rand) станет чем-то особенным). Решение, которое вы используете, так же хорошо, как и любое другое, вы можете рассмотреть возможность использования процентов, если хотите, чтобы звезды группировались на меньшем типе экрана.

person Buts    schedule 15.06.2016

arrow_upward
1
arrow_downward

К сожалению, в настоящее время это невозможно в CSS.

Однако, если вы захотите перейти с CSS на LESS, вы можете задать своим звездочкам случайные значения. Можно вставить JavaScript в LESS, заключив выражение JavaScript в обратные кавычки, как показано в этом сообщении.

Вот пример присвоения вашему div #star-bl случайного левого значения от 1 до 100.

#star-bl {
    @random-margin: `Math.random() * 100`;
    left: @random-margin * 1px;
}

Вам все равно нужно было бы дать каждой звезде отдельный блок внутри файла LESS, но это будет давать вашим звездочкам разные позиции каждый раз, когда вы посещаете страницу.

Вот ссылка на руководство по использованию LESS.

person Zentryn    schedule 15.06.2016

arrow_upward
0
arrow_downward

Не с ванильным CSS, но вы можете использовать препроцессор CSS, такой как Less или Sass для генерации случайных чисел во время компиляции.

Вот как это можно сделать в Sass, используя метод случайного экземпляра.

@import compass
body
  background: black

.star
  width: 10px
  height: 10px
  position: absolute
  font-size: 10px
  color: white

@for $i from 1 through 500
  .star:nth-child(#{$i})
    top: random(1000) + px
    left: random(1000) + px

ДЕМО: http://codepen.io/moob/pen/dXXGdy

person Moob    schedule 15.06.2016