css图片动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        *{
            margin:0;
            padding:0;
        }
        
        a:hover{
            text-decoration:none;
        }


        p{
            font-size:22px;
            font-weight:bold;
            color:#7d9098;
        }

        p b{
            color:#ffffff;
            display:inline-block;
            padding:5px 10px;
            background-color:#c4d7e0;
            border-radius:2px;
            text-transform:uppercase;
            font-size:18px;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .aa{
            margin-left: 1300px;
            width:300px;
            height:300px;
            border-radius: 50%;
            background: #333;
            font-size: 24px;
            color: #fff;
            text-align: center;
            line-height: 300px;
            position: relative;
        }
        .a1{
            width: 260px;
            height: 260px;
            position: absolute;
            margin-top: -300px;
            border-radius: 50%;
            background: url("picture/1.png");
            border: 20px solid rgba(255,255,255,0.5);
            transition: 1s;
            transform-origin: left center;
            color: deepskyblue;

        }
        div:hover .a1{
            transform: rotateY(180deg);
        }
        .p1{
            width: 300px;
            height: 300px;
            position: relative;
            background-color: #303030;
            border-radius: 50%;
            border: 1px solid;
            margin-top: -300px;
            margin-left: 700px;
            text-align: center;
            line-height: 300px;
            font-size: 24px;
            color: white;

        }
        .pp{
            width: 260px;
            height: 260px;
            position: absolute;
            margin-top: -300px;
            background: url("picture/6.jpg");
            border-radius: 50%;
            border: 20px solid rgba(255,255,255,0.5);
            transition: 1s;
            transform-origin: right center;
            text-align: center;
            color: #303030;
            font-size: 32px;

        }
        span{
            width: 20px;
            height: 20px;
            display: block;
            border-radius: 50%;
            background: #f00;
            position: absolute;
            margin-left: 280px;
            margin-top:-150px;
        }
        div:hover .pp{
            transform: rotate(-90deg);
        }
        .dd{
            width: 300px;
            height: 300px;
            position: relative;
            background-color: #303030;
            line-height: 300px;
            border-radius: 50%;
            margin-top: -300px;
            margin-left: 100px;
            transition: 1s;


        }
        .d1{
            width: 260px;
            height: 260px;
            position: absolute;
            background: url("picture/11.jpg");
            line-height: 300px;
            border-radius: 50%;
            border: 20px solid rgba(255,255,255,0.3);
            transition: 1s;
            z-index: 1;
        }
        div:hover .d1{
            transform: scale(0,0) rotate(360deg);

        }
        div:hover .dd{
            transform: scale(1,1) rotate(360deg);
        }



    </style>

</head>
<body>



<div class="aa">你被骗了.哈哈
    <p class="a1">有本事来戳我啊</p>
</div>
<div class="p1">哈哈
    <p class="pp">？</p>
    <span></span>
</div>
<div class="dd">
    <p class="d1"></p>
</div>

</body>
</html>
第一个图
类型:某个图旋转缩小
css图片动画
第二个图
类型：绕某个点立体旋转180度
css图片动画
第三个图
类型：绕某个点旋转180度
相关推荐
