Home > Article > Web Front-end > A simple hover effect (html)

A simple hover effect (html)

零下一度Original: 2017-04-28 15:30:282193browse

Win7、 Firefox 11打开 demo(小心撞墙 ) 更多的效果可以参考 php中文网。

body {
    background: #000;
    overflow-y: scroll;
  }
  .items {
    margin: 40px auto;
    width: 1110px;
  }
  a {
    color: #FFF;
    cursor: pointer;
    margin: 0 0 20px 620px;
    text-align: center;
    text-decoration: none;
  }
  a:HOVER {
    color: red;
  }
  a:HOVER ~ p.items {
    border: 1px solid #FFF;
    background: url(&#39;http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg&#39;) no-repeat scroll center center transparent;
    height: 500px;
  }
  a:HOVER ~ p.items > *{
    display: none;
  }
  .item {
    border: 10px solid #FFF;
    cursor: pointer;
    float: left;
    height: 231px;
    width: 350px;
    
    -moz-transform: scale(0.8);
    -moz-transition: all 0.5s ease-in-out 0s;
  }
  .item > p {
    background: rgba(0,0,0,0.7);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    
    -moz-transition: all 0.5s ease-in-out 0s;
  }
  .item:HOVER {
    -moz-transform: scale(1);
  }
  .item-1:HOVER > p {
    height: 0%
  }
  .item-2:HOVER > p {
    height: 0%;
    top: 50%;
  }
  .item-3:HOVER > p {
    height: 0%;
    left: 50%;
    top: 50%;
    width: 0%;
  }
  .item-4:HOVER > p {
    height: 0%;
    left: 50%;
    top: 50%;
    width: 0%;
    
    -moz-transform: rotate(360deg);
  }
  .item-5:HOVER > p {
    height: 0%;
    left: 50%;
    top: 50%;
    width: 0%;
    
    -moz-transform: rotate(-360deg);
  }
  .item-6 > p {
    height: 50%;
    width: 50%;
  }
  .item-6 > p:NTH-CHILD(2) {
    left: 50%;
    top: 0;
  }
  .item-6 > p:NTH-CHILD(3) {
    left: 0;
    top: 50%;
  }
  .item-6 > p:NTH-CHILD(4) {
    left: 50%;
    top: 50%;
  }
  .item-6:HOVER > p {
    height: 0;
    width: 0;
    /*-moz-transform: rotate(-360deg);*/
  }
  .item-6:HOVER > p:NTH-CHILD(2) {
    left: 100%;
    /*-moz-transform: rotate(360deg);*/
  }
  .item-6:HOVER > p:NTH-CHILD(3) {
    top: 100%;
  }
  .item-6:HOVER > p:NTH-CHILD(4) {
    left: 100%;
    top: 100%;
    /*-moz-transform: rotate(360deg);*/
  }
  .clear:AFTER {
    clear: both;
    content: &#39;\0020&#39;;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
  }
  #preloader {
    background-image: url(&#39;http://farm5.staticflickr.com/4059/4710746077_03125f9331.jpg&#39;);
    height: 0;
    width: 0;
  }

4. [代码][HTML]

<body>
  <a class="clear">请不要点我。</a>
  <p class="items clear">
    <p class="item item-1">
      <p></p>
      <img src="350x231/1.jpg" alt="" />
    </p>
    <p class="item item-2">
      <p></p>
      <img src="350x231/2.jpg" alt="" />
    </p>
    <p class="item item-3">
      <p></p>
      <img src="350x231/3.jpg" alt="" />
    </p>
    <p class="item item-4">
      <p></p>
      <img src="350x231/4.jpg" alt="" />
    </p>
    <p class="item item-5">
      <p></p>
      <img src="350x231/5.jpg" alt="" />
    </p>
    <p class="item item-6">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <img src="350x231/6.jpg" alt="" />
    </p>
  </p>
  <p id="preloader"></p>
</body>

The above is the detailed content of A simple hover effect (html). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to get html based on specified clipboard?Next article：How to get html based on specified clipboard?

See more

A simple hover effect (html)

4. [代码][HTML]

Related articles