【Sass】网易云动画播放器

简介

仿网易云播放动画

效果图

在这里插入图片描述

sass

src/assets/style/musicPlay.sass

// TODO 音乐播放器动画
//  ? 动画停止class >>> .muscic-play-stop
// HTML结构
// <div class="music-play">
//     <div class="bg-primary"></div>
//     <div class="bg-primary"></div>
//     <div class="bg-primary"></div>
// </div>$music-play-box-height: 20px//音乐播放状态高度
$music-play-width: 3.2px//音乐播放状态宽度
$music-play-delys: .5s//音乐播放状态动画延迟
$music-play-gap: 6px//音乐播放状态间距
$music-animate-time: .75s//动画播放时长
$music-play-radius: 4px 4px 0 0 //圆角
$music-play-pos: center bottom//动画位置.music-playdisplay: inline-blockwidth: calc(#{$music-play-width * 3 + $music-play-gap })position: relativeheight: $music-play-box-height.music-play>divposition: absolutewidth: $music-play-widthheight: 100%border-radius: $music-play-radiusanimation: music-play-an #{$music-animate-time} linear infinitetransform-origin: $music-play-posbackground: blue@for $i from 1 through 3.music-play>div:nth-child(#{$i})animation-delay: calc(#{($i - 1) * $music-play-delys})margin-left: calc(#{$music-play-gap * ($i - 1)})@keyframes music-play-an0%,100%transform: scaleY(1)50%transform: scaleY(0).music-play .muscic-play-stopanimation-play-state: paused 

使用

<template><div class="music-play"><div></div><div></div><div></div></div>
</template><style>
@import url('./assets/styles/musicPlay.sass')
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/240807.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[字符编码]windwos下使用libiconv转换编码格式(二)

在http://t.csdnimg.cn/PLUuz笔记中实现了常用编码格式转换的功能,但这还是一个demo。因为代码中向libiconv库函数传递的字符串是存放在堆空间中的(我也是从网上找例子测试,是否一定要开辟堆空间存放还有待考证),如果一次性转换的字节数很巨大的话,就会导致内存空间不足,进而引…

安捷伦Agilent 8720ES网络分析仪

Agilent安捷伦8720ES S-参数矢量网络分析仪 50MHz至20GHz 100 dB 的动态范围 优异的测量精度 2个测量通道 4个显示通道 频率和功率扫描 快扫描和数据传输速度 通过/失败测试&#xff0c;强大的标记功能 电校准&#xff08;ECal&#xff09; 内部使用测试序列的自动化 可选时域…

当物联网技术遇上圣诞节,会给你带来怎样的商业灵感

智能物联网项目可以将更浓烈的节日气氛融入到千家万户。有市场嗅觉的朋友已经踏上了这种创新与传统相遇的旅程&#xff0c;你可以参考一下他们的点子。 物联网智能照明 借助物联网技术&#xff0c;你可以创建一个智能照明系统&#xff0c;让每一束灯光闪烁出美妙的色彩或图案…

正则表达式与bs4选择器筛选论文数准确率之比较

一、正则爬取论文网首页论文标题的示例 import requests import re from bs4 import BeautifulSoupheaders {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36}def get_html(url):try:res…

4种常见的数据库索引

数据库索引是优化数据库系统性能的关键组成部分。如果没有有效的索引&#xff0c;查询可能会变得缓慢且低效&#xff0c;从而导致用户体验不佳并降低生产力。在这篇文章中&#xff0c;我们将探讨创建和使用数据库索引的一些最佳实践。 常见的索引算法有&#xff1a; 1. B-Tree…

Hadoop入门学习笔记——二、在虚拟机里部署HDFS集群

视频课程地址&#xff1a;https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接&#xff1a;https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记&#xff08;汇总&#xff09; 目录 二、在虚拟机里部署HDFS集群2.1. 部署node1虚拟机2.2. 部…

【Angular】Angular中的最差实践

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

GSON 泛型对象反序列化解决方案

Gson 是一个用于在 Java 对象和 JSON 数据之间进行序列化和反序列化的开源库。它由 Google 开发并提供支持。Gson 的名称是 “Google JSON” 的缩写。 Gson 提供了简单而强大的 API&#xff0c;可以轻松地将 Java 对象转换为 JSON 字符串&#xff0c;并将 JSON 字符串转换回 …

【数据结构入门精讲 | 第十六篇】并查集知识点及考研408、企业面试练习

上一篇中我们进行了散列表的相关练习&#xff0c;在这一篇中我们要学习的是并查集。 目录 概念伪代码选择题填空题编程题7-1 朋友圈R7-1 笛卡尔树R7-2 部落R7-3 秀恩爱分得快 在许多实际应用场景中&#xff0c;我们需要对元素进行分组&#xff0c;并且在这些分组中进行查询和修…

常用Python自动化测试框架有哪些?优缺点对比

随着技术的进步和自动化技术的出现&#xff0c;市面上出现了一些自动化测试框架。只需要进行一些适用性和效率参数的调整&#xff0c;这些自动化测试框架就能够开箱即用&#xff0c;大大节省了测试时间。而且由于这些框架被广泛使用&#xff0c;他们具有很好的健壮性&#xff0…

勒索病毒最新变种._locked勒索病毒来袭,如何恢复受感染的数据?

导言&#xff1a; _locked勒索病毒&#xff0c;如同黑暗中的毒蛇&#xff0c;突然袭击&#xff0c;将你珍贵的数据缠绕在数字的牢笼中。这种病毒通过电子邮件、恶意链接或经过精心设计的感染途径迅速传播&#xff0c;使你的文件变得无法辨认。而后&#xff0c;犯罪分子以比特币…

YACS(上海计算机学会竞赛平台)一星级题集——回文数的判定

题目描述 给定一个正整数 n&#xff0c;请判定它是否是一个回文数&#xff0c;所谓回文数&#xff0c;就是将这个数的所有数字倒序排列后这个数的大小保持不变&#xff0c;比如 101 与 6886 都是回文数&#xff0c;而 100 不是回文数。 输入格式 单个正整数&#xff1a;表示…

Python 运算符 算数运算符 关系运算符 赋值运算符 逻辑运算 (逻辑运算符的优先级) 位运算 成员运算符 身份运算符 运算符的优先级

1 运算符算数运算符关系运算符赋值运算符逻辑运算逻辑运算符的优先级 位运算布尔运算符移位运算符 成员运算符身份运算符运算符的优先级 运算符 算数运算符 四则运算 - * / a 8 b 9 print(ab)#与Java类似 也可以进行字符串的连接 注意:字符串数字字符串 不存在会抛出异常…

车云TCP链路偶现链接失联问题排查

一、问题分析 1.1 车云tcp长连接分析排查 在15:37:32.039上线&#xff0c; 在 16:07:26.527下线&#xff0c;车云长连接通道稳定&#xff0c;且该期间心跳数据正常。 1.2 云向驾仓推送数据分析 在15:37:42 进行车辆接管后&#xff0c;该车辆下线&#xff0c;且无法在上线&am…

SQL变更评审常见问题分享

SQL变更评审分享 概述 SQL变更&#xff0c;是我们在开发迭代中不可避免的场景&#xff0c;SQL变更通常是指DDL和DML语句变更&#xff0c;这些sql会影响到数据库表结构或具体数据&#xff0c;变更时如果执行到存在问题的sql脚本&#xff0c;会对实际应用操作难以评估的损失&…

[node]node内置模块path

[node]node内置模块path 模块的导入路径值__filename__dirname path 方法path.resolve([from ...], to)path.parse()path.format()path.basename(path[, ext])path.extname(p)path.dirname(p)path.relative(from, to)path.normalize(p)path.isAbsolute(path)path.join([path1][…

css@media媒体查询

Media所有参数汇总 width:浏览器可视宽度。 height:浏览器可视高度。 device-width:设备屏幕的宽度。 device-height:设备屏幕的高度。 orientation:检测设备目前处于横向还是纵向状态。 aspect-ratio:检测浏览器可视宽度和高度的比例。(例如&#xff1a;aspect-ratio:16/9) de…

Java研学-Servlet 基础

一 概述 1 介绍 Servlet&#xff08;Server Applet&#xff09;是Java Servlet的简称&#xff0c;称为小服务程序或服务连接器&#xff0c;用Java编写的服务器端程序&#xff0c;具有独立于平台和协议的特性&#xff0c;主要功能在于交互式地浏览和生成数据&#xff0c;生成动…

会员管理怎么做?

会员管理是企业运营的重要组成部分&#xff0c;它涉及到会员的招募、维护、激励、保留、转化等多个环节。下面&#xff0c;我们将结合具体的案例&#xff0c;详细介绍会员管理的具体做法。 首先&#xff0c;会员的招募是会员管理的第一步 企业需要通过各种方式吸引消费者成为会…

3D数字化系统建设

以3D可视化、数字化技术为基础&#xff0c;其实&#xff0c;很多传统的系统软件都可以重新做一下。 比如&#xff1a;以下这个使用场景&#xff1a;零售门店陈列&#xff1b; 还有&#xff0c;数字化仓储系统&#xff0c;3D数字化供应链系统&#xff0c;3D数字化的生产系统&a…