css:animation@keyframes 实现 CD播放旋转效果

简介: css:animation@keyframes 实现 CD播放旋转效果

@keyframes 设置动画帧


1、from to 用于简单动画,只有起始帧和结束帧

2、百分比 用于复杂动画,动画不止两帧


<style>
        html,
        body {
            margin: 0;
            padding: 0;
        }
        body {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .cover-wrap {
            width: 200px;
            height: 200px;
            border: 40px solid #000000;
            border-radius: 50%;
            overflow: hidden;
        }
        @keyframes playmusic {
            /* 起始位置 */
            from {
                transform: rotate(0deg);
            }
            /* 结束位置 */
            to {
                transform: rotate(360deg);
            }
        }
        .cover {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 动画属性 */
            animation-name: playmusic;
            animation-duration: 4s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }
    </style>
    <div>animation@keyframes 实现 CD播放效果</div>
    <div class="cover-wrap">
        <img class="cover"
             src="https://api.isoyu.com/bing_images.php">
    </div>

在线Demo: animation-keyframes.html


参考

CSS3 @keyframes 规则

CSS3 animation(动画) 属性

相关文章
CSS3自动旋转正方体3D特效
CSS3自动旋转正方体3D特效
140 3
CSS3自动旋转正方体3D特效
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
155 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
225 1
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
277 0
|
前端开发 容器
CSS实现旋转圆角叠加样式,你学会了吗?
CSS实现旋转圆角叠加样式,你学会了吗?
130 0
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
258 2
CSS3电影播放倒计时读秒代码
CSS3电影播放倒计时读秒代码
100 2
CSS3电影播放倒计时读秒代码
|
前端开发
前端 CSS 经典:旋转边框效果
前端 CSS 经典:旋转边框效果
215 0
|
前端开发
css 动画播放暂停
css 动画播放暂停
133 0