Question

我目前正在为一家本地企业开发一个网站，到目前为止我有一个菜单栏，但是我在转换上的转换：规模（1.2）不起作用，我已经找了几个小时的解决方案但是无济于事。从我收集的内容来看，我的代码应该工作得非常好，但过渡将不适用，如果我只是在悬停时调整li而不使用变换，它会将其他项目移动到它周围，尽管转换的工作原理是这样的，结果看起来很难看，菜单是全尺寸的，还没有响应，所以它不适合在小屏幕上看起来很好，这是我的代码。

 <!DOCTYPE html>
  <html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>
      Pacific Cay
     </title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
   </head>
  <body>
   <div class="container">
    <div class="menu">
     <ul>
      <a href="#"><li class="about2">About Us</li></a>
       <a href="#"><li>About Us</li></a>
     <a href="home.html"><li id="logobox"><span id="hiddenoverlay">About us.
     </span></li></a>
    <a href="#"><li>About Us</li></a>
    <a href="#"><li class="about">About Us</li></a>
   </ul>

  </div>
</div>
</body>
</html>



body
{
 background-image: url("banner.jpg");
 background-repeat: no-repeat;
 background-size: cover;
}

ul 
{
 list-style: none;
 padding: 5px;
 margin: 0px;
 padding-left: 3.3em;
 padding-top: 2em;
}

ul li 
 {
 margin-left: 0.7em;
 font-size: 55px;
 display: block;
 position: relative;
 float: left;
 border-top: 5px outset #3333ff;
 border-bottom: 5px outset #3333ff;
 border-radius: 20px;
}

li ul 
{
 display: none;
}

ul a li 
{
 display: block;
 padding: 5px 10px 5px 10px;
 text-decoration: none;
 white-space: nowrap;color: #fff;
 transition: transform 1s;
 transition: background-color 0.5s;
 transition: box-shadow 0.5s;
 box-shadow: 0px 0px 0px 0px #000000;
}

ul a li:hover 
{
 transform: scale(1.2);
 box-shadow: 0px 10px 20px 0px #000000;
 background: #c0c0c0;
}

li:hover ul 
{
 display: block; 
 position: absolute;
}

li:hover li 
{
 float: none;
}

a:hover li 
{
 background: #f00;
}

li:hover a li:hover 
{
 background: #000;
}

#drop-nav li ul li 
{
 border-top: 0px;
}

.menu 
{
 position: absolute;
 background: #7777ff;
 width: 100%;
 top: 0;
 left: 0;
 height: 10em;
 border-bottom: 1px outset #3333ff;
}

#logobox
{
 background-image: url("logo.png");
 height: 1.7em;
 background-repeat: no-repeat;
 margin-top: -0.3em;
 font-size: 60px;
}

#hiddenoverlay
{
 opacity: 0;
}

.about2
{
 margin-left: -0.7em;
}

Here is a jsfiddle: https://jsfiddle.net/0k62nz1w/

Answer 1

您可以使用逗号分隔的单个transition定义多个转场。 https://jsfiddle.net/0k62nz1w/1/

body {
  background-image: url("banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

ul {
  list-style: none;
  padding: 5px;
  margin: 0px;
  padding-left: 3.3em;
  padding-top: 2em;
}

ul li {
  margin-left: 0.7em;
  font-size: 55px;
  display: block;
  position: relative;
  float: left;
  border-top: 5px outset #3333ff;
  border-bottom: 5px outset #3333ff;
  border-radius: 20px;
}

li ul {
  display: none;
}

ul a li {
  display: block;
  padding: 5px 10px 5px 10px;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  transition: transform 1s, background-color 0.5s, box-shadow 0.5s;
  box-shadow: 0px 0px 0px 0px #000000;
}

ul a li:hover {
  transform: scale(1.2);
  box-shadow: 0px 10px 20px 0px #000000;
  background: #c0c0c0;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
}

a:hover li {
  background: #f00;
}

li:hover a li:hover {
  background: #000;
}

#drop-nav li ul li {
  border-top: 0px;
}

.menu {
  position: absolute;
  background: #7777ff;
  width: 100%;
  top: 0;
  left: 0;
  height: 10em;
  border-bottom: 1px outset #3333ff;
}

#logobox {
  background-image: url("logo.png");
  height: 1.7em;
  background-repeat: no-repeat;
  margin-top: -0.3em;
  font-size: 60px;
}

#hiddenoverlay {
  opacity: 0;
}

.about2 {
  margin-left: -0.7em;
}

<!DOCTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
      Pacific Cay
    </title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <div class="container">
      <div class="menu">
        <ul>
          <a href="#">
            <li class="about2">About Us</li>
          </a>
          <a href="#">
            <li>About Us</li>
          </a>
          <a href="home.html">
            <li id="logobox"><span id="hiddenoverlay">About us.</span></li>
          </a>
          <a href="#">
            <li>About Us</li>
          </a>
          <a href="#">
            <li class="about">About Us</li>
          </a>
        </ul>

      </div>
    </div>
  </body>

</html>

无法应用转换到转换比例

1 个答案: