canvas+css等待动画

使用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实现动画效果

猜你喜欢
