首页 > Web开发 > 详细

html+css常用小项目

时间:2020-09-15 23:46:27      阅读:83      评论:0      收藏:0      [点我收藏+]

技术分享图片

html结构:

<div class="wrapper">

    <div class="round">

        <span>东邪</span>

        <span>西毒</span>

        <span>南乞</span>

        <span>北丐</span>

    </div>

</div>

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;

}

html+css常用小项目

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!