canvas+css等待動畫

阿新 • • 發佈：2018-12-29

使用canvas結合css實現動畫效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>circle</title>	
</head>
<style>
    body {
        background: #607d8b!important;
    }
    .ddd {
        position: fixed;
        width: 210px;
        height: 210px; 

        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
        background: #fff;
        padding: 20px;
        
    }
    #cca {
        animation: roll 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite; 

    }
    #ccb {
        animation: roll 3s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    }
    #cce {
        animation: roll 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
    }
    @keyframes roll {
        form {
            transform: rotateZ(0deg)
        }
        to {
            transform: 
 rotateZ(360deg)
        }
    }
    canvas {
        position: absolute;
        top: 20px;
        left: 20px;
    }
</style>
<body>
    <div class="ddd">
        <canvas width="210" height="210" id="ccb"></canvas>
        <canvas width="210" height="210" id="ccc"></canvas>
        <canvas width="210" height="210" id="cca"></canvas>
        <canvas width="210" height="210" id="ccd"></canvas>
        <canvas width="210" height="210" id="cce"></canvas>
        <canvas width="210" height="210" id="ccf"></canvas>
    </div>
</body>
<script>
       //最外層圓形
        var c1=document.getElementById("ccb");
        var ctx1=c1.getContext("2d");
        ctx1.beginPath();
        ctx1.lineWidth = 8;
        ctx1.strokeStyle = '#3af';
        ctx1.arc(105,105,100,0,1.2*Math.PI);
        ctx1.stroke();
        //最外層背景
        var c=document.getElementById("ccc");
        var ctx=c.getContext("2d");
        ctx.beginPath();
        ctx.lineWidth = 8;
        ctx.strokeStyle = 'rgba(0,0,0,.1)';
        ctx.arc(105,105,100,0,2*Math.PI);
        ctx.stroke();
        //中間圓形
        var c2=document.getElementById("cca");
        var ctx2=c2.getContext("2d");
        ctx2.beginPath();
        ctx2.lineWidth = 8;
        ctx2.strokeStyle = '#4CAF50';
        ctx2.arc(105,105,70,-0.5*Math.PI,Math.PI);
        ctx2.stroke();
        //中間背景
        var c3=document.getElementById("ccd");
        var ctx3=c3.getContext("2d");
        ctx3.beginPath();
        ctx3.lineWidth = 8;
        ctx3.strokeStyle = 'rgba(0,0,0,.1)';
        ctx3.arc(105,105,70,0,2*Math.PI);
        ctx3.stroke();
        //內層圓形
        var c4=document.getElementById("cce");
        var ctx4=c4.getContext("2d");
        ctx4.beginPath();
        ctx4.lineWidth = 8;
        ctx4.strokeStyle = '#673AB7';
        ctx4.arc(105,105,40,-1*Math.PI,-0.2*Math.PI);
        ctx4.stroke();
        //內層背景
        var c5=document.getElementById("ccf");
        var ctx5=c5.getContext("2d");
        ctx5.beginPath();
        ctx5.lineWidth = 8;
        ctx5.strokeStyle = 'rgba(0,0,0,.1)';
        ctx5.arc(105,105,40,0,2*Math.PI);
        ctx5.stroke();
</script>
</html>

實現效果

canvas+css等待動畫

使用canvas結合css實現動畫效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>circle</title> </head

canvas 之星空動畫

每次 context i++ math.sqrt 通過改變 size count 坐標最近看到位博主的博客背景圖很是炫酷，查找下資料了解是canvas實現效果，今天就來看看詳細解剖下吧。實現思路首先了解下canvas中的動畫原理？canvas中的動畫其實是通過不斷的

css簡單動畫

iter div cti 不重復 .cn 時間跟著移動路徑這幾天公司需要更新一個移動端web的頁面，因為任務簡單，就交給作為菜鳥新人的我來做。第一次接觸css還是在14年剛上大一的時候跟著html一起學習的，之後就再也沒有接觸過。所以只好一邊學習，一邊

canvas遊戲和動畫中的碰撞檢測

底部 bsp rect circle 進行 eight nbsp odi word 碰撞檢測關鍵步驟碰撞檢測需要處理經歷下面兩個關鍵的步驟：計算判斷兩個物體是否發生碰撞發生碰撞後，兩個物體的狀態和動畫效果的處理計算碰撞只要兩個物體相互接觸，它們就會發生碰撞

css樣式動畫

keyframes racket 5% -i 效果 css樣式得到 bsp bracket 1.當在 @keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：規定動畫的名稱規定動畫的時長

CSS 變形動畫水平，垂直翻轉元素

tex rspec ica top ane 發生偏移 spec span CSS3的2D變形屬性，scale：用來縮放元素（放大和縮小），translate:在屏幕上移動元素（上下左右），rotate:按照一定角度旋轉元素（單位為度），skew:沿X和Y軸對元素進行斜切，

HTML5 Canvas水波紋動畫特效

實用 containe tex settings dex apple IV vertical 動畫 HTML5的Canvas特性非常實用，我們不僅可以在Canvas畫布上繪制各種圖形，也可以制作絢麗的動畫，比如這次介紹的水波紋動畫特效。以前我們也分享過一款基於HTML5 W

css的動畫

nsh 定義下拉框 ddc 角度 100% 自定義屬性 size 開始 css的動畫是作用於div，給div加css動畫例如div旋轉動畫 css部分 .zhuan1{ /*動畫名字為轉1 0.3秒一次執行一次停止*/ animation:zhua

CSS3載入等待動畫（loading）

效果： CSS樣式表程式碼： #errmsg { color: #ff0000; text-align: center; margin: 0px auto; line-height: 30px; } #colorfulPulse { width

css 線條動畫

動畫的預覽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑鼠移入下劃線展開</titl

如何利用 CSS 的動畫原理，創作一個乒乓球對打動畫

效果預覽線上演示按下右側的“點選預覽”按鈕可以在當前頁面預覽，點選連結可以全屏預覽。 https://codepen.io/comehope/pen/rvgLzK 可互動視訊教程此視訊是可以互動的，你可以隨時暫停視訊，編輯視訊中的程式碼。請用 chrome, safari,

CSS 3動畫

　　CSS 3在原來的基礎上新增了變形和動畫相關的屬性，通過這些屬性可以實現以前需要大段JavaScript才能實現的功能。css 3的變形功能可以對HTML元素執行位移、旋轉、縮放、傾斜4種幾何變換，藉助於這幾種幾何變換，css 3提供了Transition動畫。Transition動畫可以控制HTML元素

canvas實現畫中畫動畫效果--網易娛樂年度盤點H5動畫解密

前言由於本人最近在做一些 growth hacking 的工作，業務上以後可能也會涉及去做一些能夠在朋友圈火爆分享的 H5 頁面，突然想到去年看到一個網易娛樂年度新聞盤點的 H5 頁面非常的新穎，採用畫中畫的形式依次串聯十多個手繪娛樂圖片，加上洗腦的“好運來”音樂，讓人有很大的分享的慾望。手機掃碼體驗

css載入動畫(三)

html程式碼: <div id="preloader_3"></div> css程式碼: #preloader_3 { position: relative; } #preloader_3:before { width: 20px; hei

css載入動畫(二)

htmll程式碼: <div id="preloader_1"> <span></span> <span></span> <span></span> <span></span>

css 載入動畫(一)

html程式碼: <section> <div class="loader loader-1"> <div class="loader-outter"></div> <div class="loader

CSS animation動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi

CSS-形變動畫表格

一.形變 /*1.形變參考點: 三軸交界點*/ transform-origin: x軸座標 y軸座標; /*2.旋轉 rotate deg*/ transform: rotate(720deg); /*偏移 translate px*/ transform: translate

[Swift通天遁地]一、超級工具-(11)使用EZLoadingActivity製作Loading載入等待動畫

本文將演示載入等待動畫的製作。首先確保在專案中已經安裝了所需的第三方庫。點選【Podfile】,檢視安裝配置檔案。 1 platform :ios, '8.0' 2 use_frameworks! 3 4 target 'DemoApp' do 5 source 'https

轉載一個 mui 等待動畫 mui.showLoading

寫在前面：好像mui目前dialog系列唯獨缺少showLoading載入框(載入中)元件，為了統一元件樣式和體驗，寫了這麼一個擴充套件外掛。 CSS和JS程式碼耦合性應該還是較低的，不妥之處歡迎指教！優點：可以同時相容Html5和plus，不必為不同環境單獨分別Loading元件。缺點：在頁

canvas+css等待動畫

使用canvas結合css實現動畫效果

相關推薦