圆形梅花图片旋转特效

 

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>梅花旋转特效</title>
        <link rel="stylesheet" type="text/css" href="css/万能css.css"/>
        <style type="text/css">
            body{overflow: hidden;}
            .box{width: 300px;
                height: 300px;
                margin: 300px auto;
                background: url(img/8.jpg) no-repeat;
                border-radius: 50%;
                transition: 1s;
                position: relative;
                transition: 3s;
                }
            .box:after{content: "";
                        display: block;
                        width: 260px;
                        height: 260px;
                        border: 20px solid #FF0000;
                        border-right-color: #1ad280;
                        border-bottom-color: #1ad280;
                        border-radius: 50%;
                        position: absolute;
                        top: 0;left: 0;
                        border-radius: 50%;
                        transition: 1s;}
            .box:hover .show{opacity: 1;
                            transition: 1s;}
            .box:hover:after{
                transform: rotate(180deg);
                            }
            .show{width: 300px;
                height: 300px;
                margin: 300px auto;
                background:rgba(250,250,250,0.5);
                border-radius: 50%;
                position: absolute;
                top: -300px;
                opacity: 0;
                }
                .one{font-size: 30px;
                text-align: center;
                padding-top: 40px;
                margin-left: 5px;
                }
                .two{text-align: center;
                    font-size:20px ;
                    width: 150px;
                    border-bottom: 1px solid black;
                    padding-bottom: 10px;
                    margin-left:70px ;
                    }
                .thr{font-size: 10px;
                    padding-top: 5px;
                    text-align: center;
                    width: 150px;
                    margin-left:70px;
                    margin-top: 20px;}
        </style>
    </head>
    <body>
        <div class="box">
                <div class="show">
                <p class="one">HEADING</p>
                <p class="two">HERE</p>
                <p class="thr">a href one two</p>
            </div>
        </div>
    </body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值