這里給大家分享我在網(wǎng)上總結出來的一些知識，希望對大家有所幫助
代碼片段
閑來無事寫了個有意思的東西，鼠標放在小方塊上會放大并擠壓周圍方塊，背景顏色會動態(tài)改變。這里沒有用一行 js 代碼，純樣式（Sass）實現(xiàn)。
<template>
<div class="container">
<div class="grid">
<div class="item" v-for="item in 36"></div>
</div>
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
.grid {
display: grid;
height: 800px;
width: 800px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
transition: all 0.3s;
flex-shrink: 0;
@for $i from 0 to 36 {
.item:nth-child(#{$i + 1}) {
background: hsl(10 * $i, 100%, 75%);
animation-name: color-spin-#{$i};
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
@keyframes color-spin-#{$i} {
@for $j from 0 through 36 {
#{$j * 100 / 36}% {
background: hsl(10 * ($i + $j), 100%, 75%);
}
}
}
}
&:has(.item:nth-child(#{$i + 1}):hover) {
$arr: 1fr 1fr 1fr 1fr 1fr 1fr;
$columns: set-nth($arr, $i % 6 + 1, 2fr);
$rows: set-nth($arr, floor($i / 6) + 1, 2fr);
grid-template-columns: $columns;
grid-template-rows: $rows;
}
}
}
}
</style>
實現(xiàn)方式
下面只展示核心代碼，完整代碼請參照上方代碼片段。
繪制 Dom
先畫一個 6 x 6 的正方形，利用 v-for 循環(huán)出 dom 元素。當然也可以不用 Vue 語法，復制 36 行 item。
<div class="grid"> <div class="item" v-for="item in 36"></div> </div>
Grid 布局
這里切記不要使用?repeat(6, 1fr)，會導致過渡失效。
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
}
添加背景色
每個小方塊都有自己的顏色，這里利用 Sass 循環(huán)來實現(xiàn)。通過 hsl 顏色函數(shù)輕松計算出低飽和度的彩色。色環(huán)一共 360°，36 個方塊依次遞增 10°，形成一個完美的色環(huán)。
@for $i from 0 to 36 {
.item:nth-child(#{$i + 1}) {
background: hsl(10 * $i, 100%, 75%);
}
}
懸浮動效
接著加入懸浮放大的效果，懸浮方塊橫縱變成 2fr 就能放大與擠壓周圍方塊。這里需要一點計算，定義一個 Sass 數(shù)組，通過除法與取余修改數(shù)組對應下標的變量。
@for $i from 0 to 36 {
&:has(.item:nth-child(#{$i + 1}):hover) {
$arr: 1fr 1fr 1fr 1fr 1fr 1fr;
$columns: set-nth($arr, $i % 6 + 1, 2fr);
$rows: set-nth($arr, floor($i / 6) + 1, 2fr);
grid-template-columns: $columns;
grid-template-rows: $rows;
}
}
顏色動畫
最后再加一個炫酷的顏色動畫，讓色環(huán)動起來。這里需要雙層嵌套循環(huán)，每個小方塊都有自己的動畫。動畫過程拆分成 36 份，選擇線性過渡，顏色依然是連貫的色環(huán)。
@for $i from 0 to 36 {
.item:nth-child(#{$i + 1}) {
animation-name: color-spin-#{$i};
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: linear;
@keyframes color-spin-#{$i} {
@for $j from 0 through 36 {
#{$j * 100 / 36}% {
background: hsl(10 * ($i + $j), 100%, 75%);
}
}
}
}
}
總結
利用樣式實現(xiàn)的效果除了有成就感，也有代價，編譯完的 css 很大，有 72.5 KB。性能也不一定比用 js 高，權當玩玩。文章來源：http://www.zghlxwxcb.cn/news/detail-746018.html
本文轉(zhuǎn)載于:
https://juejin.cn/post/7298646156439044096
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-746018.html
到了這里，關于記錄--一個純樣式花里胡哨的動態(tài)漸變背景塊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
