before 演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before</title>

<style>

    #box{

        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: pink;
        margin: 100px auto;
        position: relative;
        animation: run 3s infinite;
    }
    
    #box:before{

        content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: black;
        position: absolute;
        left: 50%;
        margin-left: -5px;
        top: -5px;

    }
    
    @keyframes run {
        
        from{
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        
        to{
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

</style>

</head>
<body>

<div id="box">

</div>

</body>
</html>

最后编辑于：2017.12.04 04:26:38

before 演示

推荐阅读更多精彩内容