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

最新推荐文章于 2024-06-12 10:15:41 发布

weixin_30415113

最新推荐文章于 2024-06-12 10:15:41 发布

阅读量2.9k

点赞数 4

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gaotenglong/p/5703177.html

版权

这篇博客介绍了如何使用CSS3创建一个音乐唱片旋转播放的特效，包括将图片设置为圆形并使其连续旋转，文字标题左右循环移动，以及通过点击控制音乐播放和图片旋转的状态。

摘要由CSDN通过智能技术生成

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.οnclick=function(){
        audio.pause();
        pic1.style.display="none";
        pic2.style.display = "block";
        //xuanzhuan.setAttribute("id","");
        xuanzhuan.style.animationPlayState = "paused";
    };
    //点击播放音乐时，音乐开始播放，图片开始旋转
    icon2.οnclick=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>
        <