css3动画应用-音乐唱片旋转播放特效

核心点：

　　1、设置图片为圆形居中，使图片一直不停旋转。

　　2、文字标题（潘玮柏--反转地球）一直从左到右不停循环移动。

　　3、点击图标，音乐暂停，图片停止旋转；点击图片，音乐播放，图片开始旋转。

1、动设置图片为圆形居中，使图片一直不停旋转。

核心代码：

#xuanzhuan{

    -webkit-animation: play 10s linear infinite;

       -moz-animation: play 10s linear infinite;

            animation: play 10s linear infinite;

}

@-webkit-keyframes play{

    0%{-webkit-transform: rotate(0deg);}

    100%{transform: rotate(360deg);}

}

@-moz-keyframes play {

    0%{-moz-transform: rotate(0deg);}

    100%{transform: rotate(360deg);}

}

@keyframes play{

    0%{transform: rotate(0deg);}

    100%{transform: rotate(360deg);}

}

2、文字标题（潘玮柏--反转地球）一直从左到右不停循环移动。

核心代码：

.title p{

    position: relative;

    top: 0px;

    left: 0px;

    right: 0px;

    margin: auto;

    text-align: center;

    -webkit-animation: anim2 8s linear infinite;

}

@-webkit-keyframes anim2 {

    0% { left: 200px; opacity: 0.2}

    25% { left: 100px; opacity: 0.6}

    50% { left: 0px; opacity: 1}

    75% { left: -100px; opacity: 0.6}

    100% { left: -200px; opacity: 0.2}

}

3、点击图标，音乐暂停，图片停止旋转；点击图片，音乐播放，图片开始旋转。

核心代码：

     //当音乐播放完停止时，自动停止图片旋转

    audio.addEventListener("ended",function(event){

        //xuanzhuan.setAttribute("id","");

        xuanzhuan.style.animationPlayState = "paused";

    },false);

    //点击暂停播放时，音乐暂停，图片停止旋转

    icon1.onclick=function(){

        audio.pause();

        pic1.style.display="none";

        pic2.style.display = "block";

        //xuanzhuan.setAttribute("id","");

        xuanzhuan.style.animationPlayState = "paused";

    };

    //点击播放音乐时，音乐开始播放，图片开始旋转

    icon2.onclick=function(){

        audio.play();

        pic1.style.display="block";

        pic2.style.display = "none";

        //xuanzhuan.setAttribute("id","xuanzhuan");

        xuanzhuan.style.animationPlayState = "running";

    }

实例：

<!doctype html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>rotate音乐唱片旋转特效</title>

    <link rel="stylesheet" href="./newStyle.css">

    <script type="text/javascript" src="./myjs.js"></script>

</head>

<body>

    <div class="box">

        <div class="title">

            <p>潘玮柏--反转地球</p>

        </div>

        <img class="play" id="xuanzhuan" src="./feel.jpg" alt="旋转特效">

        <div class="big"></div>

        <div class="middle"></div>

        <div class="small">

            <div id="pic1">

                <img id="icon1" src="./play.jpg" alt="play">

            </div>

            <div id="pic2">

                <img id="icon2" src="./play.jpg" alt="play">

            </div>

        </div>

        <audio autoplay="true"  loop="loop">

            <source src="./潘玮柏-反转地球.mp3" type="audio/mpeg">

        </audio>

        <div class="content">

            <p>反转地球</p>

            <p>演唱：潘玮柏</p>

            <p>Bow bow bow</p>

            <p>让我看到你双手</p>

            <p>对抗地心引力一起反转地球</p>

            <p>Bow bow bow</p>

            <p>现在不适合罗嗦</p>

            <p> 适者生存不然请你离开这节奏</p>

            <p> Bow bow bow</p>

            <p> 让我看到你点头</p>

            <p> 跟着我的音乐一起跳舞准没错</p>

            <p> Bow bow bow</p>

            <p> 现在不适合闪躲</p>

            <p> 正面出击看我怎么反转地球</p>

            <p> 睁开双眼看穿地球</p>

            <p> 赤裸的一片天空</p>

            <p> 我摊开双手接受所有最原始的节奏</p>

            <p> 有没有感到心情放松</p>

            <p> 有没有感到细胞跳动</p>

            <p> 节奏的变化,身体的摆动</p>

            <p> 让你全身放松</p>

            <p> 现在起不能罗嗦</p>

            <p> 踏进我的领域之中</p>

            <p> 频率太震撼</p>

            <p> 你的心脏正在此起彼落</p>

            <p> 跟着我走跟着我做跟我点头摆动双手</p>

            <p> 世界的一切的转动连结到我的音乐紧跟着我的脚步在走</p>

            <p> 让世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>

            <p> 别想压抑我们定意世界的传统</p>

            <p> 让世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>

            <p> 没有对或错我只想潜入这节奏</p>

            <p> 让世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>

            <p> 音乐没有自由仿佛坠进了黑洞</p>

            <p> 让世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>

            <p> 现在跟着我们创造新世纪的秩序</p>

            <p> Bow bow bow</p>

            <p> 让我看到你双手</p>

            <p> 对抗地心引力一起反转地球</p>

            <p> Bow bow bow</p>

            <p> 现在不适合罗嗦</p>

            <p> 适者生存不然请你离开这节奏</p>

            <p> Bow bow bow</p>

            <p> 让我看到你点头</p>

            <p> 跟着我的音乐一起跳舞准没错</p>

            <p> Bow bow bow</p>

            <p> 现在不适合闪躲</p>

            <p> 正面出击看我怎么反转地球</p>

            <p> 一道音波划破天空</p>

            <p> 在我的领域不停播送</p>

            <p> 激发出的热情不能抵挡你竖起的耳朵的诱惑</p>

            <p> 你停不停你动不动全部在我掌控之中</p>

            <p> 你知不知道地心引力在这永远拉不住我</p>

            <p> 当音乐力量合二为一创造出新的世界秩序</p>

            <p> 不跟随的人闭上你的....SHHH</p>

            <p> 有别的比那更好的吗</p>

            <p> 有别的比那更出色吗</p>

            <p> 有别的比我们向往追求的音乐更独特的吗</p>

            <p> 让世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>

            <p> 别想压抑我们定意世界的传统</p>

            <p> 让世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>

            <p> 没有对或错我只想潜入这节奏</p>

            <p> 让世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>

            <p> 音乐没有自由仿佛坠进了黑洞</p>

            <p> 让世界TURN AROUND DANCE AROUND EVERYBODY HAVE SOME FUN</p>

            <p> 现在跟着我们创造新世纪的秩序</p>

            <p> Bow bow bow</p>

            <p> 让我看到你双手</p>

            <p> 对抗地心引力一起反转地球</p>

            <p> Bow bow bow</p>

            <p> 现在不适合罗嗦</p>

            <p> 适者生存不然请你离开这节奏</p>

            <p> Bow bow bow</p>

            <p> 让我看到你点头</p>

            <p> 跟着我的音乐一起跳舞准没错</p>

            <p> Bow bow bow</p>

            <p> 现在不适合闪躲</p>

            <p> 正面出击看我怎么反转地球</p>

            <p> Bow bow bow</p>

            <p> 让我看到你双手</p>

            <p> 对抗地心引力一起反转地球</p>

            <p> Bow bow bow</p>

            <p> 现在不适合罗嗦</p>

            <p> 适者生存不然请你离开这节奏</p>

            <p> Bow bow bow</p>

            <p> 让我看到你点头</p>

            <p> 跟着我的音乐一起跳舞准没错</p>

            <p> Bow bow bow</p>

            <p> 现在不适合闪躲</p>

            <p> 正面出击看我怎么反转地球</p>

        </div>

    </div>

</body>

</html>

html Code

*{

    margin: 0px;

    padding: 0px;

    font-family: "微软雅黑";

    font-size: 14px;

}

body{

    background-color: black;

}

.box{

    width: 340px;

    height: 600px;

    position: relative;

    top: 30px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    margin: 0 auto;

    border-radius: 10px;

    background-color: #4372ca;

    /*opacity: 0.6;*/

}

.play{

    width: 280px;

    height: 280px;

    border-radius: 50%;

    overflow: hidden;

    position: absolute;

    top: 80px;

    left: 0px;

    right: 0px;

    bottom: 0px;

    margin: 0 auto;

    box-shadow: 0 0 5px 2px #000;

}

#xuanzhuan{

    -webkit-animation: play 10s linear infinite;

       -moz-animation: play 10s linear infinite;

            animation: play 10s linear infinite;

}

@-webkit-keyframes play{

    0%{-webkit-transform: rotate(0deg);}

    100%{transform: rotate(360deg);}

}

@-moz-keyframes play {

    0%{-moz-transform: rotate(0deg);}

    100%{transform: rotate(360deg);}

}

@keyframes play{

    0%{transform: rotate(0deg);}

    100%{transform: rotate(360deg);}

}

.big{

    width: 60px;

    height: 60px;

    border-radius: 50%;

    position: absolute;

    top: 32%;

    left: 0px;

    right: 0px;

    margin: auto;

    background-color: black;

    z-index: 2;

}

.middle{

    width: 50px;

    height: 50px;

    border-radius: 50%;

    position: absolute;

    top: 197px;

    left: 0px;

    right: 0px;

    margin: auto;

    background-color: white;

    z-index: 3;

}

.small{

    width: 40px;

    height: 40px;

    border-radius: 50%;

    position: absolute;

    top: 202px;

    left: 0px;

    right: 0px;

    margin: auto;

    background-color: black;

    z-index: 4;

    overflow: hidden;

    box-shadow: 0 0 3px 3px #000000;

}

.title{

    width: 60%;

    height: 5%;

    position: absolute;

    /*border: 1px solid red;*/

    top: 3%;

    left: 0px;

    right: 0px;

    margin: auto;

    text-align: center;

    line-height: 30px;

    overflow: hidden;

}

.title p{

    position: relative;

    top: 0px;

    left: 0px;

    right: 0px;

    margin: auto;

    text-align: center;

    -webkit-animation: anim2 8s linear infinite;

}

@-webkit-keyframes anim2 {

    0% { left: 200px; opacity: 0.2}

    25% { left: 100px; opacity: 0.6}

    50% { left: 0px; opacity: 1}

    75% { left: -100px; opacity: 0.6}

    100% { left: -200px; opacity: 0.2}

}

.content{

    width: 80%;

    height: 33%;

    position: absolute;

    /*border: 1px solid red;*/

    top: 65%;

    left: 0px;

    right: 0px;

    margin: auto;

    text-align: center;

    line-height: 30px;

    overflow: hidden;

}

.content p{

    position: relative;

    top: 0px;

    left: 0px;

    right: 0px;

    margin: auto;

    text-align: center;

    -webkit-animation: anim1 200s linear infinite;

}

@-webkit-keyframes anim1{

    0% {top: 200px;opacity: 0.4}

    5% {top: 0px;opacity: 1}

    15% {top: -200px;opacity: 1}

    20% {top: -400px;opacity: 1}

    25% {top: -600px;opacity: 1}

    30% {top: -800px;opacity: 1}

    35% {top: -1000px;opacity: 1}

    40% {top: -1200px;opacity: 1}

    45% {top: -1400px;opacity: 1}

    50% {top: -1600px;opacity: 1}

    55% {top: -1800px;opacity: 1}

    60% {top: -2000px;opacity: 1}

    65% {top: -2200px;opacity: 1}

    70% {top: -2400px;opacity: 1}

    75% {top: -2600px;opacity: 1}

    80% {top: -2800px;opacity: 1}

    85% {top: -3000px;opacity: 1}

    90% {top: -3200px;opacity: 1}

    95% {top: -3400px;opacity: 0.8}

    100%{top: -3600px;opacity: 0.4}

}

#pic1{

    display: block;

}

#icon1{

    position: absolute;

    top: -38px;

    left: -2px;

    width: 300px;

    z-index: 5;

    cursor: pointer;

}

#pic2{

    display: none;

}

#icon2{

    position: absolute;

    top: -57px;

    left: -222px;

    width: 400px;

    z-index: 5;

    cursor: pointer;

}

myStyle.css Code

/**

 * Created by gao on 2016/7/25.

 */

window.onload=function(){

    var icon1 = document.getElementById("icon1");

    var icon2 = document.getElementById("icon2");

    var pic1 = document.getElementById("pic1");

    var pic2 = document.getElementById("pic2");

    var xuanzhuan = document.getElementById("xuanzhuan");

    var audio = document.getElementsByTagName("audio")[0];

    //当音乐播放完停止时，自动停止图片旋转

    audio.addEventListener("ended",function(event){

        //xuanzhuan.setAttribute("id","");

        xuanzhuan.style.animationPlayState = "paused";

    },false);

    //点击暂停播放时，音乐暂停，图片停止旋转

    icon1.onclick=function(){

        audio.pause();

        pic1.style.display="none";

        pic2.style.display = "block";

        //xuanzhuan.setAttribute("id","");

        xuanzhuan.style.animationPlayState = "paused";

    };

    //点击播放音乐时，音乐开始播放，图片开始旋转

    icon2.onclick=function(){

        audio.play();

        pic1.style.display="block";

        pic2.style.display = "none";

        //xuanzhuan.setAttribute("id","xuanzhuan");

        xuanzhuan.style.animationPlayState = "running";

    }

};

myjs.js Code

效果：

css3动画应用-音乐唱片旋转播放特效的更多相关文章

  1. 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效

    在线预览   源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...

  2. 使用 CSS3 动画实现的 3D 图片过渡特效

    这是一个基于 CSS3 动画实现的图片过渡效果,共有 Flip.Rotation.Multi-flip.Cube.Unfold 等6种效果,它们将证明 CSS3 Transform 和 Transit ...

  3. 使用CSS3动画属性实现各种旋转跳跃

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...

  4. CSS3 动画3D视角下 旋转圆环

    首先是  transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态 本次以圆形( ...

  5. CSS3动画（360度旋转、旋转放大、放大、移动）

    Title div { width: 120px; height: 120px; line-height: 120px; margin: 20px; background-color: #5cb85c ...

  6. 类似百度音乐唱片播放时CD图片不停旋转的实现

    类似百度音乐唱片播放时CD图片不停旋转的实现 效果图 1 html代码 2 <imgsrc="img/logo.png"class="img-responsive& ...

  7. css：音乐唱片机随着播放暂停而旋转暂停

    唱片机由两部分组成,一个是磁针,另一个是唱片 1. 先完成磁针随着播放按钮进行是否在唱片上的切换 原理:将播放暂停状态存入布尔值isbtnShow中,根据isbtnShow的值切换磁针的class. ...

  8. Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路

     Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路 先看一看我的代码运行结果. 代码运行起来初始化状态: 点击开始按钮,唱片机的机械臂匀速接近唱片磁盘,同时唱片磁盘也 ...

  9. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

随机推荐

  1. (二十)python 3 匿名函数

    匿名函数lambda Python使用lambda关键字创造匿名函数.所谓匿名,意即不再使用def语句这样标准的形式定义一个函数.这种语句的目的是由于性能的原因,在调用时绕过函数的栈分配.其语法是: ...

  2. manjaro xfce 18.0 踩坑记录

    manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...

  3. POJ-2773 Happy 2006，暴力2700ms+水过！

                                                         Happy 2006 这个题很可能会超时的,但我几乎暴力的方法2700ms+过了,可能是后台水 ...

  4. Linux 磁盘测速

    读: time dd if=/dev/zero of=/test.dbf bs=8k count=1000000 写: time dd if=/dev/zero of=/var/test bs=8k ...

  5. Excel数据导入Sql Server出现Null（转）

    Excel文件: 序号 姓名 内部电话 住址 1 小李 1234 …… 2 小王 5678 …… 3 小张 2345(国内长途) …… …… …… …… …… 如上结构的Excel文件,用SQL Se ...

  6. linux shell symbolic link & soft link, symbol link, link

    linux shell symbolic link symbolic link https://en.wikipedia.org/wiki/Ln_(Unix) https://stackoverflo ...

  7. [HNOI2012] 永无乡 题解

    题意: n个点,有加边操作,询问与某一点处于相同的联通块的点中权值第k大的点 思路: 对所有点建立一棵权值线段树,加边就配合并查集进行线段树合并 反思: 动态开点,权值线段树要用sum[g[x=fin ...

  8. HDU1272 迷宫通路数

    Problem Description 上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该 ...

  9. [HDU2157]How many ways??（DP + 矩阵优化）

    传送门 k < 20 k这么小,随便dp一下就好了... dp[i][j][k]表示从i到j经过k个点的方案数 4重循环.. 但是如果k很大就不好弄了 把给定的图转为邻接矩阵,即A(i,j)=1 ...

  10. PHP字符串的替换(preg_replace)

    /* 正则表达式  preg_replace() */ $str = array( "如果没有一些http://www.abc.com特殊的<b>替换</b>需5求( ...