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

作者：mobiledu2502871951 | 来源：互联网 | 2023-09-03 11:27

css3动画旋转动画CSS3AnimationExperiment–VirtualDJTodayImadeupmymindtoprepareniceCSS3experiment.I

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; }

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动画旋转动画

推荐阅读

diff
探究HTML5应用中的三种Accordion交互效果

在HTML5应用中，Accordion（手风琴，又称抽屉）效果因其独特的展开和折叠样式而广泛使用。本文探讨了三种不同的Accordion交互效果，通过层次结构优化信息展示和页面布局，提升用户体验。这些效果不仅增强了视觉效果，还提高了内容的可访问性和互动性。 ... [详细]

蜡笔小新 2024-11-04 18:09:29
php
SoundPool

如果应用程序经常播放密集、急促而又短暂的音效（如游戏音效）那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点：1)延时时间较长，且资源占用率高 ... [详细]

蜡笔小新 2024-11-13 16:47:19
php
网站访问全流程解析

本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]

蜡笔小新 2024-11-12 18:13:16
replace
javascript分页类支持页码格式

前端时间因为项目需要，要对一个产品下所有的附属图片进行分页显示，没考虑ajax一张张请求，所以干脆一次性全部把图片out，然 ... [详细]

蜡笔小新 2024-11-12 14:58:57
php
解决Bootstrap DataTable Ajax请求重复问题

在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]

蜡笔小新 2024-11-12 13:59:27
php
Python 伦理黑客技术：深入探讨后门攻击（第三部分）

在《Python 伦理黑客技术：深入探讨后门攻击（第三部分）》中，作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流，难以确定消息批次的结束点，这给后门攻击的实现带来了挑战。为了解决这一问题，文章提出了一系列有效的技术方案，包括使用特定的分隔符和长度前缀，以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性，还为安全研究人员提供了宝贵的参考。 ... [详细]

蜡笔小新 2024-11-09 16:33:02
php
Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析

Java环境中Selenium Chrome驱动在大规模Web应用扩展时的性能限制分析 ... [详细]

蜡笔小新 2024-11-07 10:10:30
version
深入解析CGLIB BeanCopier的应用与优化技巧

本文深入探讨了CGLIB BeanCopier在Bean对象复制中的应用及其优化技巧。相较于Spring的BeanUtils和Apache的BeanUtils，CGLIB BeanCopier在性能上具有显著优势。通过详细分析其内部机制和使用场景，本文提供了多种优化方法，帮助开发者在实际项目中更高效地利用这一工具。此外，文章还讨论了CGLIB BeanCopier在复杂对象结构和大规模数据处理中的表现，为读者提供了实用的参考和建议。 ... [详细]

蜡笔小新 2024-11-04 19:31:32
main
探索聚类分析中的K-Means与DBSCAN算法及其应用

聚类分析是一种用于解决样本或特征分类问题的统计分析方法，也是数据挖掘领域的重要算法之一。本文主要探讨了K-Means和DBSCAN两种聚类算法的原理及其应用场景。K-Means算法通过迭代优化簇中心来实现数据点的划分，适用于球形分布的数据集；而DBSCAN算法则基于密度进行聚类，能够有效识别任意形状的簇，并且对噪声数据具有较好的鲁棒性。通过对这两种算法的对比分析，本文旨在为实际应用中选择合适的聚类方法提供参考。 ... [详细]

蜡笔小新 2024-11-04 13:20:39
php
第二十五天接口、多态

1.java是面向对象的语言。设计模式：接口接口类是从java里衍生出来的，不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]

蜡笔小新 2024-11-12 06:43:20
uri
利用GLSL在iOS上实现YV12到RGB的转换，并附带展示结果图像

本文介绍了如何在iOS平台上使用GLSL着色器将YV12格式的视频帧数据转换为RGB格式，并展示了转换后的图像效果。通过详细的技术实现步骤和代码示例，读者可以轻松掌握这一过程，适用于需要进行视频处理的应用开发。 ... [详细]

蜡笔小新 2024-11-06 19:18:22
import
夜灵HTML日志第10天：深入探讨浏览器兼容性与高级选择器应用

在第10天的夜灵HTML日志中，我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性，但在旧版浏览器中的支持情况并不理想。然而，目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器，我们提供了多种解决方案，以确保网站在不同环境下的兼容性和用户体验。此外，我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]

蜡笔小新 2024-11-05 17:52:10
python
如何高效启动大数据应用之旅？

在前一篇文章中，我探讨了大数据的定义及其与数据挖掘的区别。本文将重点介绍如何高效启动大数据应用项目，涵盖关键步骤和最佳实践，帮助读者快速踏上大数据之旅。 ... [详细]

蜡笔小新 2024-11-04 18:30:38
php
Python AlphaShape：基于点集估算图像区域的Alpha形状算法解析

本文探讨了基于点集估算图像区域的Alpha形状算法在Python中的应用。通过改进传统的Delaunay三角剖分方法，该算法能够生成更加灵活和精确的形状轮廓，避免了单纯使用Delaunay三角剖分时可能出现的过大三角形问题。这种“模糊Delaunay三角剖分”技术不仅提高了形状的准确性，还增强了对复杂图像区域的适应能力。 ... [详细]

蜡笔小新 2024-11-03 17:11:41
join
【Python爬虫实操】不创作小说，专精网站内容迁移，超高效！（含源代码）

本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移，涵盖前端、后端及Android相关知识点。通过具体实例和源代码，展示了如何精准抓取并迁移网站内容，适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]

蜡笔小新 2024-10-28 20:00:28

mobiledu2502871951

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章