纯CSS实现类似于唱片的效果

大祥子

2021-05-16 / 1 评论 / 1,107 阅读 / 正在检测是否收录...

05/16

温馨提示：

本文最后更新于2021年05月18日，已超过1282天没有更新，若内容或图片失效，请留言反馈。

纯CSS实现类似于唱片的效果，如下：

纯CSS实现类似于唱片的效果

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>纯CSS实现类似于唱片的效果</title>
    <meta charset="utf-8">
</head>
<style type="text/css">
    .main-circle{
        width: 200px;
        height: 200px;
        /*定义动画效果，对应的"infinite",动画无限次播放，对应的"linear",动画从头到尾的速度是相同的。*/
        animation: circle 6s infinite linear;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
        /*重复径向渐变 从中心开始沿着四周产生渐变效果，模拟出唱片那种感觉，不喜欢可以注释或删掉*/
        background: repeating-radial-gradient(#111 0%, #000 5%);
    }
    .circle{
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        border-radius: 100%;
        background-color: red;
        /*看不出旋转效果，所以使用图片*/
        background-image: url('https://p6.qhimg.com/bdr/__85/t01855d063269cef1fe.jpg');
        background-size: cover;
    }
    /*白色圆心，不需要可以直接删除，或者把背景色删掉或改为透明*/
    .circle-heart{
        width: 40px;
        height: 40px;
        margin: 0 auto;
        border-radius: 100%;
        background-color: #FFF;
    }
    @keyframes circle{
        0%{
            /*transform对元素进行旋转、缩放、移动或倾斜。以下就是旋转0度。*/
            transform: rotate(0deg);
        }
        100%{
            /*以下就是旋转360度*/
            transform: rotate(360deg);
        }
    }
</style>
<body>
    <div style="width:500px;height:500px;margin: 0 auto;">
        <div class="main-circle">
            <div class="circle">
                <div class="circle-heart"></div>
            </div>
        </div>        
    </div>
</body>
</html>

纯CSS实现类似于唱片的效果

评论 (1)