css3 转动的cd

CSS3是CSS的升级版，它为网页设计师提供了更多的创意空间。其中之一就是可以使用CSS3来实现各种奇妙的效果，如旋转、变形、阴影等。

今天我们就来学习如何使用CSS3来制作一个转动的CD。

/* 首先，我们先定义一个含有影子的盒子，作为我们CD的背景 */.cd {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: #333;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}
/* 然后，我们来画CD上的刻痕 */.cd::before {
    content: ';
    width: 2px;
    height: 10px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
}
.cd::after {
    content: ';
    width: 10px;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
/* 接下来，我们来画CD上的唱片 */.disc {
    width: 60%;
    height: 60%;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8),0 0 10px rgba(0, 0, 0, 0.5);
    animation: rotate 5s linear infinite;
}
/* 最后，我们加上唱片的旋转动画 */@keyframes rotate {
from {
    transform: rotate(0);
}
to {
    transform: rotate(360deg);
}
}
    

完成了上述代码之后，我们就成功地制作出了一个可以旋转的CD。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！