<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

        <title>CSS3--点击弹出菜单动画</title>

        <script src='rem.js'></script>

        <!--公用css-->

        <style>

        .action{position:fixed;z-index:98;bottom:20%;right:0.3rem;display:flex;flex-direction:column;align-items:flex-end}

        .action.open .group{width:5.6rem}

        .action .option .btn.open{transform:rotate(45deg);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAABXUlEQVRoge3a0a3CMBBE0SnBJaSElEAJdEopr4RXQkqAjzDSCpEIsNc7tvZK/Np7hIDYAsiyLMuy4VoBlOghTioAllaLrQD+AfxBE10A3ABs2Getitj786WGJpbzVaMLduQdeuhXLGdbWiyshnbD2g1U0O5Yu1E0uhvWbhiF7o61G/dGh2HtAL3Q4Vg7iDdaBmsH8kLLYZkHWhbLWqLlsawFehgsq0EPh2W/oIfFsm/Qw2PZJ+hpsOwMPR2WHaGnxLJ36Gmx7Ag9JRZ4/5lVuC5y6Qg7Jfro2zj6usils58ehTuypn3yOzsN+puHiuHRvzxBDYuueVwcDt3i2XgYdMuDgDza49Qji/Y84smhe5xnZdA9D+/h6IibijB05LVMd7TCHVQ3tALWzuKKVsLamVzQiljmgl6w/9lLDcte0RuAS+2i63MhNSwjegNwbbXoCk0sK2jwzmZZlmVZ5x6bMoW02l6QZgAAAABJRU5ErkJggg==)}

        .action .group{display:flex;width:0.96rem;transition:width 1s;-moz-transition:width 1s;-webkit-transition:width 1s;-o-transition:width 1s;height:0.96rem;overflow:hidden;background-color:#00B0F0;position:relative;border-radius:0.48rem}

        .action .buttons{flex:1;width:5.6rem;display:flex;overflow-y:hidden}

        .action .buttons .item{flex:1;width:1.8rem;height:0.96rem;background:transparent no-repeat center;background-size:contain;white-space:nowrap;display:flex;flex-direction:column;align-items:center;justify-content:space-around;font-size:0.24rem;color:#001E50}

        .action .option{width:0.96rem;height:0.96rem;font-size:0}

        .action .option .btn.close{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAABXUlEQVRoge3a0a3CMBBE0SnBJaSElEAJdEopr4RXQkqAjzDSCpEIsNc7tvZK/Np7hIDYAsiyLMuy4VoBlOghTioAllaLrQD+AfxBE10A3ABs2Getitj786WGJpbzVaMLduQdeuhXLGdbWiyshnbD2g1U0O5Yu1E0uhvWbhiF7o61G/dGh2HtAL3Q4Vg7iDdaBmsH8kLLYZkHWhbLWqLlsawFehgsq0EPh2W/oIfFsm/Qw2PZJ+hpsOwMPR2WHaGnxLJ36Gmx7Ag9JRZ4/5lVuC5y6Qg7Jfro2zj6usils58ehTuypn3yOzsN+puHiuHRvzxBDYuueVwcDt3i2XgYdMuDgDza49Qji/Y84smhe5xnZdA9D+/h6IibijB05LVMd7TCHVQ3tALWzuKKVsLamVzQiljmgl6w/9lLDcte0RuAS+2i63MhNSwjegNwbbXoCk0sK2jwzmZZlmVZ5x6bMoW02l6QZgAAAABJRU5ErkJggg==)}

        .action .option .btn{width:0.96rem;height:0.96rem;border-radius:100%;background:transparent no-repeat center;background-size:0.44rem}

        </style>

    </head>

    <body>

        <div id="app">

            <!-- DIALOG 右侧操作-->

            <div class="action" :class="{'open' : actionStatus}">

                <div class="group">

                    <div class="buttons">

                        <div class="item">配装器</div>

                        <div class="item">金融计算器</div>

                        <div class="item">参数配置</div>

                    </div>

                    <div class="option">

                        <div class="btn close" v-if="actionStatus" @click="toggleAction">关闭</div>

                        <div class="btn open" v-if="!actionStatus" @click="toggleAction">展开</div>

                    </div>

                </div>

            </div>

        </div>

    </body>

    <script src="vue.js"></script>

    <script>

        var app = new Vue({

            el:'#app',

            data() {

                return {

                    actionStatus: false, // 浮动动按钮状态，未打开

                }

            },

            created() {},

            methods:{

                toggleAction() {

                    this.actionStatus = !this.actionStatus

                },

            },

        })

    </script>

</html>

CSS3--点击弹出菜单动画的更多相关文章

  1. iOS-一个弹出菜单动画视图开源项目分享

    相似于Tumblr公布button的弹出视图 使用非常easy: 初始化: @property (nonatomic, strong) XWMenuPopView *myMenuPopView; - ...

  2. html + js 右 点击 弹出 菜单

    页面 引用jar 包 <link rel="stylesheet" href="../../style/zui.min.css" type="t ...

  3. 鼠标右键点击弹出菜单（jQuery）

    禁用浏览器默认事件,此处是兼容写法 $(document).contextmenu(function (e) { var event = e || window.event; if (event.pr ...

  4. CSS3圆环动态弹出菜单

    体验效果:http://hovertree.com/texiao/css3/44/ 代码如下: <!DOCTYPE html> <html lang="zh"&g ...

  5. Mui --- 弹出菜单

    mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...

  6. FloatActionButton弹出菜单

    浮动按钮的弹出菜单动画 将几个按钮重叠摆放,使用ValueAnimator更新按钮的坐标实现. 布局 <FrameLayout android:layout_width="match_ ...

  7. jQuery之点击弹出图标环形菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  8. CSS3 页面中展示邮箱列表点击弹出发送邮件界面

    CSS3 页面中展示邮箱列表点击弹出发送邮件界面 代码: <!DOCTYPE html> <html> <head> <meta charset=" ...

  9. PopupWindow-----点击弹出 PopupWindow 初始化菜单

    /** * 点击弹出 PopupWindow 初始化菜单 */ private void initPopupWindow() { PopupWindowAdapter adapter = new Po ...

  10. 微信小程序动画之弹出菜单

    用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...

随机推荐

  1. 【Java SE进阶】Day02 Collection、Iterator、泛型

    一.Collection集合 1.概述 数组存元素,集合存对象(类型可以不一样) 2.框架分类 单列:Collection List ArrayList LinkedList Set HashSet ...

  2. 【sqoop】简介、原理、安装配置测试、导入导出案例、脚本打包、常见命令及参数介绍、常用命令举例

    一.sqoop简介 用于在Hadoop(Hive)与传统的数据库(mysql.oracle...)之间进行数据的传递,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等 ...

  3. [机器学习] PCA主成分分析原理分析和Matlab实现方法

    转载于http://blog.csdn.net/guyuealian/article/details/68487833 网上关于PCA(主成分分析)原理和分析的博客很多,本博客并不打算长篇大论推论PC ...

  4. （一）elasticsearch 编译和启动

    1.准备 先从github官网上clone elasticsearch源码到本地,选择合适的分支.笔者这里选用的是7.4.0(与笔者工作环境使用的分支一致),此版本编译需要jdk11. 2.编译 Re ...

  5. 聚合查询、分组查询、ORM中如何给表再次添加新的字段、F与Q查询、ORM查询优化、ORM事务操作、ORM常用字段类型、ORM常用字段参数、Ajax、数据编码格式（Content-Type）、ajax携带文件数据

    今日内容 聚合查询 在ORM中支持单独使用聚合函数,需要使用aggregate方法. 聚合函数:Max最大.Min最小.Sum总和.Avg平均.count统计 from django.db.model ...

  6. 如何在es中查询null值

    目录 1.背景 2.需求 3.准备数据 3.1 创建mapping 3.2 插入数据 4.查询 name字段为null的数据 5.查询address不存在或值直接为null的数据 6.参考链接 1.背 ...

  7. mov eax,dword ptr[0x00aff834] 和 lea eax,[0x00aff834]区别

    mov eax,dword ptr[0x00aff834] 和 lea eax,[0x00aff834]区别 mov eax,[内存]是将内存的值赋值给eax,而lea是直接将地址值赋值给eax 因此 ...

  8. JDK的下载与安装-环境变量的配置

    JDK的下载与安装 环境变量的配置 配置环境变量作用 开发Java程序,需要使用JDK中提供的工具,工具在JDK9安装目录的 bin 目录下. 在DOS命令行下使用这些工具,就要先进入到JDK的bin ...

  9. Python 异步集群使用

    目前在做Python项目用到同步和异步的方法使用Redis单机,现在要增加兼容Redis集群.也就说当前项目用到中以下4种Python使用Redis的方法都用到了. - 同步 异步 单机 涉及 涉及 ...

  10. Failed to find "GL/gl.h" in "/usr/include/libdrm"

    环境qt5.12.3 deepin15.10 使用cmake构建项目时报错,网上查询了一下发现时未安装opengl,于是安装便是了 sudo apt install mesa-common-dev 问 ...