Question

我创建了一个简单的网页，其中包含几个按钮（接收引号和导航按钮），按下时会转换为不透明度为0.5。但每当我按下任何一个按钮时，页面中间的绿松石文字都会闪烁（＆＃34; Pixel完美网站......＆＃34;）。

我用那个绿松石文字的跨度，这有影响吗？我对HTML / CSS很陌生，所以如果我的代码看起来很糟糕，或者我没有遵循最好的HTML / CSS做法，请耐心等待。如果可能的话，请告诉我，除了闪烁的问题，如果我的代码可以做得更好，因为我真的想知道如何进一步改进：D

我在CodePen上的网页：http://codepen.io/optixal/pen/VvXGLz

HTML正文：

<div class="block head">
  <div class="container">
    <h1>Optixal Labs</h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<div class="block foot">
  <div class="container">
    <p>Premium Website Development Service
      <br/><span class="highlight">Pixel perfect websites made with the latest HTML5 and CSS3 standards</span>
      <br/>
      <button>Get a free quote</button>
    </p>
  </div>
</div>
<div class="block desc">
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet orci non massa placerat ornare id ac augue. Etiam sed sem luctus, malesuada lorem sit amet, ullamcorper enim. Quisque blandit tincidunt ultricies. In porttitor suscipit dui.
      Sed at mollis orci. Donec at sem et metus varius placerat non eget elit. In porta nisi vitae sem sodales molestie.
    </p>
  </div>
</div>

CSS：

@import url(https://fonts.googleapis.com/css?family=Roboto:100,400,300);

/*
pri-colour: #699191;
sec-colour: #437575;
hil-colour: turquoise;
*/

/* Base CSS */
*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  font-family: Roboto, Helvetica, Arial;
  color: white;
}

html, body {
  margin: 0;
  padding: 0;
}

.block {
  background-color: #1A1A1A;
  width: 100%;
  min-width: 750px;
}

.container {
  margin: 0 auto;
  max-width: 1080px;
  position: relative;
  padding: 20px 40px;
}

/* Header */
h1 {
  font-size: 3em;
  font-weight: 100;
  text-transform: uppercase;
  margin: 10px auto;
}

/* Navigation */
ul {
  list-style-type: none;
  padding: 0;
  position: absolute;
  right: 20px;
  top: 33px;
}

li {
  float: left;
}

a:link, a:visited {
  color: white;
  display: block;
  width: 110px;
  font-size: .9em;
  text-align: center;
  font-weight: 300;
  padding: 4px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .25s;
}

a:hover {
  color: turquoise;
}

a:active {
  opacity: .5;
}

/* Footer */
.foot {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url("https://c1.staticflickr.com/9/8166/7637076872_fcb6fcdaa8_b.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 129.5px 0;
}

.foot p {
  font-size: 2em;
  font-weight: 100;
  text-align: center;
  margin: 0;
}

.highlight {
  color: turquoise;
  font-size: .395em;
  letter-spacing: 1px;
  text-transform: uppercase;
  position: relative;
  top: -13px;

}

button {
  background-color: transparent;
  border: 1px solid #fff;
  color: #fff;
  cursor: pointer;
  font-size: .3em;
  font-weight: 300;
  letter-spacing: 2px;
  outline: none;
  padding: 4px 10px;
  text-transform: uppercase;
  transition: all .25s;
  position: relative;
  bottom: -8px;
}

button:hover {
  background-color: #fff;
  box-shadow: 0 0 4px #fff;
  color: #0d0d0d;
}

button:active {
  opacity: .5;
}

/* Description */
.desc p {
  font-size: 1.2em;
  font-weight: 300;
  opacity: .87;
  text-align: justify;
  margin: 20px 0;
}

谢谢！

CSS Opacity Transitions on：活动元素影响其他元素

0 个答案: