Home >Web Front-end >CSS Tutorial >How to use CSS3 to achieve a dog-ear effect
How to use CSS3 to achieve a dog-ear effect
- 不言Original
- 2018-06-20 14:42:573633browse
This article mainly introduces you to the effect of using CSS3 to achieve the corner folding. When the mouse moves over the picture, the corner folding effect will appear. The example code is given in the article to make it easier for everyone to understand and learn. Let’s follow. Let’s learn together.
Let’s take a look at the static renderings first
Example code
<!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>The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
How to use css to realize arrows of any size, direction and angle
##Using CSS3 to realize the cool Black Cat Sheriff homepage
The above is the detailed content of How to use CSS3 to achieve a dog-ear effect. For more information, please follow other related articles on the PHP Chinese website!