如何使用CSS和混色模式實現loader動畫效果（附代碼）

本篇文章給大家帶來的內容是關於如何使用CSS和混色模式實現loader動畫效果（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

原始碼下載

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，只有 1 個元素：

<div class="loader"></div>

置中顯示：

body {    margin: 0;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background-color: lightyellow;}

定義容器尺寸：

.loader {    width: 30em;    height: 3em;    font-size: 10px;}

用虛擬元素畫出2個圓角矩形，各占容器的一半寬，放置在容器的左右兩端，分別上色：

.loader {    position: relative;}.loader::before,.loader::after {    content: '';    position: absolute;    width: 50%;    height: inherit;    border-radius: 1em;}.loader::before {    left: 0;    background-color: dodgerblue;}.loader::after {    right: 0;    background-color: hotpink;}

為圓角矩形增加 'loading' 文本：

.loader::before,.loader::after {    content: 'loading';    font-size: 2.5em;    color: white;    text-align: center;    line-height: 1em;}

增加動畫效果：

.loader::before,.loader::after {    animation: 5s move ease-in-out infinite;}@keyframes move {    50% {        transform: translateX(100%);    }}

為兩個圓角矩形分別設定運動方向變數，使它們相對移動：

.loader::before {    --direction: 1;}.loader::after {    --direction: -1;}@keyframes move {    50% {        transform: translateX(calc(100% * var(--direction)));    }}

最後，設定混色模式，使兩個矩形相交的部分不是覆蓋而是使顏色重疊：

.loader::before,.loader::after {    mix-blend-mode: multiply;}

大功告成！