如何使用纯CSS实现打开内容弹窗的交互动画(附源码)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于如何使用纯CSS实现打开内容弹窗的交互动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果预览

如何使用纯CSS实现打开内容弹窗的交互动画(附源码)

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,一个名为 .main 的容器中包含 1 个链接:

<div class="main">     <a href="#" class="open-popup">open popup</a> </div>

设置页面的基本属性:无边距、全高、忽略溢出:

body {     margin: 0;     height: 100vh;     overflow: hidden; }

设置主界面的背景和其中按钮的布局方式:

.main {     height: inherit;     background: linear-gradient(dodgerblue, darkblue);     display: flex;     align-items: center;     justify-content: center; }

设置按钮样式:

.open-popup {     box-sizing: border-box;     color: white;     font-size: 16px;     font-family: sans-serif;     width: 10em;     height: 4em;     border: 1px solid;     text-align: center;     line-height: 4em;     text-decoration: none;     text-transform: capitalize; }

设置按钮悬停效果:

.open-popup:hover {     border-width: 2px; }

至此,主界面完成,接下来制作弹窗。
在 dom 中增加的 .popup 小节表示弹窗内容,其中的 <a> 是返回按钮,<p> 是具体内容,这里我们把内容简化为一些陆生动物的 unicode 字符,为了能够触发这个弹窗,设置 .popupidterrestrial,并在 .main<a> 链接中指向它:

<div class="main">     <a href="#terrestrial" class="open-popup">terrestrial animals</a> </div> <section id="terrestrial" class="popup">     <a href="#" class="back">&lt; back</a>     <p>

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何使用纯CSS实现打开内容弹窗的交互动画(附源码)

发表评论

提供最优质的资源集合

立即查看 了解详情