Показать сообщение отдельно
  #2 (permalink)  
Старый 20.03.2018, 14:37
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Набросок
<style>
div {
    position:absolute;
    left:100px;
    top:40px; }

.shadowtext {
    text-shadow: 8px 8px 16px black; /* Параметры тени */
    color: lightblue; /*  цвет текста */
    font-size: 80px; /* Размер надписи */
   }
</style>
<div>
<span class="shadowtext">T</span>
<span class="shadowtext">e</span> 
<span class="shadowtext">s</span> 
<span class="shadowtext">t</span> 
<span class="shadowtext">&nbsp;</span> 
<span class="shadowtext">s</span> 
<span class="shadowtext">h</span> 
<span class="shadowtext">a</span> 
<span class="shadowtext">d</span> 
<span class="shadowtext">o</span> 
<span class="shadowtext">w</span>
</div>  
<script>
var text = document.querySelectorAll(".shadowtext");
window.onmousemove = function(e) {
     for(var i = 0; i < text.length; i++) {
        var box = text[i].getBoundingClientRect();
        var x = box.left + (box.right - box.left) / 2 - e.clientX, 
              y = box.top + (box.bottom - box.top) / 2 - e.clientY;
        text[i].style.textShadow = x/10 + "px " + y/10 + "px " + (5 + (Math.abs(x) + Math.abs(y))/40) + "px black";
     }
}
</script>

Последний раз редактировалось Dilettante_Pro, 20.03.2018 в 16:08.
Ответить с цитированием