使用css3實現圓形從中心向四周擴散的動畫效果的代碼分享-css教學-PHP中文網

首頁

web前端

css教學

使用css3實現圓形從中心向四周擴散的動畫效果的代碼分享

黄舟

May 25, 2017 am 10:26 AM

先來個簡單的範例，例如：

@
key
frames hovertreemove
{
from {
top
:30px;}
to {top:130px;}
}

登入後複製

可以透過 @keyframes 規則，建立動畫。

創建動畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。
在動畫過程中，您能夠多次改變這套 CSS 樣式。
以百分比來規定改變發生的時間，或透過關鍵字 "from" 和 "to"，等價於 0% 和 100%。
0% 是動畫的開始時間，100% 動畫的結束時間。
為了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

以下為上下移動的程式碼：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3使用animation和@keyframes制作动画_何问起</title>
    <meta charset="utf-8" />
    <style>@keyframes hovertreemove{from {top:30px;}to {top:130px;}}
#hovertreekf{
    width:80px;height:80px;
    border:1px solid red;
    position:absolute;
    background:url(http://hovertree.com/themes/hvtimages/smile.png) no-repeat center;
    animation:hovertreemove /*动画样式名称*/
        1s /*动画时间*/
    linear /*线性运动*/
        infinite /*无限播放*/
        alternate/*往返动画*/;}
  a{color:blue;text-decoration:none;}  </style></head><body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明</a>
    <p id="hovertreekf"></p></body></html>

登入後複製

以下為圓形擴散運動的程式碼：

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>纯css3圆形从中心向四周扩散动画效果_何问起</title>
    <style>
        @keyframes warn {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.5;
            }

            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                opacity: 0.0;
            }
        }

        @keyframes warn1 {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.0;
            }
        }

        .container {
            position: relative;
            width: 40px;
            height: 40px;
            /*border: 1px solid #000; hovertree.com */
        }
        /* 保持大小不变的小圆圈 何问起 */
        .dot {
            position: absolute;
            width: 92px;
            height: 92px;
            left: 120px;
            top: 120px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: 2px solid red;
            border-radius: 50%;
            z-index: 2;
        }
        /* 产生动画（向外扩散变大）的圆圈  */
        .pulse {
            position: absolute;
            width: 320px;
            height: 320px;
            left: 2px;
            top: 2px;
            border: 6px solid red;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 2s ease-out;
            -moz-animation: warn 2s ease-out;
            animation: warn 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px red;
        }

        .pulse1 {
            position: absolute;
            width: 320px;
            height: 320px;
            left: 2px;
            top: 2px;
            border: 6px solid red;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn1 2s ease-out;
            -moz-animation: warn1 2s ease-out;
            animation: warn1 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px red;
        }a{color:blue;text-decoration:none;}
    </style></head><body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明</a>
    <p class="container">
        <p class="dot"></p>
        <p class="pulse"></p>
        <p class="pulse1"></p>
    </p></body></html>

登入後複製

以上是使用css3實現圓形從中心向四周擴散的動畫效果的代碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7545

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

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

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

ppt怎麼做圓形的圖片和文字 Mar 26, 2024 am 10:23 AM

首先，在 PPT 中繪製一個圓圈，然後插入一個文字框，輸入文字內容。最後，設定文字方塊的填滿和輪廓為無，即可完成圓形圖片和文字的製作。

ppt怎麼做圓形的圖片 Mar 25, 2024 pm 03:54 PM

ppt做圓形的圖片的方法：1、使用裁切功能；2、使用形狀工具；3、使用快捷鍵和控點調整。

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

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

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

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

圓扇形的面積是多少？ Aug 30, 2023 am 08:33 AM

圓扇形，也稱為圓扇區/圓的扇區，是由兩個半徑之間的弧線所圍成的圓的一部分。這個區域被兩個半徑和一個弧線所包圍。為了找出內切的面積，我們需要找出兩個半徑之間的角度。總面積等於360度的角度。為了求出一個角度的面積，我們將面積乘以θ/360。這給出了內切部分的面積。其中θ是兩個半徑之間的角度（以度為單位）。圓扇形的面積=π*r*r*(θ/360)。範例半徑為5，角度為60度的圓扇形的面積為13.083。面積=(3.14*5*5)*(60/360)=13.03範例程式碼演示#incl