<!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. Mybatis源码解析之执行SQL语句

    作者:郑志杰 mybatis 操作数据库的过程 // 第一步:读取mybatis-config.xml配置文件 InputStream inputStream = Resources.getResou ...

  2. Java开发如何通过IoT边缘ModuleSDK进行协议转换？

    摘要:使用ModuleSDK开发插件应用,接入其他协议设备(如HTTP请求数据),将其他协议的数据转化为MQTT协议JSON数据上报到IoTDA. 本文分享自华为云社区<[华为云IoTEdge开 ...

  3. Typora快捷键--实用

    一.字体编辑 大小:ctr + 数字 或 ctr + 加减号 或 ### 加粗:ctr + b 倾斜:ctr + i 下划线:ctr + u 删除线:alt + shift + 5 上标:^ + 字体 ...

  4. ArcObjects SDK开发 021 开发框架搭建-FrameWork包设计

    1.框架引擎部分 引擎模块其实就是之前我们说的App-Command-Tool模块,通过这个模块,把系统的主干框架搭建起来. 其中大部分出现在菜单以及工具条上的按钮都会继承这个框架定义ICommand ...

  5. JavaScript：是一种什么样的编程语言？

    有关JavaScript的发展历程,百度百科上已经说得很清楚了,这里不赘述,只是想谈一下我刚刚接触JS的一些感触. 作为后端java开发者,初次学习JS的时候,真的觉得JS非常的不严谨,很混乱.由于它 ...

  6. python 集合常用操作

    集合的特性 无序.不重复.可迭代 常用api 创建一个集合 需要显式地使用set()方法来声明,如果使用字面量{}来声明解析器会认为这是一个字典. add() 往集合中添加一个元素 demo = se ...

  7. 在生产中部署 ES2015+ 代码

    大多数 Web 开发人员都喜欢编写具有所有最新语言特性的 JavaScript--async/await.类.箭头函数等.然而,尽管事实上所有现代浏览器都可以运行 ES2015+ 代码并原生支持我刚才 ...

  8. [OpenCV实战]39 在OpenCV中使用ArUco标记的增强现实

    文章目录 1 什么是ArUco标记? 2 在OpenCV中生成ArUco标记 3 检测Aruco标记 4 增强现实应用 5 总结和代码 5.1 生成aruco标记 5.2 使用aruco增强现实 6 ...

  9. Android applink 踩坑指南

    Android applink 踩坑指南 原理 接入步骤 将链接与activity关联起来 加入meta data 生成身份验证JSON 真机测试 结论 官方文档 原理 与url scheme不同的地 ...

  10. vsftp安装文档

    vsftp安装文档 张京坤 20190325 ftp安装 安装环境:centOS7.6 安装vsfptd 在线安装:服务器联网状态下 检查是否安装了vsftpd:rpm -qa |grep vsftp ...