CSS3--点击弹出菜单动画

<!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--点击弹出菜单动画的更多相关文章

iOS-一个弹出菜单动画视图开源项目分享
相似于Tumblr公布button的弹出视图使用非常easy: 初始化: @property (nonatomic, strong) XWMenuPopView *myMenuPopView; - ...
html + js 右点击弹出菜单
页面引用jar 包 <link rel="stylesheet" href="../../style/zui.min.css" type="t ...
鼠标右键点击弹出菜单（jQuery）
禁用浏览器默认事件,此处是兼容写法 $(document).contextmenu(function (e) { var event = e || window.event; if (event.pr ...
CSS3圆环动态弹出菜单
体验效果:http://hovertree.com/texiao/css3/44/ 代码如下: <!DOCTYPE html> <html lang="zh"&g ...
Mui --- 弹出菜单
mui框架内置了弹出菜单插件,弹出菜单显示内容不限,但必须包裹在一个含.mui-popover类的div中,如下即为一个弹出菜单内容: <div id="popover" c ...
FloatActionButton弹出菜单
浮动按钮的弹出菜单动画将几个按钮重叠摆放,使用ValueAnimator更新按钮的坐标实现. 布局 <FrameLayout android:layout_width="match_ ...
jQuery之点击弹出图标环形菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
CSS3 页面中展示邮箱列表点击弹出发送邮件界面
CSS3 页面中展示邮箱列表点击弹出发送邮件界面代码: <!DOCTYPE html> <html> <head> <meta charset=" ...
PopupWindow-----点击弹出 PopupWindow 初始化菜单
/** * 点击弹出 PopupWindow 初始化菜单 */ private void initPopupWindow() { PopupWindowAdapter adapter = new Po ...
微信小程序动画之弹出菜单
用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...

随机推荐

UBOOT 启动流程
一.概述 uboot 的启动流程在网上有很多大佬记录,但是了对于像我这样的新手就有些困难了,而我也不做 uboot 相关的工作,所以没必去研究代码,这里我特意整理了一下,以流程图的形式展现代码执行的流 ...
《HTTP权威指南》– 6.代理
代理的概念: Web代理服务器是网络的中间实体.位于客户端和服务器之间,扮演"中间人"的角色,在各端点之间来回传送HTTP报文. 私有和共享代理: 代理服务器可以是某个客户端专用的 ...
python操作MySQL数据库连接(pymysql)
目录一:python操作MySQL 1.python如何操作MySQL? 2.什么是 PyMySQL? 二:PyMySQL 安装 1.方法一: 2.方法二: 三:pyMySQL模块基本使用 1.py ...
Jmeter之随机变量元件与用户自定义变量元件区别及使用
用随机变量(random variable)与用户自定义变量(User defined variables)的区别: 随机变量:在同个线程或者不同线程时,每个次循环执行时值都会重新生成用户自定义变量 ...
第二篇:前端基础之CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
第三章 --------------------XAML的属性和事件
1.XAML注释是什么样子的? 在之前的章节有提起过,但是这一节我还是想系统的学习XAML,XAML的注释如下  Notice:在注释的部分编译器是不编 ...
RedisTemplate设置redis的key时出现\xac\xed\x00\x05t\x00\x0f前缀
1.问题描述使用redisTemplate设置redis的key-value,程序运行没有问题,但是却在redis客户端查不到设置的key-value. 2.产生原因出现这种乱码前缀的原因是没有进 ...
c语言学习总结（原创）
什么是标识符? 标识符是用来标识变量.函数.类.模块,或者任何其他用户自定义项目的名称,用它来命名程序正文中的一些实体,比如函数名.变量名.类名.对象名等.如:int a1=0; const b1=& ...
单向绑定vs双向绑定、单向数据流vs双向数据流
参考文章:http://www.qb5200.com/article/482839.html 单双向绑定指的是View层跟Model层之间的映射关系单向绑定vs双向绑定 react采用单向绑定,vu ...
P5934 [清华集训2012]最小生成树
简要题意给你一个 $N$ 个点,$M$ 条边的无向连通带权图.给定一条边 $(u,v,L)$,请问需要在原图中删除多少条边,使得将 $(u,v,L)$ 插入图后,它既可能在最小生 ...

CSS3--点击弹出菜单动画

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

随机推荐

热门专题