CSS 漸變邊框及動(dòng)畫

轉(zhuǎn)載請(qǐng)注明出處题诵,點(diǎn)擊此處 查看更多精彩內(nèi)容

預(yù)覽效果

用 CSS 實(shí)現(xiàn)漸變邊框及動(dòng)畫,下面對(duì)關(guān)鍵點(diǎn)解釋說明徒溪,查看完整代碼及預(yù)覽效果請(qǐng) 點(diǎn)擊這里你稚。

簡(jiǎn)單說明原理:使用偽元素 ::before 繪制一個(gè)漸變色瞬沦,然后使用偽元素 ::after 繪制背景,使其遮住漸變色的一部分剿另,僅保留邊框部分箫锤,然后添加旋轉(zhuǎn)動(dòng)畫即可。

DOM 結(jié)構(gòu)

<div class="container"></div>
.container {
  border-radius: var(--border-radius);
  overflow: hidden;
}

overflow: hidden 防止內(nèi)部元素溢出雨女。

漸變背景

使用 ::before 偽元素實(shí)現(xiàn)一個(gè)徑向漸變背景谚攒。

.container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 150%;
  padding-bottom: 150%;
  background: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg,#a853ba 112.5deg,#2a8af6 228.75deg,rgba(42,138,246,0) 360deg);
  z-index: -1;
}

這里沒有直接設(shè)置偽元素高度,而是使用 width: 200%; padding-bottom: 200%; 繪制一個(gè)正方形氛堕,并且尺寸大于父元素馏臭,防止動(dòng)畫時(shí)背景不能完全覆蓋父元素。

漸變邊框

使用 ::after 偽元素作為遮罩及背景,遮住 ::before 偽元素使其僅展示出邊框區(qū)域括儒。

.container::after {
  content: "";
  position: absolute;
  inset: var(--border-size);
  background: var(--bg-color);
  border-radius: var(--border-radius);
  z-index: -1;
}

添加動(dòng)畫

:before 添加旋轉(zhuǎn)動(dòng)畫绕沈。

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
    
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

.container::before {
  ...,
  animation: rotate 3s linear infinite;
}

邊框追逐效果

通過設(shè)置分區(qū)的漸變背景即可完成邊框上多線條相互追逐的炫酷效果。

.container {
  --border-color: conic-gradient(from 180deg at 50% 50%,#e92a67 0deg, transparent 90deg, transparent 180deg, #2a8af6 180deg, transparent 270deg);
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末帮寻,一起剝皮案震驚了整個(gè)濱河市乍狐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌固逗,老刑警劉巖浅蚪,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異烫罩,居然都是意外死亡惜傲,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門贝攒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來盗誊,“玉大人,你說我怎么就攤上這事饿这∽腔铮” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵长捧,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我吻贿,道長(zhǎng)串结,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任舅列,我火速辦了婚禮肌割,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘帐要。我一直安慰自己把敞,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布榨惠。 她就那樣靜靜地躺著奋早,像睡著了一般。 火紅的嫁衣襯著肌膚如雪赠橙。 梳的紋絲不亂的頭發(fā)上耽装,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音期揪,去河邊找鬼掉奄。 笑死,一個(gè)胖子當(dāng)著我的面吹牛凤薛,可吹牛的內(nèi)容都是我干的姓建。 我是一名探鬼主播诞仓,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼速兔!你這毒婦竟也來了墅拭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤憨栽,失蹤者是張志新(化名)和其女友劉穎帜矾,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體屑柔,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡屡萤,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了掸宛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片死陆。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖唧瘾,靈堂內(nèi)的尸體忽然破棺而出措译,到底是詐尸還是另有隱情,我是刑警寧澤饰序,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布领虹,位于F島的核電站,受9級(jí)特大地震影響求豫,放射性物質(zhì)發(fā)生泄漏塌衰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一蝠嘉、第九天 我趴在偏房一處隱蔽的房頂上張望最疆。 院中可真熱鬧,春花似錦蚤告、人聲如沸努酸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)获诈。三九已至,卻和暖如春箫章,著一層夾襖步出監(jiān)牢的瞬間烙荷,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工檬寂, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留终抽,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像昼伴,于是被迫代替她去往敵國(guó)和親匾旭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361