CSS

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

大祥子
2021-05-16 / 1 评论 / 60 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月18日,已超过160天没有更新,若内容或图片失效,请留言反馈。

纯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>
0

评论 (1)

取消
  1. 头像
    游客
    Windows 10 · Google Chrome

    牛,个人觉得加了那个线性渐变,不太好看表情表情

    回复