輸入框中陰影的平滑動畫

我需要創建「陰影」的「脈衝」動畫。我知道訣竅：之後，但它不適用於輸入，因爲它是自閉元素。以下是我的代碼示例。如果可能，我想用css/less來解決它，並儘量不要使用js。我忘了補充一點，我有一些包裝結構，我不能改變它。結構就像 「form> div> input」。如果輸入焦點集中，我需要添加該動畫。輸入框中陰影的平滑動畫

.elem { 
 
    border: 2px solid black; 
 
    width: 150px; 
 
    height: 50px; 
 
    margin: 30px; 
 
    line-heiht: 50px; 
 
    font-size: 42px; 
 
} 
 

 
@keyframes pulseGreenShadow { 
 
    from { 
 
    box-shadow: 3px 3px 5px green 
 
    } 
 
    to { 
 
    box-shadow: 1px 1px 0px green 
 
    } 
 
} 
 

 
.elem:focus { 
 
    animation: pulseGreenShadow 1s ease-in-out infinite alternate-reverse; 
 
}

<input class="elem">

http://jsfiddle.net/SkylinR/cowzb1hg/227/

比你提前爲任何幫助

來源

2017-06-01 Skylin R

你的前充足的作品對我來說有什麼問題？ –

它一步一步地成長，抖動或類似的東西，不平穩的脈搏。我的客戶不喜歡它。 :(（瀏覽器Chrome） –

你可以使用contentEditable'div's？ –

我有問題一些解決。我已經添加了盒子陰影等div和動畫，而不是盒子的陰影，但不透明:)，它工作正常（如果我將包裝形式，如果我會包裝的問題，然後我仍然無法檢測到輸入重點）

.parent{ 
 
    width: 150px; 
 
    height: 50px; 
 
    margin: 30px; 
 
    position: relative; 
 
} 
 
.elem{ 
 
    border: 2px solid black; 
 
    width: 150px; 
 
    height: 50px; 
 
    line-heiht: 50px; 
 
    font-size: 42px; 
 
} 
 
@keyframes pulseGreenShadow { 
 
    from {opacity: 0} 
 
    to {opacity: 1} 
 
} 
 
.elem:focus +.pulse-shadow:after{ 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 150px; 
 
    height: 50px; 
 
    opacity: 1; 
 
    box-shadow: 5px 5px 10px green; 
 
    animation: pulseGreenShadow 1s ease-in-out infinite alternate-reverse; 
 
    border: 2px solid green; 
 
    outline: 0; 
 
}

<div class="parent"> 
 
     <input class="elem"> 
 
     <div class="pulse-shadow"></div> 
 
    </div>

來源

2017-06-01 07:58:17

看看這是什麼更好的爲您提供：

input { 
 
\t border: 1px solid lightgray; 
 
\t height: 40px; 
 
\t padding: 0 10px; 
 
\t width: 200px; 
 
} 
 

 
input:focus { 
 
\t animation: glow 800ms ease-out infinite alternate; 
 
\t outline: none; 
 
} 
 

 

 
@keyframes glow { 
 
    0% { 
 
\t \t box-shadow: 0 0 5px rgba(0,255,0,.2); 
 
    } \t 
 
    100% { 
 
\t \t box-shadow: 0 0 20px rgba(0,255,0,.8); 
 
    } 
 
}

<input type="text">

來源

2017-06-01 08:00:17 Gerard

偉大的，這是我需要:)謝謝（是不是像makshh發送同樣的解決方案？） –

很多共同的是預期。差異在細節中;） – Gerard

輸入框中陰影的平滑動畫

回答

相關問題