javascript — воссоздайте анимацию градиента яблочной карты

Воссоздать градиентную анимацию на яблочной карте

A) CSS может сделать размытие, если вы создаете крошечное изображение, например, с 5×4 пикселями случайных цветов, растяните это изображение до 100% по height и width в качестве фона DIV и примените к нему сильное размытие, ваш результат вероятно будет выглядеть похожим. Однако размытие не работает во всех браузерах, поэтому вам понадобится запасное решение для неподдерживаемых браузеров.

Б) Также вы можете определить линейные градиенты в CSS . Теоретически, но я никогда не пробовал этого раньше, мы могли бы сделать несколько градиентов DIV с минимальными цветовыми различиями, наложенными друг на друга, используя opacity помощью CSS анимации / перехода, чтобы смешивать слои во времени.

Приведенный ниже фрагмент требует дополнительной настройки, поскольку он не работает во всех возможных нечетных случаях с браузерами, а также в представлении фрагмента есть некоторое смещение отступа, которое не было видно в чистом html, поскольку в фрагменте отсутствует тег body. Однако вы просили получить некоторые направления. Я надеюсь, что вы можете оптимизировать этот код и поделиться своими результатами с сообществом. Насколько я могу судить, он работает в MacOS Safari. Firefox и Chrome все еще переходят к концу перехода напрямую. Поэтому я желаю вам счастливой настройки!

 function startTransitions() { document.getElementById('gradient-top-left').style.opacity = "0.1"; document.getElementById('gradient-top-right').style.opacity = "0.1"; document.getElementById('gradient-bottom-left').style.opacity = "0.1"; document.getElementById('gradient-bottom-right').style.opacity = "0.1"; document.getElementById('colors').style.opacity = "1.0"; } document.addEventListener('DOMContentLoaded', function() { startTransitions(); }); 
 #canvas { margin: 0px; padding 0px; } #colors { position: absolute; margin: 0px; background-image: url(http://testing.2x2p.com/gradient/colors.png); background-size: cover; min-height: 100%; min-width: 100%; filter: blur(120px); -webkit-filter: blur(120px); z-index: 1; opacity: 0.0; -webkit-transition: opacity 6s ease-in-out 1s; -moz-transition: opacity 6s ease-in-out 1s; -ms-transition: opacity 6s ease-in-out 1s; -o-transition: opacity 6s ease-in-out 1s; transition: opacity 6s ease-in-out 1s; } #gradient-top-left { margin: 0px; position: absolute; background-color: #000; min-height: 100%; min-width: 100%; background-image: linear-gradient(to bottom right, orange, white); z-index: 2; -webkit-transition: opacity 5s ease-in-out 2s; -moz-transition: opacity 5s ease-in-out 2s; -ms-transition: opacity 5s ease-in-out 2s; -o-transition: opacity 5s ease-in-out 2s; transition: opacity 5s ease-in-out 2s; } #gradient-top-right { margin: 0px; position: absolute; background-color: #000; min-height: 100%; min-width: 100%; background-image: linear-gradient(to bottom left, lightgreen, white); opacity: 0.7; z-index: 3; -webkit-transition: opacity 3s ease-in-out 4s; -moz-transition: opacity 3s ease-in-out 4s; -ms-transition: opacity 3s ease-in-out 4s; -o-transition: opacity 3s ease-in-out 4s; transition: opacity 3s ease-in-out 4s; } #gradient-bottom-left { margin: 0px; position: absolute; background-color: #000; min-height: 100%; min-width: 100%; background-image: linear-gradient(to top right, pink, white); opacity: 0.7; z-index: 4; -webkit-transition: opacity 4s ease-in-out 3s; -moz-transition: opacity 4s ease-in-out 3s; -ms-transition: opacity 4s ease-in-out 3s; -o-transition: opacity 4s ease-in-out 3s; transition: opacity 4s ease-in-out 3s; } #gradient-bottom-right { margin: 0px; position: absolute; background-color: #000; min-height: 100%; min-width: 100%; background-image: linear-gradient(to top left, lightblue, white); opacity: 0.7; z-index: 5; -webkit-transition: opacity 6s ease-in-out 1s; -moz-transition: opacity 6s ease-in-out 1s; -ms-transition: opacity 6s ease-in-out 1s; -o-transition: opacity 6s ease-in-out 1s; transition: opacity 6s ease-in-out 1s; } 
 {amp}lt;div id="canvas"{amp}gt; {amp}lt;div id="colors"{amp}gt;{amp}amp;nbsp;{amp}lt;/div{amp}gt; {amp}lt;div id="gradient-top-left"{amp}gt;{amp}amp;nbsp;{amp}lt;/div{amp}gt; {amp}lt;div id="gradient-top-right"{amp}gt;{amp}amp;nbsp;{amp}lt;/div{amp}gt; {amp}lt;div id="gradient-bottom-left"{amp}gt;{amp}amp;nbsp;{amp}lt;/div{amp}gt; {amp}lt;div id="gradient-bottom-right"{amp}gt;{amp}amp;nbsp;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector