HTML与CSS如何创建悬停折角纸叠效果

折角折叠效果，在网站实际运用中也是非常多，当你将鼠标悬停在上面时，就会在某些网站上看到它的折角。在这里，我们仅用HTML与CSS来实现折角效果。
以下内容将具体讲解如何创建这个效果。在本文中，我们将文章分为两部分，在第一部分中，我们将创建基本结构。在第二部分中，我们将装饰结构。
首先，我们先使用HTML来创建一个转角折叠效果的结构。
在HTML代码中，我们将使用div标记创建一个基本div，并为其指定一个类名。
HTML代码如下：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head> <meta charset="utf-8"> <title> web前端开发公众号，网站：www.webqdkf.com</title> </head> <body> <center> <h1> web前端开发公众号</h1> <b> web前端开发公众号，网站：<a href="http://www.webqdkf.com">www.webqdkf.com</a></b> <div class="Fold"> <h3> web前端开发公众号，网站：www.webqdkf.com</h3> </div> </center>
</body>
</html>

在本部分中，我们将仅使用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>

以上就是这两个部分的内容，我们为悬停创建了折角效果。

<!DOCTYPE html>
<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.com</a></b> <div class="Fold"> <h3> web前端开发公众号，网站：www.webqdkf.com</h3> </div> </center>
</body>

HTML与CSS如何创建悬停折角纸叠效果相关推荐

纯CSS实现聊天框小尖角、气泡效果
经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...
css小三角气泡效果,纯CSS实现聊天框小尖角、气泡效果
那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: 复制代码代码如下: .arrow { width:0; height:0; font-size:0; border:solid 10px ...
纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
html给图标加角标,HTML+CSS入门如何使用CSS创建一个图片角标
本篇教程介绍了HTML+CSS入门如何使用CSS创建一个图片角标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 角标是一个给某元素标明"New",& ...
01.个人项目难点汇总2 css定制科技感缺角边框
01.CSS3实现缺角矩形,折角矩形以及缺角边框前言前几天偶然看到缺角矩形这个功能,脑袋中第一想法是,搞个绝对定位的伪元素,哪里需要挡哪里,或者找UI小哥聊聊天,忽然灵光一闪,想起之前翻过的< ...
html5 悬停边框,Html，css：在悬停时更改行的边框颜色(Html,css: Change a row's border colow on hover)...
Html,css:在悬停时更改行的边框颜色(Html,css: Change a row's border colow on hover) 我正在使用DataTables,我试图在行悬停时将行的顶部和 ...
css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像？
英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp翻译 | web前端开发 ...
css 菜单栏悬停_在CSS中构建悬停菜单
css 菜单栏悬停 A good menu design is an important part of any website or web app UI. Using only modern HT ...
backgroundLinearGradient线性渐变制作折角效果
backgroundLinearGradient线性渐变,制作折角效果语法线性渐变 - 从上到下(默认情况下) background: linear-gradient(direction, col ...
在CSS中创建径向菜单
本文翻译自:Creating a Radial Menu in CSS How do I create a menu which looks like this... 如何创建一个看起来像这样的菜单. ...

HTML与CSS如何创建悬停折角纸叠效果

HTML与CSS如何创建悬停折角纸叠效果相关推荐

最新文章

热门文章