很酷的音响

亚伦影音工作室 发表于 2024-10-7 16:17

本帖最后由亚伦影音工作室于 2024-10-10 12:26 编辑 <br /><br /><style>
#papa{
position: relative;
width: 1164px;
height: 640px;
   margin-left:-300px;
margin-top:10px;
border: 0px solid rgba(36, 201, 219,.95);
   border-radius: 0px;
background:#000 url(https://pic.imgdb.cn/item/6703b13ed29ded1a8c58cfd3.webp)no-repeat center/cover;
overflow: hidden;
}
@keyframes vibrate {
0% {

         transform: translate(0, 0) scale(1);
}
20% {

         transform: translate(0, -5px) scale(1.06);
}
100% {

         transform: translate(0, 0) scale(1);
}
}

@keyframes vibrate2 {
0% {

         transform: scale(1);
}
20% {

         transform: scale(1.03);
}
100% {

         transform: scale(1);
}
}
.absolute, .container, .tweeter, .woofer, .woofer__center {
position: absolute;
left: 50%;
top: 50%;
}

.base, .tweeter, .woofer {
border-radius: 100%;
background: linear-gradient(70deg, #828387, #f0f0f2, #828387);
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
}

.container {
background: linear-gradient(90deg, #601000, #333, #601000);
width: 300px;cursor: pointer;
height: 450px;transform:scale(.6);
margin: -100px 0 0 -550px;
border: 4px solid #bbb;
border-radius: 10px;
box-shadow: 0px 1px 15px #000;
}

.container::before, .cone::after {
position: absolute;
content: '';
width: 0;
height: 0;
border-style: solid;
transform:scale(.6);margin: -400px 0 0 -550px;

}
.container::after { transform: rotate(90deg); }

.tweeter {
margin: -200px 0 0 -75px;
width: 150px;
height: 150px;
}
.tweeter__rim {
position: absolute;
left: 25px;
top: 25px;
width: 100px;
height: 100px;
border-radius: 100%;
}
.tweeter__rim .screw {
width: 14px;
height: 14px;
position: absolute;
border-radius: 50%;
position: absolute;
box-shadow: inset 0px -2px 4px #000, inset 0px 2px 2px rgba(255, 255, 255, 0.7);
border: 2px solid #777;
}
.tweeter__rim .screw:nth-child(1) {
top: -22px;
left: 40px;
}
.tweeter__rim .screw:nth-child(2) {
bottom: -22px;
left: 45px;
}
.tweeter__rim .screw:nth-child(3) {
top: 42px;
left: -22px;
}
.tweeter__rim .screw:nth-child(4) {
top: 42px;
right: -22px;
}
.tweeter__rim .mesh {
transform: scale(1, 1);
animation: vibrate 0.4s linear infinite;
}

.stop .tweeter__rim .mesh {animation-play-state: paused;}
.tweeter__rim .mesh:after {
content: '';
width: 90px;
height: 90px;
border-radius: 100%;
border: 5px solid #444;
position: absolute;
background: linear-gradient(transparent 70%, #000 30%), linear-gradient(90deg, transparent 70%, #000 30%), linear-gradient(70deg, #000, #dbdbdd, #000);
background-size: 4px 4px, 4px 4px, 90px 90px;
transform: rotate(-45deg);
}

.woofer {
width: 220px;
height: 220px;
margin: -20px 0 0 -110px;
}
.woofer__center {
margin: 0 0 0 -90px;
height: 180px;
width: 180px;
border-radius: 100%;
background-color: #111;
background: -webkit-radial-gradient(center, ellipse cover, #595959 0%, #424242 40%, #595959 41%, #424242 43%, #424242 45%, #595959 46%, #424242 48%, #424242 50%, #595959 51%, #424242 53%, #424242 55%, #595959 56%, #424242 58%, #424242 60%, #595959 61%, #424242 63%, #595959 100%);
animation: vibrate2 0.4s linear infinite;
}
.stop .woofer__center {animation-play-state: paused;}
.woofer__center:after {
content: "";
position: absolute;
border-radius: 100%;
margin: 65px 0 0 65px;
width: 50px;
height: 50px;
box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5);
background: -webkit-radial-gradient(center, ellipse cover, #494949 0%, #292929 100%);
}
.woofer__rim {
position: absolute;
left: 15px;
top: 15px;
width: 190px;
height: 190px;
border-radius: 100%;
}
.woofer__rim .screw {
position: absolute;
height: 8px;
width: 8px;
background-color: #555;
border-radius: 50%;
box-shadow: 0 0 0 2px #555;
border: 2px solid #000;
transform: scale(0.8);
}
.woofer__rim .screw:before, .woofer__rim .screw:after {
content: "";
width: 100%;
height: 3px;
background: #000;
position: absolute;
box-shadow: -1px 0px 2px 0px rgba(255, 255, 255, 0.7);
top: 2px;
left: 0;
}
.woofer__rim .screw:after {
transform: rotate(90deg);
}
.woofer__rim .screw:nth-child(1) {
top: -13px;
left: 90px;
}
.woofer__rim .screw:nth-child(2) {
bottom: -13px;
left: 90px;
}
.woofer__rim .screw:nth-child(3) {
top: 13px;
left: 20px;
}
.woofer__rim .screw:nth-child(4) {
top: 13px;
right: 20px;
}
.woofer__rim .screw:nth-child(5) {
top: 90px;
left: -13px;
}
.woofer__rim .screw:nth-child(6) {
top: 90px;
right: -13px;
}
.woofer__rim .screw:nth-child(7) {
bottom: 13px;
left: 20px;
}
.woofer__rim .screw:nth-child(8) {
bottom: 13px;
right: 20px;
}

</style>
<div id="papa" >
<div id="testImg" ><div class="container">
   <div class="tweeter">
            <div class="tweeter__rim">
                     <div class="screw"></div>
                     <div class="screw"></div>
                     <div class="screw"></div>
                     <div class="screw"></div>
                     <div class="mesh"></div>
            </div>
   </div>
   <div class="woofer">
            <div class="woofer__rim">
                     <div class="screw"></div>
                     <div class="screw"></div>
                     <div class="screw"></div>
                     <div class="screw"></div>
                     <div class="screw"></div>
                     <div class="screw"></div>
                     <div class="screw"></div>
                     <div class="screw"></div>
            </div>
   </div>
   <div class="woofer__center">

   </div>
</div>
</div>

<audio autoplay="" id="aud" loop="" src="https://v.djqq.net/tttdj/upfile/20240901223645.mp3"> </audio>
</div>

<script>
testImg.onclick = () => aud.paused ?( aud.play(),image.classList.remove('stop')):(aud.pause(),image.classList.add('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
var image= document.getElementById("testImg");

</script>

梦油发表于 2024-10-7 16:42

欣赏佳作，问候亚伦。

红影发表于 2024-10-7 22:52

还以为是动图，原来是代码制作的音响啊，的确很酷{:4_199:}

红影发表于 2024-10-7 22:52

欣赏亚伦老师好帖，这个音响太赞了{:4_199:}

页: [1]

花潮论坛's Archiver

很酷的音响