html的小项目,html+css常用小项目

html结构：

东邪

西毒

南乞

北丐

CSS代码：

.wrapper{

width:100px;

height:100px;

background:lightblue;

border-radius:50%;

border:2px solid lightgreen;

position: absolute;

top:200px;

left:400px;

cursor:pointer;

}

.wrapper:after{

content:‘你猜‘;

display:inline-block;

width:100px;

height:100px;

line-height:100px;

border-radius:50%;

text-align:center;

color:#fff;

font-size:24px;

}

.wrapper:hover .round{

-webkit-transform:scale(1);

opacity:1;

-webkit-animation:rotating 6s 1.2s linear infinite alternate;

}

@-webkit-keyframes rotating{

0%{

-webkit-transform:rotate(0deg);

}

100%{

-webkit-transform:rotate(180deg);

}

}

.round{

width:240px;

height:240px;

border:2px solid lightgreen;

border-radius:50%;

position: absolute;

top:-70px;

left:-70px;

-webkit-transition:all 1s;

-webkit-transform:scale(0.35);

opacity:0;

}

.round span{

width:40px;

height:40px;

line-height:40px;

display:inline-block;

border-radius:50%;

background:lightblue;

border:2px solid lightgreen;

color:#fff;

text-align:center;

position:absolute;

}

.round span:nth-child(1){

right:-22px;

top:50%;

margin-top:-22px;

}

.round span:nth-child(2){

left:-22px;

top:50%;

margin-top:-22px;

}

.round span:nth-child(3){

left:50%;

bottom:-22px;

margin-left:-22px;

}

.round span:nth-child(4){

left:50%;

top:-22px;

margin-left:-22px;

}

原文：https://www.cnblogs.com/weixin2623670713/p/13676103.html