收缩按钮

最新推荐文章于 2024-05-20 10:28:29 发布
最新推荐文章于 2024-05-20 10:28:29 发布
阅读量504 收藏
点赞数
分类专栏： CSS(3) 
<!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="">
    <style type='text/css'>
        * {
            margin: 0;
            padding: 0;
        }
        /* Icon 1 */
        
        #nav-icon1,
        #nav-icon2,
        #nav-icon3,
        #nav-icon4 {
            width: 60px;
            height: 45px;
            position: relative;
            margin: 50px auto;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .5s ease-in-out;
            -moz-transition: .5s ease-in-out;
            -o-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
            cursor: pointer;
        }
        
        #nav-icon1 span,
        #nav-icon3 span,
        #nav-icon4 span {
            display: block;
            position: absolute;
            height: 9px;
            width: 100%;
            background: #d3531a;
            border-radius: 9px;
            opacity: 1;
            left: 0;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .25s ease-in-out;
            -moz-transition: .25s ease-in-out;
            -o-transition: .25s ease-in-out;
            transition: .25s ease-in-out;
        }
        
        #nav-icon1 span:nth-child(1) {
            top: 0px;
        }
        
        #nav-icon1 span:nth-child(2) {
            top: 18px;
        }
        
        #nav-icon1 span:nth-child(3) {
            top: 36px;
        }
        
        #nav-icon1.open span:nth-child(1) {
            top: 18px;
            -webkit-transform: rotate(135deg);
            -moz-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            transform: rotate(135deg);
        }
        
        #nav-icon1.open span:nth-child(2) {
            opacity: 0;
            left: -60px;
        }
        
        #nav-icon1.open span:nth-child(3) {
            top: 18px;
            -webkit-transform: rotate(-135deg);
            -moz-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }
        /* Icon 2 */
        
        #nav-icon2 {}
        
        #nav-icon2 span {
            display: block;
            position: absolute;
            height: 9px;
            width: 50%;
            background: #d3531a;
            opacity: 1;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
            -webkit-transition: .25s ease-in-out;
            -moz-transition: .25s ease-in-out;
            -o-transition: .25s ease-in-out;
            transition: .25s ease-in-out;
        }
        
        #nav-icon2 span:nth-child(even) {
            left: 50%;
            border-radius: 0 9px 9px 0;
        }
        
        #nav-icon2 span:nth-child(odd) {
            left: 0px;
            border-radius: 9px 0 0 9px;
        }
        
        #nav-icon2 span:nth-child(1),
        #nav-icon2 span:nth-child(2) {
            top: 0px;
        }
        
        #nav-icon2 span:nth-child(3),
        #nav-icon2 span:nth-child(4) {
            top: 18px;
        }
        
        #nav-icon2 span:nth-child(5),
        #nav-icon2 span:nth-child(6) {
            top: 36px;
        }
        
        #nav-icon2.open span:nth-child(1),
        #nav-icon2.open span:nth-child(6) {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        
        #nav-icon2.open span:nth-child(2),
        #nav-icon2.open span:nth-child(5) {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        
        #nav-icon2.open span:nth-child(1) {
            left: 5px;
            top: 7px;
        }
        
        #nav-icon2.open span:nth-child(2) {
            left: calc(50% - 5px);
            top: 7px;
        }
        
        #nav-icon2.open span:nth-child(3) {
            left: -50%;
            opacity: 0;
        }
        
        #nav-icon2.open span:nth-child(4) {
            left: 100%;
            opacity: 0;
        }
        
        #nav-icon2.open span:nth-child(5) {
            left: 5px;
            top: 29px;
        }
        
        #nav-icon2.open span:nth-child(6) {
            left: calc(50% - 5px);
            top: 29px;
        }
        /* Icon 3 */
        
        #nav-icon3 span:nth-child(1) {
            top: 0px;
        }
        
        #nav-icon3 span:nth-child(2),
        #nav-icon3 span:nth-child(3) {
            top: 18px;
        }
        
        #nav-icon3 span:nth-child(4) {
            top: 36px;
        }
        
        #nav-icon3.open span:nth-child(1) {
            top: 18px;
            width: 0%;
            left: 50%;
        }
        
        #nav-icon3.open span:nth-child(2) {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        
        #nav-icon3.open span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        
        #nav-icon3.open span:nth-child(4) {
            top: 18px;
            width: 0%;
            left: 50%;
        }
        /* Icon 4 */
        
        #nav-icon4 {}
        
        #nav-icon4 span:nth-child(1) {
            top: 0px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }
        
        #nav-icon4 span:nth-child(2) {
            top: 18px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }
        
        #nav-icon4 span:nth-child(3) {
            top: 36px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }
        
        #nav-icon4.open span:nth-child(1) {
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            top: -3px;
            left: 8px;
        }
        
        #nav-icon4.open span:nth-child(2) {
            width: 0%;
            opacity: 0;
        }
        
        #nav-icon4.open span:nth-child(3) {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
            top: 39px;
            left: 8px;
        }
    </style>

    <title>海草海草海草---飘起来</title>
</head>

<body>
    <div id="nav-icon1">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div id="nav-icon2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div id="nav-icon3">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div id="nav-icon4">
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
<script src="./jquery-3.0.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function() {
            $(this).toggleClass('open');
        });
    });
</script>

</html>
E_li_na
关注
专栏目录
ant design pro v5 自定义侧边栏收缩按钮位置
m0_55613022的博客
02-26 1514
ant design pro v5 自定义侧边栏收缩按钮位置 图： 1.升级ant design pro v5以后layout隐藏，相关配置放到了app.tsx layout 的配置代码如下： export const layout: RunTimeLayoutConfig = ({ initialState }) => { return { rightContentRender: () => <RightContent />, disableContentMa
伸缩按钮导航菜单
04-11
伸缩按钮导航菜单 在很多应用程序中的有应用
Qt 按钮收缩，点击show按钮，在按钮后面缓缓展开三个按钮，再次点击show按钮，后面的三个按钮缓缓缩回
05-16
最近做的一个项目涉及，返回桌面，软件在桌面悬浮一个按钮，当点击这个按钮之后在按钮后面展开一排其他功能按钮的入口，再次点击之后，展开的按钮回收缩回。按钮的展开缩回有动画效果
点击按钮收缩功能
weixin_30236595的博客
08-24 538
要实现的效果就是，当点击长button时，长button相对应的下面两个段button会收进长button里，并且，下面的其他组件（这里是button）会相应的往上移动。 左图为层级结构，右图为运行效果。 注：我在Panel（3）上加了一个Vertical Layout Group组件用来布局，使里面三个panel纵向排列。 using System.Collections; ...
有趣的css - 背景收缩动画按钮
最新发布
设计师工作日常
05-20 347
借助 css transition 属性绘制出一个背景收缩交互的一个按钮。
一个简单的点击收缩代码
B371977898的博客
02-02 255
一个简单的点击收缩代码效果，只需编写少量的代码 HTML代码 1<divonclick="showmenu(1)"style="cursor:hand;">点击收缩</div> 2<divid="subitem1">虎年大吉虎年大吉<br/>虎年大吉虎年大吉</div> 3 4<divo...
CSS按钮伸缩动画
qq_52436802的博客
05-31 1064
CSS按钮横向伸缩动画小技巧：添加margin-left属性
CSS3+SVG弹性收缩按钮动画特效特效代码
03-20
【CSS3+SVG弹性收缩按钮动画特效特效代码】是一种利用现代网页技术实现的交互式设计元素，主要用于提高用户体验。此特效结合了CSS3的样式控制和SVG（可缩放矢量图形）的强大功能，创造出一个在鼠标悬停时能够产生...
纯css3基于svg实现弹性收缩按钮动画特效源码.zip
11-20
本资源“纯css3基于svg实现弹性收缩按钮动画特效源码.zip”提供了使用纯CSS3和SVG（可缩放矢量图形）来创建弹性收缩按钮动画的方法。 SVG是一种XML格式的图形描述语言，它可以创建出高质量、分辨率无关的矢量图像，...
CSS3 SVG弹性收缩按钮动画特效.zip
07-05
【CSS3 SVG弹性收缩按钮动画特效】 在网页设计中，交互性和用户体验是至关重要的元素，而按钮作为用户与页面交互的主要界面之一，其设计和功能往往直接影响到用户的体验感。CSS3与SVG（可缩放矢量图形）的结合，为...
带有收缩按钮的 textview
qq906786621的专栏
08-23 451
https://github.com/freecats/TextViewExpandableAnimation
弹性伸缩按钮jquery焦点图
01-03
弹性伸缩按钮jquery焦点图是一款兼容主流浏览器的jquery全屏图片轮播特效。适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
按钮点击缩放的效果
12-02
需求：实现按钮点击缩放的效果，看上去好看一点，用ScaleAnimation实现
gojs可自由伸缩拓扑图
08-31
gojs绘制可自由伸缩拓扑图，动态关联数据，可实现每隔一段时间自动发请求查询数据重绘画布，功能强大，亲测可用，有bug的可以提出交流（下载后出不来的，是样式未进行设置，需增加样式） <style> *{margin: 0;padding: 0;} html,body,#sample,#myDiagramDiv{width: 100%;height: 100%;} </style>
点击按钮 按钮缩放动画：
qq_36895346的博客
12-18 1604
1,有时候在项目开发中遇到一些按钮的点击动画，下面就写一个比较简单的按钮缩放效果首先我们的在res目录下amin文件下创建一个Xml文件夹用来设置动画的效果， <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:fromXScale="1.0" android:toXSc
jQuery点击按钮实现收缩隐藏功能
一片天空
10-31 1331
一、实现的功能 点击title区域的按钮，收缩/隐藏相应的内容区域，并改变按钮中的文案。 二、实现方法 采用jQuery中的slideToggle() 方法 定义和用法 slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。 如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。 语法 $(selector).slideTo...
jquery+css侧边栏收缩-按钮旋转
霹雳xiao虾
07-23 384
jquery+css侧边栏收缩-按钮旋转。
伸缩按钮的实现
auccy的博客
02-25 465
写了一个按钮伸缩的控件，实现如下： FlexibleBtn.h文件 #ifndef __FlexibleBtn__ #define __FlexibleBtn__ #include "cocos2d.h" #include "ui/CocosGUI.h" USING_NS_CC; class FlexibleBtn:public Node { public: FlexibleBtn(); ~FlexibleBtn(); struct FlexibleData { int type;
减小android button的大小
热门推荐
zfireear的博客
03-29 1万+
当我们仅需要按钮的大小恰当包裹其中文本的大小，尽可能减小多余的空白空间。第一种方式：我们可以直接设置button属性：minHeight和minWidth例如:android:minHeight="0dp" android:minWidth="0dp"例如：<Button android:id="@+id/btn1" android:layout_width="wrap_conten
在ant design vue1.5版本中，有个嵌套子表格，当子表无数据时不显示展开图标，有全展开和全收缩按钮。点击全展开按钮，展开所有的子表。点击全收缩按钮，收缩所有展开的子表。如何实现，将完整代码展示出来
05-19
当点击收缩按钮时，根据名称找到对应的记录，并将其从 `expandedRowKeys` 中删除。 然后，在 `expandedRowRender` 中定义展开后的子表格内容。如果子表格没有数据，就返回 `null`，否则渲染一个新的 `<a-table>` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值