代码编织梦想

呼出按钮动画

对于按钮列表的设计有多种方案,这里为大家分享一种带有动画和控制效果的按钮呼出方式。先看效果:http://pages.mlxgc.top/。


“呼出按钮动画的功能实现较为复杂,需要提前了解的相关知识如下:

js DOM操作:DOMToKenList.toggle();

css transform;

css flex布局;

css position;

建议学习网站:https://developer.mozilla.org/zh-CN/


好的,我们学完以上预知识后,就可以开始今天的内容啦;

首先我们将项目中需要使用到的图标的库引入页面:

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>    
<!--这里选择的是unpkg,还有很多的开源图标库可以选择,可以自行更改,该图标库内容是基于自定义ion-icon标签的引入形式-->

下面,我们开始写页面的主体内容,并且在该过程中完成对应的样式和定位书写:

<body>
    <ul class="menu">
        <div class="toggle">
            <ion-icon name="add-outline"></ion-icon>
        </div>
        <li style="--i: 0; --clr: #ff2972">
            <a href="#"><ion-icon name="home-outline"></ion-icon></a>
        </li>
        <li style="--i: 1; --clr: #fee800">
            <a href="#"><ion-icon name="person-outline"></ion-icon></a>
        </li>
        <li style="--i: 2; --clr: #04fc43">
            <a href="#"><ion-icon name="settings-outline"></ion-icon></a>
        </li>
        <li style="--i: 3; --clr: #fe00f1">
            <a href="#"><ion-icon name="mail-outline"></ion-icon></a>
        </li>
        <li style="--i: 4; --clr: #00b0fe">
            <a href="#"><ion-icon name="key-outline"></ion-icon></a>
        </li>
        <li style="--i: 5; --clr: #fea600">
            <a href="#"><ion-icon name="videocam-outline"></ion-icon></a>
        </li>
        <li style="--i: 6; --clr: #a529ff">
            <a href="#"><ion-icon name="camera-outline"></ion-icon></a>
        </li>
        <li style="--i: 7; --clr: #01bdab">
            <a href="#"><ion-icon name="game-controller-outline"></ion-icon></a>
        </li>
    </ul>
</body>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #2f263e;
}

.menu {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu li{
    position: absolute;
    left: 0;
    list-style: none;
    transition: 0.5s;
    transition-delay: calc(0.1s * var(--i));
    transform-origin: 140px;
    transform: rotate(0deg) translateX(110px);
}

.menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    color: var(--clr);
    border: 2px solid var(--clr);
    border-radius: 50%;
    font-size: 1.5em;
    transform: rotate(calc(360deg / -8 * var(--i)));
    transition: 1s;
}

.menu li a:hover {
    transition: 0s;
    background: var(--clr);
    color: #333;
    box-shadow: 0 0 10px var(--clr),
                0 0 30px var(--clr),
                0 0 50px var(--clr);
}

.menu .toggle {
    position: absolute;
    width: 60px;
    height: 60px;
    background: #2f363e;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* z-index: 数值越大,优先级越高,就可以叠在一些z-index值比它小的元素上 */
    z-index: 10000;
    font-size: 2em;
    /* transition 是延期属性,填上XX属性  */
    transition: transform 1.25s;
}

注意:此处css仅是样式,部分transition是为动画做准备;

下面,我们定义一个层次选择器,选择class为 menu且为active的元素(目前没有元素的clss为active),并未其添加动画效果;

.menu.active .toggle {
    transform: rotate(315deg);
}
.menu.active li {
    transform: rotate(calc(360deg / 8 * var(--i))) translateX(0px);
}

现在,虽然我们定义好了动画该如何播放,但是我们并没有为其触发做准备,下一步就是关键步骤,当我们的启动按钮被点击时,我们为menu类添加(或者删除)一个名为active的clss属性,这样就可以满足以上选择器的要求实现动画效果了,代码如下:

let toggle = document.querySelector('.toggle');
let menu = document.querySelector('.menu');
toggle.onclick = function () {
    console.log()
    // xxx.classList  // 返回一个元素 class 属性的动态 DOMTokenList 集合
    // xxx.classList.toggle() // toggle是转化的意思, 如果active 类值已存在,则移除它,否则添加它
    menu.classList.toggle('active');
}

到此,呼出按钮动画就完成了,但是该组件用了较多定位才能有效实现,正常开发需要耗费较多精力才能调试完成,更重要的是希望大家懂得原理,才能合理调试该组件,下面是本次的展示界面:

http://pages.mlxgc.top/

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42951382/article/details/127992695

常用前端开发组件库,前端组件收集整理列表_金色小毛的博客-爱代码爱编程

前端自动化 前端构建工具 gulp – The streaming build system grunt – the JavaScript Task Runner 前端模块管理器 Bower – A package

Web前端开发技术:Web前端开发技术-爱代码爱编程

一、实验目的: 掌握Vue提供的transition组件。 掌握animate.css动画库。 二、实验要求: 了解transition组件和animate.css动画库的基本使用 编写程序完成以下实验内容并上交实验报告 三、实验内容: (一)实验基础 1、transition组件和animate.css动画库 (1) 通过标签以及该标签与其它

html游戏开发组件,30组常用前端开发组件库-爱代码爱编程

30组常用前端开发组件库,前端组件收集整理列表 2015-07-08 分类:网站开发与网络建设 围观:6486次 这里是收集的web前端开发常用前端开发组件库,搭建web app常用的样式/组件等收集列表(移动优先)。主要包含前端框架,构建工具,自动化模块、jQuery插件、前端样式等,囊括最实用的前端开发组件库! 0. 前端自动化 前端构

Web前端学习笔记15:Web前端开发:jQuery总结-爱代码爱编程

文章目录 day01 - jQuery1.1. jQuery 介绍1.1.1 JavaScript 库1.1.2 jQuery的概念1.1.3 jQuery的优点1.2. jQuery 的基本使用1.2.1 jQuery 的下载1.2.2. 体验jQuery1.2.3. jQuery的入口函数1.2.4. jQuery中的顶级对象$1.2.5. j

分享给你一个酷炫的前端组件库,还不用起来?-爱代码爱编程

fancy-components 一个酷炫的前端组件库 大伙前端都是用什么组件库的呢? 我最近刚发现前端一个很好看、很炫酷的组件库。那就是fancy-components ,简直是“酷炫”极了。自己要是不想写复杂的样式,下面我来带大家了解下这个组件库。 一. 组件展示 翻译成中文就是是花式组件,也就是花里胡哨的意思。确实有点花里胡哨。 下面看一下

关于前端开发中常用组件封装的一些思考、技巧分享,基本上所有的项目都适用-爱代码爱编程

看过了大多数文章,都是讲解的知识点,但知识点的话我们很容易查询各种文档、书籍了解到,但实用的技巧就很难, 需要自己工作有一定的经历,经常封装各种组件,思考才能得来。本文的讲解是我本人真实的项目经历总结出来的,目前在我司这些组件在所有的项目中都能用 我们封装的目的就是为了方便使用,简化操作,而不用写一大代码 本环境说明是针对 Vue+Element

分享 82个实用的前端开发工具-爱代码爱编程

英文 | https://medium.com/geekculture/83-tools-for-web-developers-a54cfa7fa522 翻译 | 杨小爱 今天,我们将分享82个用于 Web 开发和设计的实用工具和库。希望这些工具可以提升的开发效率,同时,也可以帮助您更好的学习前端开发。 01、Day.js 地址:http

单体架构项目前端开发(1):Vue基础知识(2)-爱代码爱编程

文章目录 1、axios1.1 Ajax回顾1.1.1 什么是Ajax?1.1.2 Ajax的作用1.1.3 异步与同步1.2 axios介绍1.3 axios入门1.4 axios总结1.5 获取笑话案例1.6 天气查询案例1.6.1 需求分析1.6.2 接口文档1.6.3 案例演示1.6.4 案例总结1.7 解决页面闪烁问题2、computed

前端微信公众号开发,前端开发规范手册-爱代码爱编程

开始 我大学读的是大专,在学校学的是机电一体化。临近毕业的时候选择了学习web前端技术,因为做机电实在又累工资又低,而我更喜欢坐办公室的工作,有空调吹,我很现实,就是想多赚一点钱。到现在做了两年前端的小程序员,月薪是13K,经历过两次跳槽,第一次跳槽拿到了10K的offer,第二次跳槽拿到现在13K的offer。 选择学习前端之前我也有想过要学什么,最

前端 button 组件之按钮式进度条实现-爱代码爱编程

 大厂技术  高级前端  Node进阶 点击上方 程序员成长指北,关注公众号 回复1,加入高级Node交流群 前言 在一些前端项目中,它们会涉及文件的上传 / 下载 功能,当文件在进行上传 / 下载时,我们该怎么更好的向用户进行进度反馈呢?我们常见的有弹窗式进度条、吸顶式进度条 ... 本篇章将给大家带来按钮式进度条,并手把