通过CSS3中的伪元素实现折叠

最新推荐文章于 2022-09-23 14:11:35 发布
最新推荐文章于 2022-09-23 14:11:35 发布
阅读量90 收藏
点赞数
原文链接：http://www.cnblogs.com/yu0312chao/p/4917407.html
版权 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

  <style type="text/css">
      *{padding:0px;margin:0px;background:#fff;}
     .container{width:500px;height:300px;background-color:#36B11D;margin:100px auto;border-radius:10px;position:relative;-moz-border-radius:10px;-webkit-border-radius:10px;-ms-border-radius:10px;-o-border:40px solid #7201AA;}
	 .container:before{position:absolute;left:0px;top:0px;content:"";background:#fff;display:block;border:40px solid #7201AA;-webkit-border:40px solid #7201AA;-moz-border:40px solid #7201AA;
	 -ms-border:40px solid #7201AA;-o-border:40px solid #7201AA;border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent;-moz-border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent;-webkit-border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent;-ms-border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent;-o-border-color:transparent rgba(0,255,0,.5) rgba(0,220,0,.5) transparent; } 
	 .container:after{position:absolute;right:0px;top:0px;width:0px;content:"";border:40px solid #7201AA;background-color:#fff;-webkit-border:40px solid #7201AA;-moz-border:40px solid #7201AA;
	 -ms-border:40px solid #7201AA;-o-border:40px solid #7201AA;-moz-border-color:transparent transparent rgba(0,220,0,.5) rgba(0,255,0,.5);
	 -ms-border-color:transparent transparent rgba(0,220,0,.5) rgba(0,255,0,.5);-webkit-border-color:transparent transparent rgba(0,220,0,.5) rgba(0,255,0,.5);
	  border-color:transparent transparent rgba(0,220,0,.5) rgba(0,255,0,.5);box-shadow:-1px 1px 1px rgba(0,0,0,.5);-webkit-box-shadow:-1px 1px 1px rgba(0,0,0,.5);-ms-box-shadow:-1px 1px 1px rgba(0,0,0,.5);-moz-box-shadow:-1px 1px 1px rgba(0,0,0,.5);-o-box-shadow:-1px 1px 1px rgba(0,0,0,.5);}
  </style>
 </head>
 <body>
   <div class="container"></div>
 </body>
</html>

 

转载于:https://www.cnblogs.com/yu0312chao/p/4917407.html

weixin_30755393
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3实现折叠效果_使用CSS3创建灵活的折叠纸效果
Web design 教程小屋
07-09 1823
在本教程中，我们将学习使用CSS3功能（例如背景渐变和框阴影）创建灵活的（响应式）折叠纸效果，该功能可以为网站的内容区域提供漂亮的背景。 步骤1：设置<head> 让我们从制作一个非常基本HTML页面开始。 我们将使用HTML5，因为..为什么不呢？ <!DOCTYPE html> <html lang="en"> <head&g...
利用css实现折叠菜单功能
cumtzdlxm的博客
12-29 4920
CSS实现鼠标触发展开折叠的精美菜单 - LIEHUO.NET #abc { margin:0px;padding:0px;} #abc h1{margin:0px; color:blue; font-size:14px;} #abc li { list-style:none; display:block; width:178px; border:1px solid black; border-
Vue侧边栏缩放按钮效果实现
T8682828的博客
09-23 724
Vue侧边栏缩放按钮效果实现
页面折叠效果实现
xingzhong128的博客
08-02 5506
前言 Android手机屏幕相对较小，可能无法一次性将所有的元素都展示给用户，但有些情况下又确实需要将多个元素同时展示给用户。比如在外卖下单之后用户即希望能够查看当前外卖的状态也希望能够直接通过地图查看到外卖骑士的位置，地图控件和订单状态界面都很大，这时后可以通过折叠订单状态界面来展示更多的地图界面。除了上面描述的场景还有很多比如展示某些特殊菜单也可以使用这种交互方式，这里就来简单实现页面折叠效...
css实现折叠样式实现
qq_39176307的博客
05-06 4992
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、实现思路二、实现代码三、效果 前言 通过html+css实现折叠样式 一、实现思路 动态修改元素的高度，并添加过渡效果。 二、实现代码 html代码： <div class="fold"> <div class="child0">选项一</div> <div class="child1">选项11</div> <div .
CSS 折叠的菜单实现代码
09-25
本示例介绍了一个使用纯CSS实现的折叠菜单，具有良好的兼容性和美观的暖色调设计。 首先，我们来看一下HTML结构。这个折叠菜单主要由一个`<ul>`元素（id为"menu"）组成，其中包含多个`<li>`元素，每个`<li>`代表一...
CSS3实现动态信封折叠留言样式.zip
09-25
《CSS3实现动态信封折叠留言样式》 在网页设计中，吸引用户的注意力并提供良好的交互体验至关重要。CSS3作为现代网页设计的核心技术之一，以其丰富的样式和动态效果，为设计师提供了无限可能。本资源“CSS3实现动态...
CSS3垂直手风琴折叠菜单
04-02
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够创建交互性更强的用户体验，例如我们今天要讨论的“CSS3垂直手风琴折叠菜单”。手风琴菜单是一种常见的网页导航元素，它在...
css3折叠下拉菜单特效代码
03-20
首先，我们需要了解CSS3中的新选择器，如`:hover`、`:active`和`:focus`，这些是用于触发交互状态的关键。例如，`:hover`用于鼠标悬停时改变元素样式，`:active`表示元素被按下但未释放的状态，`:focus`则用于元素...
CSS3实现3D纸片折叠动画.zip
11-17
在本项目"CSS3实现3D纸片折叠动画"中，我们主要探讨的是如何利用现代Web技术，特别是CSS3，来创建引人入胜的3D视觉效果。这个压缩包包含了一个实例，展示了如何通过CSS3的转换（transform）属性和透视（perspective...
小程序实现之—css伪元素实现带框加号
txfyteen的专栏
11-17 6623
背景：基于小程序包大小的限制，使用css伪元素实现带框加号。减少包体积。 图片效果如下： .add { border: 1px solid; width: 100px; height: 100px; color: #ccc; transition: color .25s; position: relative; } ...
巧妙利用before和after伪类实现文字的展开和收起
dasuo1170的博客
11-10 353
需求：一段文字，当收起的时候，显示4行，并且多余4行的部分用省略号表示，关键是在省略号前面留有空白部分来放一些图标等东西；展开的时候，全部显示。 例如下面的示例图： 收起的时候： 展开的时候： 在不用JS的情况下，如何能只用CSS就做到呢？ (一)先看下html结构 <div class="summary" data-content="天空为什么是蓝色×××...
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
使用 ReactJs 编写的简单旅行计划器（附源代码）.zip
07-24
项目：使用 ReactJS 编写的简单旅行计划器（附源代码） ReactJs 中的简单旅行计划器是一个简单的 JavaScript 项目。该项目是 ReactJS 中待办应用程序的一个简单示例。 关于项目 Simple Trip Planner In Reactjs 是使用ReactJS开发的。这个项目很容易做一种应用程序。这个项目使用 React 库来完成任务。为了运行这个项目，你必须在系统中安装 NodeJs。当你运行这个项目时，你的应用程序从主页开始。从那里你可以导航到菜单。你只能将计划添加到你的书中。你还可以对旅行进行分类。你所要做的就是输入日期和地点，然后选择你想要的旅行计划类型。 要运行此项目，您需要 在计算机上安装ReactJS和 NodeJs，并使用现代浏览器，例如Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
俄罗斯方块的python代码
07-24
这段Python代码实现了一个简单的俄罗斯方块游戏，使用Pygame库处理图形和用户输入。游戏初始化Pygame库并设置屏幕大小为800x600像素，定义不同颜色和形状的方块。游戏由一个`Tetris`类管理，负责游戏状态和逻辑操作，每个方块由一个`Block`类表示，包含其形状、颜色、位置等信息。 在主循环中，游戏通过事件处理机制响应用户的键盘输入，箭头键用于移动和旋转方块，空格键用于快速下落。游戏会检测方块是否与已有的方块或边界发生碰撞，如发生碰撞，当前方块会固定在场地上并生成新方块。填满的行会被清除，玩家获得相应分数。 游戏通过一个二维数组维护场地状态，每个元素表示一个单元格是否被占据，通过检查和清除单元格实现行消除。整个游戏不断刷新屏幕更新显示，确保流畅运行，绘制背景、方块和边框，使界面美观易理解。 总体而言，这段代码展示了如何使用Pygame库实现经典俄罗斯方块游戏，包括图形绘制、用户输入处理和基本游戏逻辑，让玩家通过移动和旋转方块消除行并获得高分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值