如何使用CSS3实现折角效果

程序员文章站 2022-03-28 07:53:52

...

这篇文章主要为大家介绍了利用CSS3实现折角的效果，当鼠标移动到图片上的时候就会出现折角的效果，文中给出了实例代码更方便大家的理解和学习，下面大家来一起学习学习吧。

先来看看静态的效果图

如何使用CSS3实现折角效果

实例代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  body {
   background-color: #eaf0f2;
  }
   h1{text-align: center;}
   .box{width:500px;height:300px;margin:0 auto;position:relative;}
   .img-layer{position: absolute;width: 500px;height: 300px;top: 0;left: 0;overflow: hidden;}
   .img-layer img {width: 500px;cursor: pointer;}
   .img-layer:before{ content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0;
    border-color: rgba(0,0,0,0.2) #fff;
    border-radius: 0 0 0 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -webkit-transition: all 0.4s ease-out;
    transition:all 0.4s ease-out;}
  .img-layer:hover:before{
    border-right-width:100px;
    border-bottom-width:100px;
  }
  </style>
 </head>
 <body>
  <h1>折角效果</h1>
  <p class="box">
   <p class="img-layer">
     <img src="<a href="http://p6.qhimg.com/d/inn/3f563406/table.jpg">http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt="">
   </p>
  </p>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

如何使用CSS3实现折角效果

html5使用canvas实现跟随光标跳动的火焰效果

Android编程使用自定义shape实现shadow阴影效果的方法

MyBatis之自查询使用递归实现 N级联动效果(两种实现方式)

Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

使用Vue实现移动端左滑删除效果附源码

activitygroup 切换动画效果如何实现

基于CSS3 animation动画属性实现轮播图效果

vue2.0 使用element-ui里的upload组件实现图片预览效果方法

IOS如何使用CAShapeLayer实现复杂的View的遮罩效果

IOS使用UICollectionView实现无限轮播效果