我在哪里可以找到 CSS 中的动画音量栏 [关闭]答案

【问题标题】：Where Can i find animated volume bar in css [closed]我在哪里可以找到 CSS 中的动画音量栏 [关闭]
【发布时间】：2016-10-20 01:13:48
【问题描述】：

在互联网上搜索了很多之后，我找不到像这个网站这样的动画音量条的方法：https://my.pottermore.com/patronus

如果有人知道如何创建这样的按钮，请在下面告诉我。我尝试了很多次，但都没有正常工作。

这是我到目前为止所做的：

jsfiddle.net/dzk6uj7e/74/

最好的问候，

【问题讨论】：

关心启动 js fiddle 吗？很高兴看到代码。问题是，我不确定这是 CSS 的问题。而是 JavaScript、HTML 和 CSS。
查看页面源代码，或者检查元素，代码就在那儿
尽管@Aloso 还是这样做了，但 Stack Overflow 并不是一个代码编写服务。当您遇到绊脚石或在自己做某件事时需要帮助时，我们随时为您提供帮助。
是的，很抱歉我没有发布代码，因为它在楼上引用的网站文件中。我还尝试复制我感兴趣但效果不佳的元素。好像少了什么？

标签： css animation web

【解决方案1】：

一个按钮由 8 行组成，它们是 1px 高或宽的 html 元素。没那么难：

body {
  background-color: #444444;
}

.fancybutton {
  width: 200px;
  height: 80px;
  position: absolute;
  cursor: pointer;
}

.line {
  position: absolute;
  width: 1px;
  height: 1px;
  background-color: white;
  transition: .5s;
  opacity: 0.6;
}

.v1 {
  left: 0;
  top: 40px;
  height: 70px;
  margin: -35px 0;
}
.v2 {
  left: 5px;
  top: 40px;
  height: 80px;
  margin: -40px 0;
}
.v3 {
  right: 5px;
  top: 40px;
  height: 80px;
  margin: -40px 0;
}
.v4 {
  right: 0;
  top: 40px;
  height: 70px;
  margin: -35px 0;
}

.h1 {
  left: 100px;
  top: 0;
  width: 190px;
  margin: 0 -95px;
}
.h2 {
  left: 100px;
  top: 5px;
  width: 200px;
  margin: 0 -100px;
}
.h3 {
  left: 100px;
  bottom: 5px;
  width: 200px;
  margin: 0 -100px;
}
.h4 {
  left: 100px;
  bottom: 0;
  width: 190px;
  margin: 0 -95px;
}


.buttontext {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  color: white;
  line-height: 60px;
  font-size: 13px;
  font-family: Arial, sans-serif;
  letter-spacing: 1.5px;
  text-align: center;
  transition: .5s;
}

.fancybutton:hover .buttontext {
  background-color: white;
  color: #222222;
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.fancybutton:hover .v1, .fancybutton:hover .v4 {
  margin: 0;
  height: 0;
  opacity: 1;
}

.fancybutton:hover .v2, .fancybutton:hover .v3 {
  height: 70px;
  margin: -35px 0;
  opacity: 1;
}

.fancybutton:hover .h1, .fancybutton:hover .h4 {
  margin: 0;
  width: 0;
  opacity: 1;
}

.fancybutton:hover .h2, .fancybutton:hover .h3 {
  width: 190px;
  margin: 0 -95px;
  opacity: 1;
}

<div class="fancybutton">
  <div class="line vertical v1"></div>
  <div class="line vertical v2"></div>
  <div class="line vertical v3"></div>
  <div class="line vertical v4"></div>

  <div class="line horizontal h1"></div>
  <div class="line horizontal h2"></div>
  <div class="line horizontal h3"></div>
  <div class="line horizontal h4"></div>

  <div class="buttontext">FANCY BUTTON</div>
</div>

【讨论】：

感谢您的回复。但是我对另一个按钮感兴趣。那是页面右下角的音量按钮；）
jsfiddle.net/dzk6uj7e/94 它正在工作:)
感谢您的关注，非常感谢。两天前我找到了一个方法。但是，文本翻译仍然无法正常工作；）