Предотвратить CSS StarDust эффекта от потери формы на узком экране

я планирую реализовать следующий Stardust эффекта в качестве фона на мою страницу: http://codepen.io/PiotrBerebecki/pen/aBbmgW Предотвратить CSS StarDust эффекта от потери формы на узком экране

Проблема, которую я испытываю, что, когда ширина браузера окно опускается ниже 700px лучи в Stardust эффект искажается, как в следующем изображении:

ли вы знаете, что приводит к искажению формы и как это исправить?

HTML:

<ul class="starbust-wheel"> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul>

CSS:

body { 
    padding: 0; 
    margin: 0; 
    background: #03a9f4; 
} 

.starbust-wheel { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: 100%; 
    height: 100vh; 
    overflow: hidden; 
} 
.starbust-wheel > li { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 50%; 
    height: 50%; 
    padding: 0; 
    margin: 0; 
    transform-origin: 0 0; 
} 

.starbust-wheel > li:nth-child(odd) { 
    background-image: linear-gradient(-197deg, rgba(255, 255, 255, 0.4) 5%, transparent 25%); 
} 

.starbust-wheel > li:nth-child(1) { 
    transform: rotate(18deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(2) { 
    transform: rotate(36deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(3) { 
    transform: rotate(54deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(4) { 
    transform: rotate(72deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(5) { 
    transform: rotate(90deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(6) { 
    transform: rotate(108deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(7) { 
    transform: rotate(126deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(8) { 
    transform: rotate(144deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(9) { 
    transform: rotate(162deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(10) { 
    transform: rotate(180deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(11) { 
    transform: rotate(198deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(12) { 
    transform: rotate(216deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(13) { 
    transform: rotate(234deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(14) { 
    transform: rotate(252deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(15) { 
    transform: rotate(270deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(16) { 
    transform: rotate(288deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(17) { 
    transform: rotate(306deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(18) { 
    transform: rotate(324deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(19) { 
    transform: rotate(342deg) skewX(72deg); 
} 
.starbust-wheel > li:nth-child(20) { 
    transform: rotate(360deg) skewX(72deg); 
}

источник

2016-11-04 Piotr Berebecki

Почему бы просто не использовать SVG. Это ужасно много HTML и CSS для фона? –

Чтобы объяснить, почему вы видите то, что видите, это связано с тем, как вы делаете эту форму треугольника. Так как это только угол перекошенного прямоугольника с размерами, зависящими от размеров видового экрана, как только отношение высоты видового экрана к ширине будет достаточно высоким, появляется угол перекошенного прямоугольника и рассеивает эффект, который является треугольником. (Вы можете подтвердить это, используя веб-инспектор, чтобы выделить элемент при манипулировании видовым окном.) С точки зрения решения этого, хотя ... ха-ха, у меня болит голова. Пойдите с SVG. = P – Serlite

@Serlite Вы правы ... но я думаю, что увеличение ширины и высоты li до 100% решит проблему – vals

Они просто сокращаются из-за относительного размера, установленного на 50%. Если вы измените это на 100%, тогда он будет выглядеть точно так же, но не проявит проблему, которая у вас была. Я также рекомендую изменения высоты до 100%, так что у вас нет проблемы, если высота страницы идет слишком низко ...

.starbust-wheel > li { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    transform-origin: 0 0; 
}

Изменено пример: http://codepen.io/anon/pen/MbWXga

Вы, вероятно, хотите слегка изменить градиент, так как это немного осветил его от оригинала.

источник

2016-11-04 15:00:31 Archer

Лично я хотел бы создать несколько различных фонов на основе устройств шириной ... может быть что-то для 1920х1080, потом несколько больше для небольших устройств ...

Реализовать затем, используя медиа-запросы на основе min -width (мобильный первый и все :-)) или использовать javascript ...

SVG также вариант, может быть, если вы хотите что-то анимированное?

источник

2016-11-04 14:53:24 Sanspoof

Предотвратить CSS StarDust эффекта от потери формы на узком экране

ответ

Смежные вопросы