Heim > Web-Frontend > HTML-Tutorial > 通过CSS3,实现元素覆盖效果_html/css_WEB-ITnose

通过CSS3,实现元素覆盖效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:43:11
Original
1281 Leute haben es durchsucht

在很多网站中,我们都可以看到这样的效果,当用户鼠标进入某一个元素后,下方就会有遮罩层上浮动画,如图:


今天我们就用hover伪类加上css3实现,没有使用任何JS

  <meta charset="UTF-8">  <title></title>  <style>    #d1{      height: 100px;      position: relative;      width: 100px;      overflow: hidden;    }    #d1:hover > #d3{      transition: transform 0.5s ease;      transform: translateY(-100%);    }    #d2{      background: red;      height: 100px;      width: 100px;    }    #d3{      color: white;      background: #111;      height: 100px;      opacity: 0.6;      width: 100px;    }  </style>  <div id="d1">    <div id="d2"></div>    <div id="d3"></div>  </div>
Nach dem Login kopieren

效果点击这里

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage