CSS3實現滑鼠移至上方時邊框旋轉特效

最後更新：2018-03-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這次給大家帶來CSS3實現滑鼠移至上方時邊框旋轉特效，CSS3實現滑鼠移至上方時邊框旋轉特效的注意事項有哪些，下面就是實戰案例，一起來看一下。

純CSS3實現的滑鼠移至上方時邊框旋轉的效果：

實現代碼如下，代碼中注釋已經比較詳細，就不再多說了：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        body {            width: 40rem;            height: 30rem;            font-size: 62.50%;   /* 把body的字型設定為10px以方便使用rem時的計算 */        }        .container {            width: 100%;            height: 100%;            background: #0f0;            text-align: center;        }        /* 設定content元素的屬性 */        /* 此元素的寬和高必須相等，即設定border-radius: 50%;後應該是一個圓 */        /* 使用rem相對於body的字型尺寸設定了寬和高 */        .content {            display: inline-block;            margin-top: 5rem;            width: 20rem;            height: 20rem;            border: solid 15px rgba(255, 255, 255, 1);  /* 此處設定邊框，使用rgba的方式是為了後面隱藏時方便，只需要設定a的值為0即可隱藏 */            border-radius: 50%;            box-sizing: border-box;                     /* 使用此屬性防止邊框撐開盒子，border-box會讓邊框佔用盒子裡面的空間 */            transition: all 2s;                          /* 該元素的所有屬性的變化會在2s內完成 */        }        /* 使用偽類before設定需要轉動的邊框 */        /* 因為如果元素邊框轉動，內容也會跟著轉動 */        /* 此處要的效果是只有邊框轉動而內容不轉動 */        .content:before {            display: inline-block;            width: 100%;            height: 100%;            border-radius: 50%;            box-sizing: border-box;            content: '';        }        /* 設定滑鼠移至上方在content元素上時content屬性的變化 */        .content:hover {            /*border: solid 15px rgba(255, 255, 255, 0);*/        }        /* 設定滑鼠移至上方在content上時content的before偽類屬性的變化 */        .content:hover:before {            border: dashed 30px #fff;            animation: whirl 9s linear infinite;  /* 執行動畫whirl,執行一次的周期是9s,執行期間的速度曲線為linear,無限迴圈 */        }        /* 設定常值內容顯示的樣式 */        .con-text {            margin: -60% auto;            width: 80%;            font-size: 3rem;            /* 以下三個屬性為了讓文字超出寬度時顯示省略符號，必須同時使用才有效果 */            overflow: hidden;            white-space: nowrap;            text-overflow: ellipsis;        }        /* 動畫whirl,從0度旋轉到360度 */        @keyframes whirl {            from {                transform: rotate(0deg);            }            to {                transform: rotate(360deg);            }        }    </style></head><body>    <section class="container">        <p class="content" title="新年好新年好新年好">            <p class="con-text">新年好新年好新年好</p>        </p>    </section></body></html>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More