css3动画旋转动画_CSS3动画实验–虚拟DJ

css3动画旋转动画

CSS3 Animation Experiment – Virtual DJ Today I made up my mind to prepare nice CSS3 experiment. I wanted to create a nice looking environment with a lot of moving elements. As background, I selected DJ music console. In this demo anything is movable only with CSS3 (without any Javascript). I used various css3 technics like keyframes, animation, transformation (rotation and scale). Welcome to test it.

CSS3动画实验–虚拟DJ今天&＃xff0c;我下定决心准备出色CSS3实验。 我想创建一个包含许多动态元素的漂亮环境。 作为背景&＃xff0c;我选择了DJ音乐控制台。 在此演示中&＃xff0c;任何内容都只能通过CSS3移动(没有任何Javascript)。 我使用了各种css3技术&＃xff0c;例如关键帧&＃xff0c;动画&＃xff0c;变换(旋转和缩放)。 欢迎测试。

现场演示

下载结果

So, lets start

所以&＃xff0c;让我们开始吧

步骤1. HTML (Step 1. HTML)

Everything is very easy, isn’t it? As you can see – it contains a lot of different images.

一切都很容易&＃xff0c;不是吗&＃xff1f; 如您所见–它包含许多不同的图像。

index.html (index.html)







步骤2. CSS (Step 2. CSS)

Now, its time to style our musical demo. Don’t forget to include our CSS file in the head section of the result page.

现在&＃xff0c;是时候设计我们的音乐演示了。 不要忘记在结果页面的开头部分包含我们CSS文件。

css / main.css (css/main.css)


/* virtual dj */
.vdj {margin: 100px auto 0;position: relative;width: 800px;
}
/* vinyl keyframes */
&＃64;-webkit-keyframes vinyl {0% {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
&＃64;-moz-keyframes vinyl {0% {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
.v1, .v2, .v3, .v4 {/* css3 animation */-moz-animation-name: vinyl;-moz-animation-duration: 3s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: vinyl;-webkit-animation-duration: 3s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
.v1 {left: 83px;position: absolute;top: 77px;
}
.v2 {left: 580px;position: absolute;top: 77px;
}
.v3 {left: 66px;position: absolute;top: 382px;
}
.v4 {left: 634px;position: absolute;top: 382px;
}
/* speaker keyframes */
&＃64;-webkit-keyframes speaker {0% {-moz-transform: scale(0.75);-webkit-transform: scale(0.75);}45% {-moz-transform: scale(0.85);-webkit-transform: scale(0.85);}100% {-moz-transform: scale(0.75);-webkit-transform: scale(0.75);}
}
&＃64;-moz-keyframes speaker {0% {-moz-transform: scale(0.75);-webkit-transform: scale(0.75);}45% {-moz-transform: scale(0.85);-webkit-transform: scale(0.85);}100% {-moz-transform: scale(0.75);-webkit-transform: scale(0.75);}
}
.si1, .si2, .si3, .si4 {/* css3 transform */-webkit-transform:scale(0.75);-moz-transform:scale(0.75);-ms-transform:scale(0.75);-o-transform:scale(0.75);transform:scale(0.75);/* css3 animation */-moz-animation-name: speaker;-moz-animation-duration: 0.5s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: speaker;-webkit-animation-duration: 0.5s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
.si1 {left: 541px;position: absolute;top: 249px;
}
.s1 {left: 545px;position: absolute;top: 253px;
}
.si2 {left: 606px;position: absolute;top: 249px;/* css3 animation delay */-moz-animation-delay: 0.25s;-webkit-animation-delay: 0.25s;
}
.s2 {left: 610px;position: absolute;top: 253px;
}
.si3 {left: 671px;position: absolute;top: 249px;
}
.s3 {left: 675px;position: absolute;top: 253px;
}
.si4 {left: 735px;position: absolute;top: 249px;/* css3 animation delay */-moz-animation-delay: 0.25s;-webkit-animation-delay: 0.25s;
}
.s4 {left: 739px;position: absolute;top: 253px;
}
/* slider keyframes */
&＃64;-webkit-keyframes slider {0% {margin-top:0px;}50% {margin-top:90px;}100% {margin-top:0px;}
}
&＃64;-moz-keyframes slider {0% {margin-top:0px;}50% {margin-top:90px;}100% {margin-top:0px;}
}
.slid1, .slid2 {/* css3 animation */-moz-animation-name: slider;-moz-animation-duration: 2.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: slider;-webkit-animation-duration: 2.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
.slid1 {left: 254px;position: absolute;top: 94px;
}
.slid2 {left: 751px;position: absolute;top: 94px;/* css3 animation delay */-moz-animation-delay: -1.0s;-webkit-animation-delay: -1.0s;
}
/* buttons keyframes */
&＃64;-webkit-keyframes buttons {0% {opacity: 1;}45% {opacity: 0;}100% {opacity: 1;}
}
&＃64;-moz-keyframes buttons {0% {opacity: 1;}45% {opacity: 0;}100% {opacity: 1;}
}
.b1, .b2, .b3, .b4, .b5, .b6 {/* css3 animation */-moz-animation-name: buttons;-moz-animation-duration: 1.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: buttons;-webkit-animation-duration: 1.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
.b1 {left: 17px;position: absolute;top: 105px;
}
.b2 {left: 17px;position: absolute;top: 147px;/* css3 animation delay */-moz-animation-delay: 0.3s;-webkit-animation-delay: 0.3s;
}
.b3 {left: 17px;position: absolute;top: 190px;/* css3 animation delay */-moz-animation-delay: 0.6s;-webkit-animation-delay: 0.6s;
}
.b4 {left: 513px;position: absolute;top: 105px;/* css3 animation delay */-moz-animation-delay: 0.3s;-webkit-animation-delay: 0.3s;
}
.b5 {left: 513px;position: absolute;top: 147px;/* css3 animation delay */-moz-animation-delay: 0.6s;-webkit-animation-delay: 0.6s;
}
.b6 {left: 513px;position: absolute;top: 190px;
}
/* eq keyframes */
&＃64;-webkit-keyframes eq {0% {background-position: 0 0;}100% {background-position: 0 -92px;}
}
&＃64;-moz-keyframes eq {0% {background-position: 0 0;}100% {background-position: 0 -92px;}
}
.eq {background: url("../images/eq.png") no-repeat scroll center top transparent;height: 92px;left: 197px;position: absolute;top: 389px;width: 18px;/* css3 animation */-moz-animation-name: eq;-moz-animation-duration: 2.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: eq;-webkit-animation-duration: 2.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
/* eq2 keyframes */
&＃64;-webkit-keyframes eq2 {0% {background-position: 0 0;}100% {background-position: -260px 0;}
}
&＃64;-moz-keyframes eq2 {0% {background-position: 0 0;}100% {background-position: -260px 0;}
}
.eq2 {background: url("../images/eq2.png") no-repeat scroll center top transparent;height: 28px;left: 271px;position: absolute;top: 240px;width: 260px;/* css3 animation */-moz-animation-name: eq2;-moz-animation-duration: 6.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: eq2;-webkit-animation-duration: 6.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}



/* virtual dj */
.vdj {margin: 100px auto 0;position: relative;width: 800px;
}
/* vinyl keyframes */
&＃64;-webkit-keyframes vinyl {0% {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
&＃64;-moz-keyframes vinyl {0% {-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);}100% {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
.v1, .v2, .v3, .v4 {/* css3 animation */-moz-animation-name: vinyl;-moz-animation-duration: 3s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: vinyl;-webkit-animation-duration: 3s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
.v1 {left: 83px;position: absolute;top: 77px;
}
.v2 {left: 580px;position: absolute;top: 77px;
}
.v3 {left: 66px;position: absolute;top: 382px;
}
.v4 {left: 634px;position: absolute;top: 382px;
}
/* speaker keyframes */
&＃64;-webkit-keyframes speaker {0% {-moz-transform: scale(0.75);-webkit-transform: scale(0.75);}45% {-moz-transform: scale(0.85);-webkit-transform: scale(0.85);}100% {-moz-transform: scale(0.75);-webkit-transform: scale(0.75);}
}
&＃64;-moz-keyframes speaker {0% {-moz-transform: scale(0.75);-webkit-transform: scale(0.75);}45% {-moz-transform: scale(0.85);-webkit-transform: scale(0.85);}100% {-moz-transform: scale(0.75);-webkit-transform: scale(0.75);}
}
.si1, .si2, .si3, .si4 {/* css3 transform */-webkit-transform:scale(0.75);-moz-transform:scale(0.75);-ms-transform:scale(0.75);-o-transform:scale(0.75);transform:scale(0.75);/* css3 animation */-moz-animation-name: speaker;-moz-animation-duration: 0.5s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: speaker;-webkit-animation-duration: 0.5s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
.si1 {left: 541px;position: absolute;top: 249px;
}
.s1 {left: 545px;position: absolute;top: 253px;
}
.si2 {left: 606px;position: absolute;top: 249px;/* css3 animation delay */-moz-animation-delay: 0.25s;-webkit-animation-delay: 0.25s;
}
.s2 {left: 610px;position: absolute;top: 253px;
}
.si3 {left: 671px;position: absolute;top: 249px;
}
.s3 {left: 675px;position: absolute;top: 253px;
}
.si4 {left: 735px;position: absolute;top: 249px;/* css3 animation delay */-moz-animation-delay: 0.25s;-webkit-animation-delay: 0.25s;
}
.s4 {left: 739px;position: absolute;top: 253px;
}
/* slider keyframes */
&＃64;-webkit-keyframes slider {0% {margin-top:0px;}50% {margin-top:90px;}100% {margin-top:0px;}
}
&＃64;-moz-keyframes slider {0% {margin-top:0px;}50% {margin-top:90px;}100% {margin-top:0px;}
}
.slid1, .slid2 {/* css3 animation */-moz-animation-name: slider;-moz-animation-duration: 2.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: slider;-webkit-animation-duration: 2.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
.slid1 {left: 254px;position: absolute;top: 94px;
}
.slid2 {left: 751px;position: absolute;top: 94px;/* css3 animation delay */-moz-animation-delay: -1.0s;-webkit-animation-delay: -1.0s;
}
/* buttons keyframes */
&＃64;-webkit-keyframes buttons {0% {opacity: 1;}45% {opacity: 0;}100% {opacity: 1;}
}
&＃64;-moz-keyframes buttons {0% {opacity: 1;}45% {opacity: 0;}100% {opacity: 1;}
}
.b1, .b2, .b3, .b4, .b5, .b6 {/* css3 animation */-moz-animation-name: buttons;-moz-animation-duration: 1.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: buttons;-webkit-animation-duration: 1.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
.b1 {left: 17px;position: absolute;top: 105px;
}
.b2 {left: 17px;position: absolute;top: 147px;/* css3 animation delay */-moz-animation-delay: 0.3s;-webkit-animation-delay: 0.3s;
}
.b3 {left: 17px;position: absolute;top: 190px;/* css3 animation delay */-moz-animation-delay: 0.6s;-webkit-animation-delay: 0.6s;
}
.b4 {left: 513px;position: absolute;top: 105px;/* css3 animation delay */-moz-animation-delay: 0.3s;-webkit-animation-delay: 0.3s;
}
.b5 {left: 513px;position: absolute;top: 147px;/* css3 animation delay */-moz-animation-delay: 0.6s;-webkit-animation-delay: 0.6s;
}
.b6 {left: 513px;position: absolute;top: 190px;
}
/* eq keyframes */
&＃64;-webkit-keyframes eq {0% {background-position: 0 0;}100% {background-position: 0 -92px;}
}
&＃64;-moz-keyframes eq {0% {background-position: 0 0;}100% {background-position: 0 -92px;}
}
.eq {background: url("../images/eq.png") no-repeat scroll center top transparent;height: 92px;left: 197px;position: absolute;top: 389px;width: 18px;/* css3 animation */-moz-animation-name: eq;-moz-animation-duration: 2.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: eq;-webkit-animation-duration: 2.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}
/* eq2 keyframes */
&＃64;-webkit-keyframes eq2 {0% {background-position: 0 0;}100% {background-position: -260px 0;}
}
&＃64;-moz-keyframes eq2 {0% {background-position: 0 0;}100% {background-position: -260px 0;}
}
.eq2 {background: url("../images/eq2.png") no-repeat scroll center top transparent;height: 28px;left: 271px;position: absolute;top: 240px;width: 260px;/* css3 animation */-moz-animation-name: eq2;-moz-animation-duration: 6.0s;-moz-animation-timing-function: linear;-moz-animation-iteration-count: infinite;-moz-animation-direction: normal;-moz-animation-delay: 0;-moz-animation-play-state: running;-moz-animation-fill-mode: forwards;-webkit-animation-name: eq2;-webkit-animation-duration: 6.0s;-webkit-animation-timing-function: linear;-webkit-animation-iteration-count: infinite;-webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;
}


I think that everything should be very easy for you. I used -moz and -webkit prefixes in order to teach it works in FF and Webkit-based browsers (Chrome and Safari).

我认为一切对您来说应该都很容易。 我使用-moz和-webkit前缀来教导它在基于FF和基于Webkit的浏览器(Chrome和Safari)中工作。

现场演示

下载结果

结论 (Conclusion)

Thats all, today we have created new animated demonstration with CSS3. You are free to modify our result and use it at your websites. Feel free to share our tutorials with your friends. Good luck!

就是这样&＃xff0c;今天我们用CSS3创建了新的动画演示。 您可以自由修改我们的结果&＃xff0c;并在您的网站上使用它。 随时与您的朋友分享我们的教程。 祝好运&＃xff01;

翻译自: https://www.script-tutorials.com/css3-animation-experiment-virtual-dj/

css3动画旋转动画