首頁 web前端 css教學 利用SVG和CSS3實現酷炫的邊框動畫

利用SVG和CSS3實現酷炫的邊框動畫

Jun 26, 2018 am 11:16 AM
css3 svg

這篇文章主要介紹了利用SVG和CSS3來實現一個酷炫的邊框動畫,不使用JavaScript使得編寫過程輕鬆了不少,需要的朋友可以參考下

今天我們來探索一下Carl Philipe Brenner的網站上一個微妙而有趣的動畫效果。當滑鼠經過網格元素時,會有一個微妙的動畫發生——網格元素變得透明,每條邊有個順時針的動畫,創造了非常好的效果。這種效果是透過JS給span標籤的寬或高做了動畫。我們待會會用SVG和CSS漸變來完成。注意,這個技術還是實驗性的。

首先,讓我們來看看基本的概念,然後我們會朝著這個方向努力。

請注意,我們將在SVG上使用CSS過渡,可能無法得到所有瀏覽器的支援。

乍看之下可能不明白這個效果是怎麼完成的。我們先仔細看看上面的邊就會發現,白色的邊的寬度不斷從右邊往左邊延伸,而一條稍微延時的邊緊跟著一起移動。每條邊都有這樣的做法。看起來就像上面的邊經過拐角移動到了左邊,並以此類推。

不用SVG也能完成這樣的效果,甚至只用偽元素。但是我們想探索一下怎麼用CSS而不是JavaScript來控制SVG。

現在,來思考一下要怎麼創造出這樣的效果。我們可以改變長方形的troke-dashoffset或直接畫線。我們嘗試不用JavaScript的解決方案。我們發現,CSS過渡stroke-dashoffset 和 stroke-dasharray的值會觸發很多BUG。所以我們要嘗試不同的解決方案,利用線條和它們的動畫,這在CSS裡很容易理解和實現。這也給我們更多機會去探索不同的動畫效果。

我們將要使用的線的特別之處是,它們在這個動畫裡將有三種狀態。它們是方盒邊長的三倍,其中中間一截是與邊等長的間隙。我們將透過設定stroke-dashoffset的值來實現與方盒的邊等長。現在,這個動畫實現的關鍵在於線的位置轉換:
2015722165434429.gif (600×369)

SVG與方盒大小一致,就不會看到超出虛線的部分。

我們先完成第一條線:

<p>   
    <svg width="200" height="200">   
        <line x1="0" y1="0" x2="600" y2="0" />   
    </svg>   
</p>
登入後複製

這個p長寬20px,和SVG一樣。將SVG位置設為absolute,線寬度為10,stroke-dasharray為200。

p {   
    width: 200px;   
    height: 200px;   
    position: relative;   
    overflow: hidden;   
    background: #ddd;   
}   
  
svg {   
    position: absolute;   
    top: 0;   
    left: 0;   
}   
  
svg line {   
    stroke-width: 10;   
    stroke: #000;   
    fill: none;   
    stroke-dasharray: 200;   
    -webkit-transition: -webkit-transform .6s ease-out;   
    transition: transform .6s ease-out;   
}   
  
p:hover svg line {   
    -webkit-transform: translateX(-400px);   
    transform: translateX(-400px);   
}
登入後複製

當數滑鼠懸浮在p上時,線也有一個過渡。我們要把線移到它的三分之二處,所以要在x軸上移到-400px處,你可以看看這個效果。因為translation不能在這裡用百分比做單位,所以用px。

接著加入其餘三條線,gif效果:
2015722165612818.gif (600×369)

#我們需要實現以下效果:線的第一部分移出方盒後,旁邊的線的最後一部分移動進來,,這將傳進直線在轉角處轉彎的假象,

來看看坐標系的定義:
2015722165651126.png (600×442)

左邊的線的坐標是( 0,200) 到(0,-400),底部的是(200,200) 到(-400,200),右邊的是right one (200,0) 到(200,600):

給每條線加上不同的hover效果:

p:hover svg line.top {   
  -webkit-transform: translateX(-400px);   
  transform: translateX(-400px);   
}   
  
p:hover svg line.bottombottom {   
  -webkit-transform: translateX(400px);   
  transform: translateX(400px);   
}   
  
p:hover svg line.left {   
  -webkit-transform: translateY(400px);   
  transform: translateY(400px);   
}   
  
p:hover svg line.rightright {   
  -webkit-transform: translateY(-400px);   
  transform: translateY(-400px);   
}
登入後複製

看看現在的效果。

現在方盒大小改為300 x 460,再給它添加一些內容:

<p class="box">   
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">   
        <line class="top" x1="0" y1="0" x2="900" y2="0"/>   
        <line class="left" x1="0" y1="460" x2="0" y2="-920"/>   
        <line class="bottom" x1="300" y1="460" x2="-600" y2="460"/>   
        <line class="right" x1="300" y1="0" x2="300" y2="1380"/>   
    </svg>   
    <h3>D</h3>   
    <span>2012</span>   
    <span>Broccoli, Asparagus, Curry</span>   
</p>
登入後複製

為了實現Carl Philipe Brenner的網站上的效果,我們還要添加顏色過渡效果、盒子陰影等:

.box {   
    width: 300px;   
    height: 460px;   
    position: relative;   
    background: rgba(255,255,255,1);   
    display: inline-block;   
    margin: 0 10px;   
    cursor: pointer;   
    color: #2c3e50;   
    box-shadow: inset 0 0 0 3px #2c3e50;   
    -webkit-transition: background 0.4s 0.5s;   
    transition: background 0.4s 0.5s;   
}   
  
.box:hover {   
    background: rgba(255,255,255,0);   
    -webkit-transition-delay: 0s;   
    transition-delay: 0s;   
}
登入後複製

為文字加上樣式:

.box h3 {   
    font-family: "Ruthie", cursive;   
    font-size: 180px;   
    line-height: 370px;   
    margin: 0;   
    font-weight: 400;   
    width: 100%;   
}   
  
.box span {   
    display: block;   
    font-weight: 400;   
    text-transform: uppercase;   
    letter-spacing: 1px;   
    font-size: 13px;   
    padding: 5px;   
}   
  
.box h3,   
.box span {   
    -webkit-transition: color 0.4s 0.5s;   
    transition: color 0.4s 0.5s;   
}   
  
.box:hover h3,   
.box:hover span {   
    color: #fff;   
    -webkit-transition-delay: 0s;   
    transition-delay: 0s;   
}
登入後複製

為SVG和線條新增樣式:

.box svg {   
    position: absolute;   
    top: 0;   
    left: 0;   
}   
  
.box svg line {   
    stroke-width: 3;   
    stroke: #ecf0f1;   
    fill: none;   
    -webkit-transition: all .8s ease-in-out;   
    transition: all .8s ease-in-out;   
}
登入後複製

給線的轉換加上延時:

.box:hover svg line {   
    -webkit-transition-delay: 0.1s;   
    transition-delay: 0.1s;   
}
登入後複製

之前我們定義的stroke-dasharray只有一個值,但是現在要因尺寸變化而修改

.box svg line.top,   
.box svg line.bottombottom {   
    stroke-dasharray: 330 240;    
}   
  
.box svg line.left,   
.box svg line.rightright {   
    stroke-dasharray: 490 400;   
}
登入後複製

如果你嘗試這些值,你就能看到這些線條不同的顯示效果。

最後,我們要個hover過渡設定對應的值。因為現在元素是300px寬,所以水平線改為900px,豎線同理改變:

.box:hover svg line.top {   
    -webkit-transform: translateX(-600px);   
    transform: translateX(-600px);   
}   
  
.box:hover svg line.bottombottom {   
    -webkit-transform: translateX(600px);   
    transform: translateX(600px);   
}   
  
.box:hover svg line.left {   
    -webkit-transform: translateY(920px);   
    transform: translateY(920px);   
}   
  
.box:hover svg line.rightright {   
    -webkit-transform: translateY(-920px);   
    transform: translateY(-920px);   
}
登入後複製

大功告成。希望能透過這些效果激發你的創意,實現更多的效果~

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

CSS實作文字環繞圖片的效果

#關於HTML5和CSS3實作時鐘的效果

利用CSS3製作的滑鼠懸停時邊框旋轉

以上是利用SVG和CSS3實現酷炫的邊框動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱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

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

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

純CSS3怎麼實現波浪效果? (程式碼範例) 純CSS3怎麼實現波浪效果? (程式碼範例) Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果?這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法,希望對大家有幫助!

巧用CSS實現各種奇形怪狀按鈕(附代碼) 巧用CSS實現各種奇形怪狀按鈕(附代碼) Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕,希望對大家有幫助!

聊聊如何利用 SVG 實現圖片馬賽克效果 聊聊如何利用 SVG 實現圖片馬賽克效果 Sep 01, 2022 am 11:05 AM

不借助 Javascript,如何利用 SVG 實現圖片馬賽克效果?下面這篇文章就來帶大家詳細了解一下,希望對大家有幫助!

css怎麼隱藏元素但不佔空間 css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法:1、利用display屬性,只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素,只需為元素加上「position:absolute;top:-9999px;」樣式。

css3怎麼實現花邊邊框 css3怎麼實現花邊邊框 Sep 16, 2022 pm 07:11 PM

在css中,可以利用border-image屬性來實作花邊邊框。 border-image屬性可以使用圖片來建立邊框,即給邊框加上背景圖片,只需要將背景圖片指定為花邊樣式即可;語法「border-image: url(圖片路徑) 向內偏移值圖像邊界寬度outset 是否重複;」。

svg怎麼轉jpg格式 svg怎麼轉jpg格式 Nov 24, 2023 am 09:50 AM

svg可以透過使用影像處理軟體、使用線上轉換工具和使用Python影像處理庫的方法來轉jpg格式。詳細介紹:1.影像處理軟體包括Adobe Illustrator、Inkscape和GIMP;2、線上轉換工具包括CloudConvert、Zamzar、Online Convert等;3、Python影像處理庫等等。

深入淺析vue3+vite中怎麼使用svg圖標 深入淺析vue3+vite中怎麼使用svg圖標 Apr 28, 2022 am 10:48 AM

svg圖片在專案中使用的非常廣泛,以下這篇文章帶大家介紹如何在vue3 + vite 中使用svg圖標,希望對大家有所幫助!

css3如何實現滑鼠點擊圖片放大 css3如何實現滑鼠點擊圖片放大 Apr 25, 2022 pm 04:52 PM

實作方法:1、使用「:active」選擇器選取滑鼠點擊圖片的狀態;2、使用transform屬性和scale()函數實現圖片放大效果,語法「img:active {transform: scale(x軸放大倍率,y軸放大倍率);}」。

See all articles