搜尋
首頁web前端css教學酷炫的 CSS 邊框動畫,快來收藏吧!

這篇文章跟大家分享多個使用css實現的酷邊框動畫。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

酷炫的 CSS 邊框動畫,快來收藏吧!

【推薦教學:CSS影片教學

今天看到這樣一個介面,非常有趣:

酷炫的 CSS 邊框動畫,快來收藏吧!

覺得它的風格很獨特,尤其是其中一些邊框。

嘿嘿,所以來一篇邊框特輯,看看運用 CSS,可以在邊框上整些什麼花樣。

border 屬性

談到邊框,首先會想到border,我們最常用的莫過於soliddashed ,上圖便出現了dashed

除了最常見的soliddashed,CSS border 還支援nonehiddendotted doublegrooveridgeinsetoutset 等樣式。除去nonehidden,看看所有原生支援的border 的樣式:

酷炫的 CSS 邊框動畫,快來收藏吧!

基礎的就這些,如果希望實現一個其他樣式的邊框,或是為邊框加上動畫,那就需要配合一些其他屬性,或是腦洞大開。 OK,一起來看看一些額外的有趣的邊框。

邊框長度變化

先來個比較簡單的,實作一個類似這樣的邊框效果:

這裡其實是藉用了元素的兩個偽元素。兩個偽元素分別只設定上、左邊框,下、右邊框,透過 hover 時改變兩個偽元素的高寬即可。非常好理解。

div {position: relative;border: 1px solid #03A9F3;&::before,&::after {content: "";position: absolute;width: 20px;height: 20px;}&::before {top: -5px;left: -5px;border-top: 1px solid var(--borderColor);border-left: 1px solid var(--borderColor);}&::after {right: -5px;bottom: -5px;border-bottom: 1px solid var(--borderColor);border-right: 1px solid var(--borderColor);}&:hover::before,&:hover::after {width: calc(100% + 9px);height: calc(100% + 9px);}}复制代码

CodePen Demo -- width border animation

接下來,會開始加深一些難度。

虛線邊框動畫

使用 dashed 關鍵字,可以方便的建立虛線邊框。

div {border: 1px dashed #333;}复制代码

當然,我們的目的是讓邊框能夠動起來。使用 dashed 關鍵字是沒有辦法的。但實現虛線的方式在CSS 中有很多種,譬如漸變就是一種很好的方式:

div {background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;background-size: 4px 1px;background-position: 0 0;}复制代码

看看,使用漸變模擬的虛線如下:

好,漸變支援多重漸變,我們把容器的4 個邊都用漸變表示即可:

div {background:linear-gradient(90deg, #333 50%, transparent 0) repeat-x,linear-gradient(90deg, #333 50%, transparent 0) repeat-x,linear-gradient(0deg, #333 50%, transparent 0) repeat-y,linear-gradient(0deg, #333 50%, transparent 0) repeat-y;background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;background-position: 0 0, 0 100%, 0 0, 100% 0;}复制代码

效果如下:

## OK,至此,我們的虛線邊框動畫其實算完成了一大半了。雖然

border-style: dashed 不支援動畫,但漸層支持呀。我們給上述div 再加上一個hover 效果,hover 的時候新增一個animation 動畫,改變元素的background-position即可。

div:hover {animation: linearGradientMove .3s infinite linear;}@keyframes linearGradientMove {100% {background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;}}复制代码
OK,看看效果,hover 上去的時候,邊框就能

動起來,因為整個動畫是首尾相連的,無限循環的動畫看起來就像是虛線邊框在一直運動,這算是一個小小的障眼法或小技巧:

這裡還有另外一個小技巧,如果我們希望虛線邊框動畫是從其他邊框,過渡到虛線邊框,再行進動畫。完全由漸變來模擬也是可以的,如果想節省一些程式碼,使用

border 會更快一些,譬如這樣:

div {border: 1px solid #333;&:hover {border: none;background:linear-gradient(90deg, #333 50%, transparent 0) repeat-x,linear-gradient(90deg, #333 50%, transparent 0) repeat-x,linear-gradient(0deg, #333 50%, transparent 0) repeat-y,linear-gradient(0deg, #333 50%, transparent 0) repeat-y;background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;background-position: 0 0, 0 100%, 0 0, 100% 0;}}复制代码
由於border 和background 在盒子模型上位置的差異,視覺上會有一個很明顯的錯位的感覺:

#

要想解决这个问题,我们可以把 border 替换成 outline,因为 outline 可以设置 outline-offset。便能完美解决这个问题:

div {outline: 1px solid #333;outline-offset: -1px;&:hover {outline: none;}}复制代码

最后看看运用到实际按钮上的效果:

上述 Demo 完整代码如下:

CodePen Demo -- dashed border animation

其实由于背景和边框的特殊关系,使用 border 的时候,通过修改 background-position 也是可以解决的,就是比较绕。关于背景和边框的填充关系,可以看这篇文章:条纹边框的多种实现方式

渐变的其他妙用

利用渐变,不仅仅只是能完成上述的效果。

我们继续深挖渐变,利用渐变实现这样一个背景:

div {position: relative;&::after {content: '';position: absolute;left: -50%;top: -50%;width: 200%;height: 200%;background-repeat: no-repeat;background-size: 50% 50%, 50% 50%;background-position: 0 0, 100% 0, 100% 100%, 0 100%;background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);}}复制代码

注意,这里运用了元素的伪元素生成的这个图形,并且,宽高都是父元素的 200%,超出则 overflow: hidden

接下来,给它加上旋转:

div {animation: rotate 4s linear infinite;}@keyframes rotate {	100% {transform: rotate(1turn);	}}复制代码

看看效果:

最后,再利用一个伪元素,将中间遮罩起来,一个 Nice 的边框动画就出来了 (动画会出现半透明元素,方便示意看懂原理):

上述 Demo 完整代码如下,这个效果我最早见于这位作者 -- Jesse B

CodePen Demo -- gradient border animation

改变渐变的颜色

掌握了上述的基本技巧之后,我们可以再对渐变的颜色做一些调整,我们将 4 种颜色变成 1 种颜色:

div::after {content: '';position: absolute;left: -50%;top: -50%;width: 200%;height: 200%;background-color: #fff;background-repeat: no-repeat;background-size: 50% 50%;background-position: 0 0;background-image: linear-gradient(#399953, #399953);}复制代码

得到这样一个图形:

同样的,让它旋转一起,一个单色追逐的边框动画就出来了:

CodePen Demo -- gradient border animation 2

Wow,很不错的样子。不过如果是单线条,有个很明显的缺陷,就是边框的末尾是一个小三角而不是垂直的,可能有些场景不适用或者 PM 接受不了。

那有没有什么办法能够消除掉这些小三角呢?有的,在下文中我们再介绍一种方法,利用 clip-path ,消除掉这些小三角。

conic-gradient 的妙用

再介绍 clip-path 之前,先讲讲角向渐变。

上述主要用到了的是线性渐变 linear-gradient 。我们使用角向渐变 conic-gradient 其实完全也可以实现一模一样的效果。

我们试着使用 conic-gradient 也实现一次,这次换一种暗黑风格。核心代码如下:

.conic {position: relative;	&::before {content: '';position: absolute;left: -50%;top: -50%;width: 200%;height: 200%;background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);animation: rotate 4s linear infinite;	}}@keyframes rotate {	100% {transform: rotate(1turn);	}}复制代码

效果图和示意图如下,旋转一个部分角向渐变的图形,中间的部分使用另外一个伪元素进行遮罩,只漏出线条部分即可:

CodePen Demo -- Rotating border 3

clip-path 的妙用

又是老朋友 clip-path,有意思的事情它总不会缺席。

clip-path 本身是可以进行坐标点的动画的,从一个裁剪形状变换到另外一个裁剪形状。

利用这个特点,我们可以巧妙的实现这样一种 border 跟随效果。伪代码如下:

div {position: relative;&::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;border: 2px solid gold;animation: clippath 3s infinite linear;}}@keyframes clippath {0%,100% {clip-path: inset(0 0 95% 0);}25% {clip-path: inset(0 95% 0 0);}50% {clip-path: inset(95% 0 0 0);}75% {clip-path: inset(0 0 0 95%);}}复制代码

效果图与示意图一起:

CodePen - clip-path border animation

这里,因为会裁剪元素,借用伪元素作为背景进行裁剪并动画即可,使用 clip-path 的优点了,切割出来的边框不会产生小三角。同时,这种方法,也是支持圆角 border-radius 的。

如果我们把另外一个伪元素也用上,实际实现一个按钮样式,可以得到这样的效果:

酷炫的 CSS 邊框動畫,快來收藏吧!

CodePen - clip-path border animation 2

overflow 的妙用

下面这个技巧利用 overflow 实现。实现这样一个边框动画:

为何说是利用 overflow 实现?

贴个示意图:

CodePen Demo -- 巧用overflow及transform实现线条hover效果

两个核心点:

  1. 我们利用 overflow: hidden,把原本在容器外的一整个元素隐藏了起来
  2. 利用了 transform-origin,控制了元素的旋转中心

发现没,其实几乎大部分的有意思的 CSS 效果,都是运用了类似技巧:

简单的说就是,我们看到的动画只是原本现象的一小部分,通过特定的裁剪、透明度的变化、遮罩等,让我们最后只看到了原本现象的一部分。

border-image 的妙用

利用 border-image,我们也可以实现一些有意思的边框动画。关于 border-image,有一篇非常好的讲解文章 -- border-image 的正确用法,本文不对基本定义做过多的讲解。

如果我们有这样一张图:

便可以利用 border-image-sliceborder-image-repeat 的特性,得到类似的边框图案:

div {width: 200px;height: 120px;border: 24px solid;border-image: url(image-url);border-image-slice: 32;border-image-repeat: round;}复制代码

在这个基础上,可以随便改变元素的高宽,如此便能扩展到任意大小的容器边框中:

CodePen Demo -- border-image Demo

接着,在这篇文章 -- How to Animate a SVG with border-image 中,还讲解了一种利用 border-image 的边框动画,非常的酷炫。

与上面例子不一样的是,我们只需要让我们的图案,动起来,就是我们需要这样一个背景图(掘金不支持 SVG 动图,原图地址):

那么,我们也就能得到运动的边框图,代码完全一样,但是,边框是运动的:

CodePen Demo -- Dancing Skull Border

border-image 使用渐变

border-image 除了贴图引用 url 之外,也是可以直接填充颜色或者是渐变的。

之前也有一篇关于 border-image 的文章 -- 巧妙实现带圆角的渐变边框

我们可以利用 border-image + filter + clip-path 实现渐变变换的圆角边框:

.border-image-clip-path {width: 200px;height: 100px;border: 10px solid;border-image: linear-gradient(45deg, gold, deeppink) 1;clip-path: inset(0px round 10px);animation: huerotate 6s infinite linear;filter: hue-rotate(360deg);}@keyframes huerotate {0% {filter: hue-rotate(0deg);}100% {filter: hue-rotate(360deg);}}复制代码

CodePen Demo -- clip-path、border-image 加 filter 实现圆角渐变边框

更多编程相关知识,请访问:编程视频!!

以上是酷炫的 CSS 邊框動畫,快來收藏吧!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:博客园。如有侵權,請聯絡admin@php.cn刪除
光標的下一個CSS樣式光標的下一個CSS樣式Apr 23, 2025 am 11:04 AM

具有CSS的自定義光標很棒,但是我們可以將JavaScript提升到一個新的水平。使用JavaScript,我們可以在光標狀態之間過渡,將動態文本放置在光標中,應用複雜的動畫並應用過濾器。

世界碰撞:使用樣式查詢的鑰匙幀碰撞檢測世界碰撞:使用樣式查詢的鑰匙幀碰撞檢測Apr 23, 2025 am 10:42 AM

互動CSS動畫和元素相互啟動的元素在2025年似乎更合理。雖然不需要在CSS中實施乒乓球,但CSS的靈活性和力量的增加,可以懷疑Lee&Aver Lee有一天會成為一種

使用CSS背景過濾器進行UI效果使用CSS背景過濾器進行UI效果Apr 23, 2025 am 10:20 AM

有關利用CSS背景濾波器屬性來樣式用戶界面的提示和技巧。您將學習如何在多個元素之間進行背景過濾器,並將它們與其他CSS圖形效果集成在一起以創建精心設計的設計。

微笑嗎?微笑嗎?Apr 23, 2025 am 09:57 AM

好吧,事實證明,SVG的內置動畫功能從未按計劃進行棄用。當然,CSS和JavaScript具有承載負載的能力,但是很高興知道Smil並沒有像以前那樣死在水中

'漂亮”在情人眼中'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的,讓#039;跳上文字包裝:Safari Technology Preview In Pretty Landing!但是請注意,它與在鉻瀏覽器中的工作方式不同。

CSS-tricks編年史XLIIICSS-tricks編年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了,重點介紹了年鑑,最近的播客出現,新的CSS計數器指南以及增加了幾位新作者,這些新作者貢獻了有價值的內容。

tailwind的@Apply功能比聽起來更好tailwind的@Apply功能比聽起來更好Apr 23, 2025 am 09:23 AM

在大多數情況下,人們展示了@Apply的@Apply功能,其中包括Tailwind的單個property實用程序之一(會改變單個CSS聲明)。當以這種方式展示時,@Apply聽起來似乎很有希望。如此明顯

感覺就像我沒有釋放:走向理智的旅程感覺就像我沒有釋放:走向理智的旅程Apr 23, 2025 am 09:19 AM

像白痴一樣部署的部署歸結為您部署的工具與降低複雜性與添加的複雜性之間的獎勵之間的不匹配。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。