個純CSS實現的Loading特效是一個非常簡單而實用的選擇,它由三個圓圈橫向排列,并不斷閃爍。這種動畫效果很適合用于頁面加載過程中,為用戶提供一個愉悅的等待體驗。
在這個特效的設計中,使用了CSS的animation屬性來實現圓圈的閃爍效果。這個特效的實現并沒有用到任何JavaScript,這意味著它可以幫助提升網站的性能,同時也減少了代碼的復雜性。
這個特效的視覺效果非常出色,它為用戶提供了一個簡單而美觀的等待界面。如果您正在尋找一個簡單而實用的加載動畫,那么這個純CSS實現的3個圓圈橫向排列不斷閃爍的Loading特效一定會是一個不錯的選擇。
希望這個特效能夠為您的網站增添一些活力和趣味性!
文將介紹如何使用純CSS實現一個有趣的Loading特效。這個特效將展示9個圓圈在不斷閃爍,看起來非常有趣。
首先,我們需要在HTML中創建9個圓圈的結構。這可以通過使用div元素并給它們不同的類名來實現。以下是HTML代碼:
<div class="loading">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div
接下來,我們需要使用CSS樣式來使這些圓圈閃爍。我們將使用關鍵幀動畫來實現這個效果。以下是CSS代碼:
.loading,
.loading > div {
position: relative;
box-sizing: border-box;
}
.loading {
display: block;
font-size: 0;
color: #000;
}
.loading.la-dark {
color: #333;
}
.loading > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
}
.loading {
width: 36px;
height: 36px;
}
.loading > div {
width: 8px;
height: 8px;
margin: 2px;
border-radius: 100%;
animation-name: ball-grid-beat;
animation-iteration-count: infinite;
}
.loading > div:nth-child(1) {
animation-duration: 0.65s;
animation-delay: 0.03s;
}
.loading > div:nth-child(2) {
animation-duration: 1.02s;
animation-delay: 0.09s;
}
.loading > div:nth-child(3) {
animation-duration: 1.06s;
animation-delay: -0.69s;
}
.loading > div:nth-child(4) {
animation-duration: 1.5s;
animation-delay: -0.41s;
}
.loading > div:nth-child(5) {
animation-duration: 1.6s;
animation-delay: 0.04s;
}
.loading > div:nth-child(6) {
animation-duration: 0.84s;
animation-delay: 0.07s;
}
.loading > div:nth-child(7) {
animation-duration: 0.68s;
animation-delay: -0.66s;
}
.loading > div:nth-child(8) {
animation-duration: 0.93s;
animation-delay: -0.76s;
}
.loading > div:nth-child(9) {
animation-duration: 1.24s;
animation-delay: -0.76s;
}
@keyframes ball-grid-beat {
0% {
opacity: 1;
}
50% {
opacity: 0.35;
}
100% {
opacity: 1;
}
}
我們首先設置了一個圓圈容器 .loading,使其垂直居中。然后,我們創建了一堆div樣式,這將是所有圓圈的基本樣式。接下來,我們為每個圓圈設置了不同的背景顏色,并為它們添加了一個名為ball-grid-beat的關鍵幀動畫。這個動畫將使圓圈在1秒內從不透明到半透明來回變化。
最后,我們定義了這個動畫的關鍵幀。我們將圓圈的不透明度從1降到0.35,然后在動畫返回時恢復到1。
通過使用HTML和CSS,我們已經成功地創建了一個有趣的Loading特效,其中9個圓圈不斷閃爍。您可以在自己的網站或項目中使用這個特效,以增加用戶體驗和視覺吸引力。
有次看電影, 看到屏幕上一個個的文字蹦出來, 感覺像是有人在打字一樣, 覺得挺有意思, 于是這里也用js實現了一個。
只要五行代碼, 這里直接貼出來:
const dom = document.querySelector('.content')
const data = '最簡單的打字效果代碼'.split('')
let index = 0
function writing(index) {
if (index < data.length) {
dom.innerHTML += data[index]
setTimeout(writing.bind(this), 200, ++index)
}
}
是不是超級簡單, 現在只要執行這個函數, 你就能看到這樣的效果了:
通過setTimeout設置一個時間的間隔, 每隔一定時間向dom中插入對應的數據, 并將index加1, 然后重新調用這個寫函數。
思路:
通過一個偽類after將光標定在dom的最后面, 并給一個顯示隱藏的循環動畫模擬光標的閃爍
::after{
content: '|';
animation: blink 1s infinite
}
@keyframes blink{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
通過css3的animation我們就實現了一個閃爍的光標效果。
實現:
我們可以把上面的代碼放在一個class中, 然后我們執行writing時將這個class加到對應的dom中即可。
這里依賴一個插件pinyin, 大家可以通過npm安裝
npm install pinyin
使用也很簡單,我們只要把文本傳入這個插件的方法中, 返回的就是每個漢字的拼音的數組。
import Pinyin from 'pinyin'
let data = '漢字'
let pinyinData = Pinyin(data) //['han', 'zi']
然后我們通過模板字符串注入到對應的文字后面即可:
this.content.innerHTML += `${arr[index]}<sup>(${pinyinData[index]})</sup>`
這樣就實現了加拼音的簡單效果了。
加動畫的代碼也很簡單, 關鍵是思路。
我開始的想法是將每個文字用span標簽包裹起來, 給每個span加動畫即可。后來發現這樣行不通, 因為每次dom中的innerHTML其實是重新渲染的, 那樣的話, 之前的span也會一直有動畫, 這不是我們想要的效果。
解決方案:
給每個span加個class實現動畫, 但在下個span渲染時清除之前span的class, 這樣就實現了只有當前的span有動畫了.
我這里直接選擇了正則匹配粗暴的將class去掉。大家也可以尋找一種更好的方式解決。
代碼如下:
this.content.innerHTML = this.content.innerHTML.replace(/span-animation/g, '') + `<span class="span-animation">${arr[index]}</span>`
實現效果:
這并非最佳實踐, 只是偶然所想, 給各位道友提供個思路,拋磚引玉, O(∩_∩)O哈哈~
源自:https://juejin.im/post/5ddf55835188257313541581
*請認真填寫需求信息,我們會在24小時內與您取得聯系。