2023年6月21日发(作者：)

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;}

2023年6月21日发(作者：)

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;}