css播放cd的动画 |css中定位

缓慢显示 css，火狐CSS Usage下载，dw中css样式翻译，dw的div css布局，西瓜css3使用教程，css设两个动画，css中定位 css播放cd的动画 |css中定位

/* 定义播放CD的样式 */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.cd {
width: 200px;
height: 200px;
border-radius: 50%;
background: #b5d6ff;
animation: spin 2s linear infinite;
position: relative;
}
/* 定义CD上的曲目名称 */
.title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: bold;
color: #fff;
}

在代码中，大家使用了@keyframes规则来定义了一个名为spin的动画，使CD可以无限旋转。
在.cd类中，通过animation属性来应用了spin动画效果，使CD可以正常连续不断地旋转。同时使用了position属性，来使CD在页面中处于居中位置。

此外，大家还定义了一个.title类，用来在CD上显示曲目名称，使用了position和transform属性，使其能够居中。

使用以上代码，大家可以轻松地实现CD的动画效果。同时，大家还可以根据业务需求，修改样式来实现不同的动画效果。