.P1,.P2,.P3,.P4,.P5{
        padding: 0;
        margin: 0;
        text-shadow: 1px 1px 5px gainsboro;
       font-family: Microsoft YaHei; 
    }
    .R1{
        color: #7e8c8d;
        -webkit-transition: 1.5s;
        -moz-transition: 1.5s;
        transition: 1.5s;
        background-color: white;
        border-left: 1px solid #dedede;
        border-right: 1px solid #dedede;
        box-sizing: border-box;
        border-top: 1px solid #dedede;
        box-shadow: 0 0 20px  #dedede inset;
    }
    .R1:hover{
        -webkit-transform: rotate3d(0.5,0.5,0.5,360deg);
        -moz-transform: rotate3d(0.5,0.5,0.5,360deg);
        transform: rotate3d(0.5,0.5,0.5,360deg);
        box-shadow: 1px 1px 10px gray;
        -webkit-box-shadow: 1px 1px 10px gray;
        -moz-box-shadow: 1px 1px 10px gray;
        border: 1px solid gray;
    }
    .C1{
        border: 1px solid purple;
        width: 20px;
        height: 20px;
        margin-left: 7px;
        border-radius: 10px;
        animation: key 3s infinite;
        display: inline-block;
    }
    .C2{
        border: 1px solid #2aabd2;
        width: 15px;
        height: 15px;
        margin: 2px 2px;
        border-radius: 8px;
        animation: key 3s infinite;
        display: inline-block;
    }
    .C3{
        border: 1px solid olive;
        width: 10px;
        height: 10px;
        margin: 2px 2px;
        border-radius: 5px;
        animation: key 3s infinite;
        display: inline-block;
    }
    .C4{
        border: 2px solid black;
        width: 5px;
        height: 5px;
        margin: 12px 12px;
        border-radius: 3px;
        background-color: black;
        animation: key 3s infinite;
        display: inline-block;
    }
   @keyframes key {
        0%{
            transform: scale(0);
            opacity: 1;
        }
        100%{
            transform: scale(1);
            opacity: 0;
        }
    }