html设置动态效果,css3的transform设置动态效果

css3 Hover

.demo,.img,.border,.mask{

width: 300px;

height: 300px;

}

.demo{

display: block;

position: relative;

margin:50px auto;

}

.img{

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

border-radius: 50%;

}

.border{

position: absolute;

border: 10px solid #072256;

border-left-color:#E07514;

border-top-color:#E07514;

top: 0;

left: 0;

border-radius: 50%;

-webkit-transition:all .5s ease-in;

transition:all .5s ease-in;

-webkit-box-sizing:border-box;

box-sizing:border-box;

}

.mask{

position: absolute;

top: 0;

left: 0;

border-radius: 50%;

-webkit-transition:all .5s ease-in;

transition:all .5s ease-in;

color:rgba(255,255,255,0);

}

.demo:hover .mask{

background-color:rgba(0,0,0,0.5);

color:rgba(255,255,255,1);

}

.demo:hover .border{

-webkit-transform:rotate(180deg);

transform:rotate(180deg);

}

.info{

position: absolute;

width: 100%;

top: 50%;

left: 0;

text-align: center;

-webkit-transform:translateY(-50%);

}

BEATIFUL DAY

Description goes here