![fb212ae191e6f5290bb8645049f5066d.gif](https://img-blog.csdnimg.cn/img_convert/fb212ae191e6f5290bb8645049f5066d.gif)
大家好,我是你们的导师,我每天都会在这里给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈)。上次老师跟大家分享了JS之 不定宽溢出文本适配滚动的知识,今天跟大家分享下JS之 创建悬停折角纸叠效果的知识。
1 JS之 创建悬停折角纸叠效果参考文献:https://mp.weixin.qq.com/s/6cHqOv9eGprlm8mkivAauQ
折角折叠效果,在网站实际运用中也是非常多,当你将鼠标悬停在上面时,就会在某些网站上看到它的折角。在这里,我们仅用HTML与CSS来实现折角效果。
以下内容将具体讲解如何创建这个效果。在本文中,我们将文章分为两部分,在第一部分中,我们将创建基本结构。在第二部分中,我们将装饰结构。 首先,我们先使用HTML来创建一个转角折叠效果的结构。 在HTML代码中,我们将使用div标记创建一个基本div,并为其指定一个类名。 HTML代码如下:
web前端开发公众号,网站:www.webqdkf.com
web前端开发公众号
web前端开发公众号,网站:www.webqdkf.com
web前端开发公众号,网站:www.webqdkf.com
在本部分中,我们将仅使用CSS来修饰上部分中已创建的结构。
首先,我们设置基本div元素的样式,使其不具有折叠效果,然后再创建折叠效果,我们将使用CSS :: after伪元素。
将其放置在div框的右上角,将顶部和右侧边框设置为与父div元素的背景颜色匹配的颜色。
然后为左侧和底部边框赋予div背景颜色较深的阴影,当我们将鼠标悬停在框上时,我们还将使用悬停选择器来创建折叠效果。
<style>
h1 {
color: #19b0cb;
}
.Fold {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #19b0cb;
}
h3 {
margin: 20px;
padding: 20px;
color: #fff;
}
.Fold:after {
position: absolute;
content: '';
right: 0;
top: 0;
}
.Fold:hover:after {
transition-duration: 1s;
border-bottom: 50px solid black;
border-right: 50px solid white;
}
style>
以上就是这两个部分的内容,我们为悬停创建了折角效果。
![827193ddf3aa132d8c805f7ac9e77efd.png](https://img-blog.csdnimg.cn/img_convert/827193ddf3aa132d8c805f7ac9e77efd.png)
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>
web前端开发公众号,网站:www.webqdkf.com
title>
<style>
h1 {
color: #19b0cb;
}
.Fold {
position: absolute;
left: 50%;
top: 55%;
transform: translate(-50%, -50%);
width: 400px;
height: 200px;
background-color: #19b0cb;
}
h3 {
margin: 20px;
padding: 20px;
color: #fff;
}
.Fold:after {
position: absolute;
content: '';
right: 0;
top: 0;
}
.Fold:hover:after {
transition-duration: 1s;
border-bottom: 50px solid black;
border-right: 50px solid white;
}
style>
head>
<body>
<center>
<h1>
web前端开发公众号
h1>
<b>
web前端开发公众号,网站:<a href="http://www.webqdkf.com">www.webqdkf.coma>
b>
<div class="Fold">
<h3>
web前端开发公众号,网站:www.webqdkf.comh3>
div>
center>
body>
html>
最终效果如下:
![d4f4f0a7764c1a370f463cd4b85b19ed.gif](https://img-blog.csdnimg.cn/img_convert/d4f4f0a7764c1a370f463cd4b85b19ed.gif)
![43f308cf0a39b751973fbe9e2f5ebeba.gif](https://img-blog.csdnimg.cn/img_convert/43f308cf0a39b751973fbe9e2f5ebeba.gif)