图片悬停“滑动打开”动画效果

栏目: Html · 发布时间: 4年前

核心属性

overflow: hidden “滑动打开”时将超出矩形范围的图片裁剪掉

background-size: cover 背景图完全覆盖背景区域,但是可能会有部分看不到

clip-path 裁剪图片(road-to-nowhere.jpg)分别为上下两部分

hover + transition + transform: translateY( ) 鼠标悬停时图片分别上下移动自身高度的45%距离

相关知识

《CSS3/SVG clip-path路径剪裁遮罩属性简介》

  1. <base href="https://pics.codecolor.cn/sliding-door-images/">
  2. <figure>
  3. <figcaption><div>路无尽头</div><div>脚不停止</div></figcaption>
  4. <img src="road-to-nowhere.jpg" alt="">
  5. <img src="road-to-nowhere.jpg" alt="">
  6. </figure>
  1. * {
  2. box-sizing: border-box;
  3. }
  4. body {
  5. margin: 0;
  6. background: #222;
  7. }
  8. figure {
  9. position: relative;
  10. width: 60vw;
  11. height: 60vw;
  12. margin: 0 auto;
  13. overflow: hidden;
  14. background-image: url(https://pics.codecolor.cn/sliding-door-images/mad-dog.jpg);
  15. background-size: cover;
  16. }
  17. figure img {
  18. position: absolute;
  19. top: 0;
  20. left: 0;
  21. width: 100%;
  22. transition: 2s ease-in-out;
  23. }
  24. figure img:first-of-type {
  25. clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  26. }
  27. figure img:last-of-type {
  28. clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  29. }
  30. figure:hover img:first-of-type {
  31. transform: translateY(-45%);
  32. }
  33. figure:hover img:last-of-type {
  34. transform: translateY(45%);
  35. }
  36. figcaption {
  37. position: absolute;
  38. top: 0;
  39. width: 100%;
  40. height: 100%;
  41. padding-top: 12vw;
  42. color: white;
  43. font-size: 10vw;
  44. text-align: center;
  45. }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

失控

失控

[美] 凯文·凯利 / 东西文库 / 新星出版社 / 2010-12 / 88.00元

《失控》,全名为《失控:机器、社会与经济的新生物学》(Out of Control: The New Biology of Machines, Social Systems, and the Economic World)。 2006年,《长尾》作者克里斯·安德森在亚马逊网站上这样评价该书: “这可能是90年代最重要的一本书”,并且是“少有的一年比一年卖得好的书”。“尽管书中的一些例子......一起来看看 《失控》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具