CSS3實現預載動畫效果的幾種方法

最後更新：2018-06-20 來源：互聯網

上載者：User

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

本篇文章主要介紹了CSS3動畫：5種預載動畫效果執行個體，內容挺不錯的，現在分享給大家，也給大家做個參考。

實現的動畫效果：

預載動畫一：雙旋圈

在兩個不同方向旋轉的圓圈。我們對內圈的轉速定義了一個CSS代碼，即內圈比外圈的速率快2倍。

實現：

html代碼：

<body style="background: #ffb83c;">    <p id="preloader-1">        <span></span>        <span></span>    </p></body>

css代碼：

#preloader-1{    position: relative;}#preloader-1 span{    position: absolute;    border:8px solid #fff;    border-top:8px solid transparent;    border-radius: 999px;}#preloader-1 span:nth-child(1){    width:80px;    height: 80px;    animation: spin-1 2s infinite linear;}#preloader-1 span:nth-child(2){    top:20px;    left:20px;    width:40px;    height: 40px;    animation: spin-2 1s infinite linear;}@keyframes spin-1{    0%{transform: rotate(360deg); opacity: 1.0;}    50%{transform: rotate(180deg); opacity: 0.5;}    100%{transform: rotate(0deg);opacity: 0;}}@keyframes spin-2{    0%{transform: rotate(0deg); opacity: 0.5;}    50%{transform: rotate(180deg); opacity: 1;}    100%{transform: rotate(360deg);opacity: 0.5;}}

預載動畫二：交錯圈

兩個圓圈進行橫向交錯來回移動。每個圓圈都設定了單獨的反向移動動畫參數。

效果：

html代碼：

<body style="background: #4ad3b4;">    <p id="preloader-2">        <span></span>        <span></span>    </p></body>

css代碼：

#preloader-2{    position: relative;}#preloader-2 span{    position: absolute;    width:30px;    height: 30px;    background: #fff;    border-radius: 999px;}#preloader-2 span:nth-child(1){    animation: cross-1 1.5s infinite linear;}#preloader-2 span:nth-child(2){    animation: cross-2 1.5s infinite linear;}@keyframes cross-1{    0%{transform: translateX(0); opacity: 0.5;}    50%{transform: translateX(80px); opacity: 1;}    100%{transform: translateX(0);opacity: 0.5;}}@keyframes cross-2{    0%{transform: translateX(80px); opacity: 0.5;}    50%{transform: translateX(0); opacity: 1;}    100%{transform: translateX(80px);opacity: 0.5;}}

預載動畫三：旋轉圈

效果：

html代碼：

<body style="background: #ab69d9;">    <p id="preloader-3">        <span></span>    </p></body>

css代碼：

#preloader-3{    position: relative;    width:80px;    height: 80px;    border:4px solid rgba(255,255,255,.25);    border-radius: 999px;    }#preloader-3 span{    position: absolute;    width:80px;    height:80px;    border:4px solid transparent;    border-top:4px solid #fff;    border-radius: 999px;    top:-4px;    left:-4px;    animation: rotate 1s infinite linear;}@keyframes rotate{    0%{transform: rotate(0deg);}    100%{transform: rotate(360deg);}}

預載動畫四：跳動圈

這是一種墨西哥波浪紋的動畫效果，通過設定不同圓圈之間的延遲參數來實現。

效果：

html代碼：

<body style="background: #c1d64a;">    <p id="preloader-4">        <span></span>        <span></span>        <span></span>        <span></span>        <span></span>    </p></body>

css代碼：

#preloader-4{    position: relative;}#preloader-4 span{    position:absolute;    width:16px;    height: 16px;    border-radius: 999px;    background: #fff;    animation: bounce 1s infinite linear;}#preloader-4 span:nth-child(1){    left:0;    animation-delay: 0s;}#preloader-4 span:nth-child(2){    left:20px;    animation-delay: 0.25s;}#preloader-4 span:nth-child(3){    left:40px;    animation-delay: 0.5s;}#preloader-4 span:nth-child(4){    left:60px;    animation-delay: 0.75s;}#preloader-4 span:nth-child(5){    left:80px;    animation-delay: 1.0s;}@keyframes bounce{    0%{transform: translateY(0px);opacity: 0.5;}    50%{transform: translateY(-30px);opacity: 1.0;}    100%{transform: translateY(0px);opacity: 0.5;}}

預載動畫五：雷達圈

一種雷達輻射效果，給3個span elements設定相同的淡入淡出效果，再予每個稍微延遲下即可實現。

效果：

html代碼：

<body style="background: #f9553f;">    <p id="preloader-5">        <span></span>        <span></span>        <span></span>    </p></body>

css代碼：

#preloader-5{    position: relative;}#preloader-5 span{    position:absolute;    width:50px;    height: 50px;    border:5px solid #fff;    border-radius: 999px;    opacity: 0;    animation: radar 2s infinite linear;}#preloader-5 span:nth-child(1){    animation-delay: 0s;}#preloader-5 span:nth-child(2){        animation-delay: 0.66s;}#preloader-5 span:nth-child(3){    animation-delay: 1.33s;}@keyframes radar{    0%{transform: scale(0);opacity: 0;}    25%{transform: scale(0);opacity: 0.5;}    50%{transform: scale(1);opacity: 1.0;}    75%{transform: scale(1.5);opacity: 0.5;}    100%{transform: scale(2);opacity: 0;}}

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

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