css實現邊框動畫效果

Cc_2011 發布于2019-08-01 18:02 / 2434人閱讀

摘要：邊框循環動畫，頁面效果如下沿著邊框動畫的圖形使用，偽類寫的。具體代碼如下仔細看沿著邊框動畫的圖形，是有三個長方形組成的。根據以上設計思路，就很容易寫出邊框的另外三個動畫效果了。

最近寫了幾個頁面都用到css動畫，以及很多before,after偽類。在此記錄一下成果。
css邊框循環動畫，頁面效果如下：

1、沿著邊框動畫的圖形使用before，after偽類寫的。當時想用切圖來寫，后來考慮到優化，就用了css來寫。具體代碼如下：

i.border-right-animate{

        display: block;
        height: 35px;
        width: 5px;
        background: #0b82ce;
        color: #0b82ce;
        position: absolute;
        top: 150px;
        right: -3px;  
        -webkit-animation: borderMove 6s linear infinite;
        -o-animation: borderMove 6s linear infinite;
        animation: borderMove 6s linear infinite;        
}

i.border-right-animate:before{

    content: "";
    display: block;
    height: 40px;
    width: 7px;
    background: #0b82ce;
    color: #0b82ce;
    position: absolute;
    top: -40px;
    left: -1px;
}

i.border-right-animate:after{
    content: "";
    display: block;
    height: 20px;
    width: 2px;
    background: #0b82ce;
    color: #0b82ce;
    position: absolute;
    top: 30px;
    left: 1px;
}

仔細看沿著邊框動畫的圖形，是有三個長方形組成的。所以設計思路是，先寫出中間的那個長方形，即i標簽的樣式。再用before，after寫出兩邊的長方形。

動畫效果用的是css3的animation，我是在菜鳥教程網站上一邊看教程一邊做出的效果(http://www.runoob.com/css3/cs...;

我自己寫的keyframes如下:

keyframes borderMove {
0% {

right: -2px;
top: 40px;

}
25% {

right: -2px;
top: 25%;

}
50% {

right: -2px;
top: 50%;

}
75% {

right: -2px;
top: 75%;

}
100% {

top: calc(100% - 50px);
right: -2px;

}
}

@keyframes的作用是規定動畫的過程。我的設計思路就是剛開始圖形在右側邊框頂部，運行到一半時圖形就沿著邊框移動到右側邊框的中間。如此循環。。

根據以上設計思路，就很容易寫出邊框的另外三個動畫效果了。

云服務器 GPU云服務器邊框閃爍動畫點擊邊框效果js 浮動效果動畫翻轉動畫效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51541.html

css實現邊框動畫效果

摘要：邊框循環動畫，頁面效果如下沿著邊框動畫的圖形使用，偽類寫的。具體代碼如下仔細看沿著邊框動畫的圖形，是有三個長方形組成的。根據以上設計思路，就很容易寫出邊框的另外三個動畫效果了。最近寫了幾個頁面都用到css動畫，以及很多before,after偽類。在此記錄一下成果。css邊框循環動畫，頁面效果如下：showImg(https://segmentfault.com/img/bVYEN5...

Cc_2011 2019-08-29 13:49 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...

Jackwoo 2019-08-30 13:50 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...

Bryan 2019-08-21 17:13 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

摘要：簡單就意味著更快的開發速度，更小的維護成本，同時往往具有更好的體驗下面我介紹哪些或許你不知道小技巧。默認為，此時陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。暑假實習的時候帶我的師傅，告訴我要注重基礎，底層實現原理。才能在日新月異的技術行業站住腳跟，以不變應萬變，萬丈高樓平地起，所以我們應該不斷的去學習，去交流。...

fai1017 2019-08-01 17:51 評論0 收藏0
如何只用 CSS 完成漂亮的加載

摘要：為什么要做加載只想說本文最重要的是對偽元素的分享以及讀者對這些東西的真正掌握我并不是慫恿大家在每一個頁面的前面都去加一個酷炫的加載我是如何做的不同的頁面對加載的設計也就可能不同本文設計的加載適合大多數頁面并且本文假設讀者已經非常熟悉偽元素動 showImg(https://segmentfault.com/img/bVSJ0b?w=1920&h=600); 為什么要做加載只想說, 本...

Sanchi 2019-08-29 13:08 評論0 收藏0