css圆圈旋转特效

css圆圈旋转特效


<html>

    <head>
        <meta charset="utf-8">
        <title>title>
        <style type="text/css">


            #loading{
                border-width: 4px;
                background: green;
                width: 40px;
                height: 40px;
                border-style: solid;
                border-color: #ccc #eee red blue;
                border-radius: 50%;
                -webkit-animation: "loading" 1s infinite linear;/***一秒循环执行**/      
        }
        @-webkit-keyframes "loading"{/**关键帧名称**/
                0%{-webkit-transform: rotate(0deg);}
                100%{-webkit-transform: rotate(360deg);}
        }

        style>
    head>

    <body>
        <div id="loading">div>
    body>

html>

效果: 顺时针旋转
这里写图片描述

你可能感兴趣的:(html/css)