a标签active不起效果_CSS3仿网易云音乐听歌识曲动态效果

最新推荐文章于 2024-07-24 03:32:44 发布
最新推荐文章于 2024-07-24 03:32:44 发布
阅读量200 收藏
点赞数
文章标签： a标签active不起效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42327688/article/details/112127267
版权
该博客介绍了如何利用CSS3的动画属性和transition标签实现淡入淡出效果，来创建类似网易云音乐听歌识曲的水波纹动态效果。通过控制元素的opacity值和box-shadow大小，结合关键帧动画@keyframes，营造出从中心向外扩散的视觉效果。
摘要由CSDN通过智能技术生成

利用CSS3动画属性，以及transition 标签控制样式opacity值实现淡入淡出效果，从而实现类似水波纹的动态效果。

具体实现效果如图：

b73ca534802913be55a7c6cb5f4253dd.png

demo代码如下：

DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>录音效果title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

head>

<style>

    body{

        background-color: #333333;

        text-align: center;

    }

    .content{

        height:10px;

        width:100px;

        border-radius:100%;

        position: relative;

        margin:200px auto;

    }

    .fade-enter {

        opacity: 0;

    }

    .fade-enter-active {

        transition: opacity 1s;

    }

    .fade-leave-to {

        opacity: 0;

    }

    .fade-leave-active {

        transition: opacity 3s;

    }

    .dot {

        animation: sploosh 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    }

    .dot2 {

        animation: sploosh2 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    }

    .dot3 {

        animation: sploosh3 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);

    }

    .dot,

    .dot2,

    .dot3 {

        height: 100px;

        width: 100px;

        font-size: 20px;

        color: #fff;

        line-height: 100px;

        text-align: center;

        border-radius: 100%;

        position: absolute;

        z-index: 20;

        animation-iteration-count: infinite;

        background: transparent;

    }

    .dot-start {

        height: 100px;

        width: 100px;

        font-size: 20px;

        color: #fff;

        line-height: 100px;

        text-align: center;

        border-radius: 100%;

        position: absolute;

        z-index: 10;

        animation-iteration-count: infinite;

        background: transparent;

        background-color: rgba(255, 220, 1, 0.7);

    }

    .dot30 {

        height: 100px;

        width: 100px;

        font-size: 20px;

        color: #fff;

        line-height: 100px;

        text-align: center;

        border-radius: 100%;

        position: absolute;

        z-index: 30;

        animation-iteration-count: infinite;

        background: transparent;

        background-color: rgba(255, 220, 1, 0.7);

    }

    @keyframes sploosh {

        0% {

            box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);

            background: rgba(255, 220, 1, 0.7);

        }

        100% {

            box-shadow: 0 0 0 30px rgba(255, 220, 1, 0);

            background: rgba(255, 220, 1, 0);

        }

    }

    @keyframes sploosh2 {

        0% {

            box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);

            background: rgba(255, 220, 1, 0.7);

        }

        100% {

            box-shadow: 0 0 0 20px rgba(255, 220, 1, 0);

            background: rgba(255, 220, 1, 0.3);

        }

    }

    @keyframes sploosh3 {

        0% {

            box-shadow: 0 0 0 0px rgba(255, 220, 1, 0.7);

            background: rgba(255, 220, 1, 0.7);

        }

        100% {

            box-shadow: 0 0 0 10px rgba(255, 220, 1, 0);

            background: rgba(255, 220, 1, 1);

        }

    }

style>

<body>

    <div id="app">

        <div class="content">

            <transition name="fade">

                <div v-if="show">

                    <div v-if="show" class="dot">

                        <div class="dot2">

                            <div id="div3" class="dot3">div>

                        div>

                    div>

                div>

            transition>

            <div v-if="show" class="dot30">

                正在录音

            div>

            <div class="dot-start">

            div>

        div>

        <button v-if="show" @click="startRecord">停止录音button>

        <button v-if="!show" @click="endRecord">开始录音button>

    div>

    <script>

        new Vue({

            el: '#app',

            data() {

                return {

                    show: false,

                    show1: false

                };

            },

            methods: {

                startRecord(){

                   this.show=false;

                   this.show1=true;

                },

                endRecord(){

                   this.show=true;

                   this.show1=false;

                }

            }

        })

    script>

body>

html>

weixin_42327688
关注
使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)
努力是为了站在万人之中，成为别人的光
09-13 4万+
直接跳到末尾 获取完整源码 今天我将带着大家使用 HTML、CSS 和 JS创建 音乐播放器，没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。我们的主页部分有一个平滑的工作滑块，也有水平滚动。这个音乐播放器最好的部分是它最小化了音乐播放器。是的，您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。 ❤️使用 HTML、CSS 和 JS 创建在线音乐播放器❤️???? 在线演示地址???? 完整代码结构???? home-section 首页部分???
css3如何向上_CSS3实现div从下往上滑入滑出效果示例
weixin_31830389的博客
12-23 3377
1，首先需要用的是 CSS3的 target 选择器，配合a标签指定id选择器切换目标元素，用于选取当前活动的目标元素。2，CSS3 的 transition 动画，这里不做详细介绍看一下效果图：点击滑出按钮，元素从底部匀速滑入到页面一定高度；再点击滑入，元素从当前位置匀速滑入期初位置。 直接上代码：CSS3滑入/滑出效果Lorem ipsum dolor sit amet, consectetu...
web前端入门到实战：以轮播效果为案例谈如何写优质代码
软件开发-前端开发-IT
08-10 181
作为程序员大家在写代码时谈的最多的就是代码的拓展性、复用性。本文就以大家熟悉的轮播效果为案例，讲一讲写优质代码的思路和实践。 文章分三个步骤。第一步，实现基本功能；第二步，考虑到代码的封装性和复用性；第三步，考虑到代码的拓展性。 实现基本功能 完整代码查看，下面只展示HTML结构和JavaScript <div class="carousel"> <div c...
使用css动画实现网易云音乐播放界面波浪动画效果
小周sri的码农
08-04 3732
通过实现CSS实现仿网易云音乐播放界面动画效果，最终的效果如下 界面布局 图片也是实现滚动效果的，使用四个div，来标识每一帧波动的效果。 <div class="container-wrap"> <div class="container"> <div class="more"></div> <div class="more"></div> <div class="more"></
纯css实现语音播报动画效果
最新发布
weixin_36021461的博客
07-24 156
先来看看效果图黑色以下代码登录后复制 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAAYCAYAAAAF6fiUAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAO8SURBVGiB1ZlPaBxV...
a标签active不起效果_目前最安全的补单方法你们知道吗？「足迹标签单」「ab单」详解...
weixin_28892727的博客
12-11 327
新年开始都是最艰难的时候，这个时候看的就是谁的资源好，谁的操作方法安全，只要不死就有爆发的可能。很多人都说为什么你女装做的那么好，每天都有几万访客我操作的量和你操作反而经常被查没有流量。我只能说我们俩的投资路线不一样，他想的是量上去就可以，我做的是精补，安全的操作方法，成本是他的俩倍，一分价钱一分货，一种是职业刷手，一种是真实买家操作的。效果肯定是不一样的。让他和我一样搞他就说成本太高搞不起。也懒...
a标签active不起效果_尤娜v1.2.2版本标签指南-Part II(分页函数)
weixin_39689428的博客
12-01 84
尤娜v1.2.2版本标签指南-Part II(分页函数)​Una | 尤娜一个基于Spring Boot 2.0构建的Java博客系统​分页函数在一个网站中，很多页面都需要用到数据分页导航栏，为了便于主题模板的制作，尤娜提供了内置的分页函数，通过分页函数，能够自动对数据进行分页，并生成分页导航按钮。在使用分页函数之前，请在对应的页面中增加下面的CSS样式：.pagination { marg...
a:hover，a:active失效的问题
阿锋--专栏
11-10 4215
现象： a标签的伪类选择器，在点击之后，一直保持为a:visited的样式。a:hover，a:active的css失效了。 解决方式： 将a:visited样式写在前面，一种顺序为：a:link{} a:visited{} a:hover{} a:active{}。 原因： 如果写成这样：a:link{} a:hover{} a:active{} a:visited{} 可能是a:vi
HTML5+CSS3实现的列表式音乐播放器特效源码
08-28
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉效果出色的网页提供了强大支持。在这个"HTML5+CSS3实现的列表式音乐播放器特效源码"项目中，我们可以深入探讨这两者如何协同工作，构建出一个...
微信小程序2：网易云音乐（完整版）
Yummy的博客
12-07 9357
作为一个需要听歌“续命”的程序员小白， 周末睡个懒觉也备忘录敲代码呀，记录下前阵子写的“小雅米音乐”----网易云音乐小程序，希望大家会喜欢，也请各位大佬多多指教。 代码送上： 1、index.wxml <!--标签页标题--> <view class="tab"> <view class="tab-item {...
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6507
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
CSS3波浪音阶动画特效特效代码
03-20
CSS3波浪音阶动画特效是一款基于js跟css3绘制的音乐播放音阶频率波浪动画特效。
a标签active不起效果_JavaScript 练手小案例：超级简单又炫酷的图片手风琴效果
weixin_35733790的博客
12-03 161
手风琴效果很流行，可以任意展开收缩内容，甚是好看。特效要求鼠标移动到图片上，当前图片放大，其他图片收缩。HTML<div class="pics"> <ul id="picList"> <li><a href="#"><img src="images/pic1.jpg" alt=""></a></li> ...
a:active在ios上无效解决方法
weixin_30872157的博客
10-16 209
原因： By default, Safari Mobile does not use the :active state unless there is atouchstart event handler on the relevant element or on the <body>. 解决方法： 1.body标签上添加ontouchstart空方法（页面首个元素起作用） ...
超链接样式被点击过后a:hover{}和a:active{}样式不起作用”的原因及解决方法
IT_bar的博客
04-05 351
a:link {} a:visited {} a:hover {} a:active {}
“超链接样式被点击过后a:hover{}和a:active{}样式不起作用”的原因及解决方法
Rita_jing的博客
03-28 7007
今天发现了改变CSS属性的排列顺序: L-V-H-A a:link {} a:visited {} a:hover {} a:active {} -->    我个人认为原因是：如果a:hover {}写到a:active {}后面就会覆盖a:active {}，因为点击时鼠标也是在元素上的，因此它们具有包含性，就像数学中的集合，应该由大到小。
有关a标签link,hover,active失效的问题一点探究
薛定谔的猫
10-14 727
a标签的事件是有顺序的 先默认 后经过 最后按下不放如果要加上a:visited放在a:link 后面 但我在实际的学习上很少使用a:visited这个，因为他会覆盖a:link的样式。其实就一句话，出错就是你顺序错了，调整一下顺序就ok了。a:active就失效了。如果我们不按照这个顺序。
【前端 H5】模仿网易云音乐 CSS 加js 实现留声机效果 H5
悟空—
08-06 1310
效果实现还是很基础的 主要是动画 简单的动画使用了css的transition 过渡加 hover实践实现 盘转动的 使用了js 因考虑到停止时暂不能解决停留在原处 故使用的setInterval 定时器 改变样式 废话不多说 直接上代码和效果 效果有点卡顿 直接复制代码 自己看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>悟空留声机</ti..
CSS动画效果——语音播放小喇叭
热门推荐
weixin_33975951的博客
03-29 1万+
写业务代码经常会碰到要自己实现一些设计交给的小动画，今天我们就来看下小喇叭那种类似倒过来的wifi图标一样的效果：语音播放效果对于这个有几种实现方案：一种是直接把图标.png文件放在下面，然后再在上面覆盖一层跟它弧度相似的圆形div，通过css的animation去控制那个覆盖的div从左向右移动，从而实现出这种效果（其实还是有区别的，用div控制移动就会出现一个一个逐渐出现且，会同时消失的场景，...
利用JavaScript实现动态3D标签云效果的详细教程
"本文档详细介绍了如何使用JavaScript实现3D标签云效果，主要涉及球坐标系原理以及相关的代码实现。在3D标签云中，效果是通过控制标签在三维空间中的位置来模拟云状分布，这主要依赖于三个参数：r（半径）、θ（极角...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值