<!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. C++编程笔记(GPU并行编程-2)

    C++与CUDA 内存管理 封装 利用标准库容器实现对GPU的内存管理 #include <iostream> #include <cuda_runtime.h> #inclu ...

  2. WinUI（WASDK）使用MediaPipe检查手部关键点并通过ML.NET进行手势分类

    前言 之所以会搞这个手势识别分类,其实是为了满足之前群友提的需求,就是针对稚晖君的ElectronBot机器人的上位机软件的功能丰富,因为本来擅长的技术栈都是.NET,也刚好试试全能的.NET是不是真 ...

  3. Win10系统安装U盘，安装纯净版Win10的通用教程

    安装前准备:1.准备8G或8G以上U盘(32G以内).2.制作U盘会格式化U盘,U盘内的重要文件也要事先备份好.操作步骤:1.打开微软下载WIN10网址:(如果网址无法打开,可以下载解压运行附件内的工 ...

  4. 痞子衡嵌入式：Farewell, 我的写博故事2022

    -- 题图:苏州荷塘月色 2022 年的最后一天,写个年终总结.困扰大家三年之久的新冠疫情终于在 12 月全面放开了,痞子衡暂时还没有阳,计划坚持到总决赛.对于 2023 年,痞子衡还是充满期待的,慢 ...

  5. c语言学习总结（原创）

    什么是标识符? 标识符是用来标识变量.函数.类.模块,或者任何其他用户自定义项目的名称,用它来命名程序正文中的一些实体,比如函数名.变量名.类名.对象名等.如:int a1=0; const b1=& ...

  6. JavaWeb项目编译前后的目录结构

    JavaWeb项目编译前后的目录结构 编译前 页面和视图都放在webapp目录下 编译后 webapps WEB-INF

  7. [OpenCV实战]8 深度学习目标检测网络YOLOv3的训练

    目录 1 数据集 1.1 下载openImages雪人数据[约1.5小时] 1.2 训练集测试集拆分 2 Darknet 2.1 下载并构建Darknet 2.2 修改代码以定期保存模型文件 2.3 ...

  8. [seaborn] seaborn学习笔记1-箱形图Boxplot

    文章目录 1 箱形图Boxplot 1. 基础箱形图绘制 Basic boxplot and input format 2. 自定义外观 Custom boxplot appearance 3. 箱型 ...

  9. Java基础篇——IO流

    流 内存和存储设备之间传输数据的通道 流的分类 按方向划分 输入流(读):存储设备→内存 输出流(写):内存→存储设备 按单位划分. 字节流:以字节为单位,可以读写所有数据 字符流:以字符为单位,只能 ...

  10. [WPF]使用Fody提高效率

    下载安装及使用 代码实例 public class Person:INotifyPropertyChanged { public event PropertyChangedEventHandler P ...