before 演示

作者: Simon_s | 来源:发表于2016-09-27 19:59 被阅读7次

<!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>