資訊專欄INFORMATION COLUMN
摘要：早上無意間進入一個網站，看到他們的效果略屌，如圖剛開始以為是動畫之類的，審查元素發現居然是用動畫實現的，頓時激起了我的欲望，決定要一探究竟，查看代碼之后，發現原理居然是如此簡單多個描邊動畫使用不同的即可對于一個形狀元素或文本元素，可以使用
早上無意間進入一個網站，看到他們的LOGO效果略屌，如圖：
剛開始以為是gif動畫之類的，審查元素發現居然是用SVG + CSS3動畫實現的，頓時激起了我的(hao)欲(qi)望(xin)，決定要一探究竟，查看代碼之后，發現原理居然是如此簡單：多個SVG描邊動畫使用不同的animation-delay即可！
對于一個形狀SVG元素或文本SVG元素，可以使用stroke-dasharray來控制描邊的間隔樣式，并且可以用stroke-dashoffset來控制描邊的偏移量，借此可以實現描邊動畫效果，更具體的資料可以看看張大神的《純CSS實現帥氣的SVG路徑描邊動畫效果》
我們先實現一個簡單的文字描邊動畫：
.text{
font-size: 64px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke: #3498db;
stroke-width: 2px;
stroke-dasharray: 90 310;
animation: stroke 6s infinite linear;
}
@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
演示地址：http://output.jsbin.com/demic...
然后我們同時使用多個描邊動畫，并設置不同的animation-delay：
注意：要使用多少種顏色，就放多少個text
.text{
font-size: 64px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 2px;
stroke-dasharray: 90 310;
animation: stroke 6s infinite linear;
}
.text-1{
stroke: #3498db;
text-shadow: 0 0 5px #3498db;
animation-delay: -1.5s;
}
.text-2{
stroke: #f39c12;
text-shadow: 0 0 5px #f39c12;
animation-delay: -3s;
}
.text-3{
stroke: #e74c3c;
text-shadow: 0 0 5px #e74c3c;
animation-delay: -4.5s;
}
.text-4{
stroke: #9b59b6;
text-shadow: 0 0 5px #9b59b6;
animation-delay: -6s;
}
@keyframes stroke {
100% {
stroke-dashoffset: -400;
}
}
大功告成，演示地址：http://output.jsbin.com/vuyuv...
需要注意的幾個點：
各個元素的animation-delay與animation的總時長的設置要協調
stroke-dashoffset與stroke-dasharray的設置要協調
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112519.html
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbe2O1?w=400&h=299); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbe2O1?w=400&h=299); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...
閱讀 1777·2021-09-28 09:43
閱讀 1125·2021-09-23 11:22
閱讀 2741·2021-09-14 18:05
閱讀 1833·2019-08-30 15:52
閱讀 2825·2019-08-30 10:55
閱讀 2020·2019-08-29 16:58
閱讀 1333·2019-08-29 16:37
閱讀 3046·2019-08-29 16:25
