文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

能用 CSS 能播放声音吗？

正文共：3969 字 预计阅读时间：10 分钟 翻译：疯狂的技术宅 作者：Alvaro Montoro 来源：css-tricks ? CSS 是样式、布局和表示的领域。它充斥着颜色、大小和动画。...但是你知道吗，它还可以在网页上控制播放声音。 本文介绍了一些技巧。实际上它并不是真正的 hack，而是针对 HTML 和 CSS 的严格实现。不过说实话，这仍然是一种 hack。...我不建议在生产中使用它，因为音频可能还会被 元素或 JavaScript 进行控制。...大约一年前，我用这种技术开发了一种仅使用 HTML 和 CSS 的 CodePen 小型钢琴(https://codepen.io/alvaromontoro/pen/ejwXJm)。...总的来说，这是有趣的 CSS 技巧，不过却是一种“不要用在发布的产品中”的事情…… ? 原文：https://css-tricks.com/playing-sounds-with-css/ ?

3.3K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    为什么我用 JavaScript 来编写 CSS

    作为替代，我用 JavaScript 编写了所有的 CSS。 我知道你在想什么：“为什么有人会用 JavaScript 编写 CSS 呢？！” 这篇文章我就来解答这个问题。...为什么我喜欢 CSS-in-JS？ 主要是 CSS-in-JS 增强了我的信心。我可以在不产生任何意外后果的情况下，添加、更改和删除 CSS。我对组件样式的更改不会影响其他任何内容。...如果删除组件，我也会删除它的 CSS。不再是只增不减的样式表了！✨ 信心：在不产生任何意外后果的情况下，添加、更改和删除 CSS，并避免无用代码。 易维护：再也不需要寻找影响组件的 CSS 了。...尤其是我所在的团队从中获取了很大的信心。我不能指望所有团队成员，特别是初级成员，对 CSS 有着百科全书般的理解。最重要的是，截止日期还可能会影响质量。...(包括本网站) CSS-in-JS 适合你吗？ 如果你使用 JavaScript 框架来构建包含组件的 Web 应用程序，那么 CSS-in-JS 可能非常适合。

    1.8K50

    使用 CSS 变量是否对网站性能有影响，我做了个实验

    如果你还不了解 CSS 变量，推荐阅读 CSS 变量教程- 阮一峰的网络日志[1] 到如今，几乎所有的主流浏览器都已经支持了该特性。当然，IE11 肯定是不支持的。...我做了一个简单的 benchmark 测试，创建 5000 个 CSS 变量，来看看它究竟会不会减慢页面的渲染速度。...测试结果 使用 CSS 变量的 HTML 文件大小会更大，因为相比于使用静态 CSS 来说，会需要多生成一些 CSS 变量。...但在某些场景下，可能还是得关注下性能问题，比如在 CSS 的 calc 函数中使用 CSS 变量或使用 JavaScript 频繁地更改 CSS 变量。...文章翻译自：原文链接[2] 测试源码：源码链接[3] ❤️支持 如果本文对你有帮助，点赞支持下我吧，你的「赞」是我创作的动力。

    1.1K30

    如果我在用HTML+CSS，那么，我能算是名开发人员吗？

    如果我在用HTML+CSS编程，那么，我能算是名开发人员吗？...作者 | Amadou Ibrahim 译者 | 弯月，责编 | 郭芮 以下为译文： 有好多次，别人说我算不上程序员，因为我在用HTML + CSS编程。我非常伤心，因为别人都不认为我是开发人员。...那么，HTML + CSS也有这种数据结构吗？此外，还有人说HTML + CSS不具备图灵完备性——那么，图灵完备性又是什么？ 我的第一反应也是发懵。但经过几个小时的查阅后，我有了大致的了解。...如此说来，HTML + CSS确实不具备图灵完备性。因为HTML + CSS无法更改系统状态。也无法做出决策或根据输入更改状态…… 那么，我还能说HTML + CSS是编程语言吗？ ?...那么就让我来一一解答吧。 如果有人说CSS具备图灵完备性，你会说什么？你无言以对，是吗？事实上，有一位名叫Eli Fox-Epstein的名人证明了这一点。

    1.2K10

    基于HTML+CSS+JavaScript我的学校设计毕业论文源码

    一、‍网站题目 校园班级网页设计 、‍我的班级网页、我的学校、‍校园社团、校园运动会、等网站的设计与制作。... 二、✍️网站描述 ️HTML我的班级网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小...其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效...href="css/style.css" /> 我也算个理性的人，太理性，以至于生活中缺少了很多激动。

    1.1K20

    我的DW个人网站设计——安徽宣城6页HTML+CSS+JavaScript

    网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS...' size='4px'> ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】 --- @TOC 一、网页介绍 1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS...3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点...DOCTYPE html> css" rel="stylesheet" href="css/style.css...--底部--> xxx版权所有 --- 2.CSS样式代码 /*通用类*/ * {

    97150

    关于web前端大作业的HTML网页设计——我的班级网页HTML+CSS+JavaScript

    二、✍️网站描述 ⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构...页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。 菜单美观、醒目，二级菜单可正常弹出与跳转。 要有JS特效，如定时切换和手动切换图片轮播。...网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。...其中： （1）html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效...doctype html> css" href="css/css.css

    2.5K20

    基于HTML+CSS+JavaScript制作简单的大学生网页设计——我的家乡湖南

    网页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒子设定居中，内部左中右布局，下方横向浮动排列，大学学习的前端知识点和布局方式都有运用，CSS...' size='4px'> ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】 --- @TOC 一、网页介绍 1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS...3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点...DOCTYPE html> css"...href="css/style.css" /> <div class="daohang

    1.1K20

    年薪40万的React大佬，竟然被一个Safari兼容性问题卡了三天

    他在那看了五分钟，最后只说了一句："我怎么没想到？" 然后他问我："这是什么高级技巧吗？" 我说："不，这就是CSS的基础。" 那一刻我才意识到——问题比我想的更严重。...真相3：一旦换个环境，你可能就傻了 我见过好几个人，在用React的地方是team leader，到了要用纯JavaScript做底层库的地方，直接懵逼。...第一步：做个真实的项目来"脱瘾" 这周末，给自己出个题：**"不用React，不用任何框架，用纯HTML+CSS+JS写一个真正能用的个人博客。"** 我知道你会很难受。 你会很想装个Next.js。...他花了两个月的时间系统地学HTML、CSS、JavaScript。 现在他说："早知道会这样，我就早点学基础了。" 扪心自问这三个问题： 1....但HTML和CSS的核心，十年没变过。再往后十年也变不了。 选择投资基础，还是投资框架？ 这个决定，会直接影响你5年后在哪一个公司，拿多少钱。 这篇文章，我希望能戳醒一些人。 不是说框架不重要。

    15310

    为什么 CSS 动画比 JavaScript 高效？

    大家好，我是小丞同学，一名准大二的前端爱好者 这篇文章将欢快的带你了解一下 CSS 和 JS 动画的差别 愿你忠于自己，热爱生活 引言 讲到动画，当然是非常有意思的啦，你可以往上滑一下...，看看上面的封面图，是不是相当的炫酷，以为我是代码写出来的吗？...同时由于 JavaScript 运行在浏览器的主线程中，主线程中还有其他的重要任务在运行，因而可能会受到干扰导致线程阻塞，从而丢帧 而 CSS 的动画是运行在合成线程中的，不会阻塞主线程，并且在合成线程中完成的动作不会触发回流和重绘...当然还有一个重要的点：JS 动画运行在 CPU，而 CSS 动画运行在 GPU 总的来说， CSS动画的渲染成本小，并且它的执行效率高于 JavaScript 动画 ---- 那我们什么时候使用 CSS...我个人觉得 只要能用 CSS 实现的动画，就不要采用 JS 去实现，可以多采用 CSS 预处理器去做更多复杂的动画，就像我之前用 SCSS 做的流星雨动画一样 如果动画相较复杂，我们可以采用 JS +

    92110

    为什么 CSS 动画比 JavaScript 高效？

    大家好，我是小丞同学，一名准大二的前端爱好者 这篇文章将欢快的带你了解一下 CSS 和 JS 动画的差别 愿你忠于自己，热爱生活 引言 讲到动画，当然是非常有意思的啦，你可以往上滑一下...，看看上面的封面图，是不是相当的炫酷，以为我是代码写出来的吗？...同时由于 JavaScript 运行在浏览器的主线程中，主线程中还有其他的重要任务在运行，因而可能会受到干扰导致线程阻塞，从而丢帧 而 CSS 的动画是运行在合成线程中的，不会阻塞主线程，并且在合成线程中完成的动作不会触发回流和重绘...当然还有一个重要的点：JS 动画运行在 CPU，而 CSS 动画运行在 GPU 总的来说， CSS动画的渲染成本小，并且它的执行效率高于 JavaScript 动画 ---- 那我们什么时候使用 CSS...我个人觉得 只要能用 CSS 实现的动画，就不要采用 JS 去实现，可以多采用 CSS 预处理器去做更多复杂的动画，就像我之前用 SCSS 做的流星雨动画一样 如果动画相较复杂，我们可以采用 JS +

    1.2K20

    为什么我们的web前端变的越来越复杂

    这些新技术虽然带给我们方便，但我们不能迷失在里面，我们要去解决问题；再有一个例子，css3的动画有BUG，但是我在网上很少见人去讨论这些问题，讨论多就是各种框架的使用。...网上说的性能，至少我测试的时候没发现jquery性能赶不上他。我不知道哪些说jquery性能不好的人有没有测试比对过。 再举个例子，前端js css发布前压缩的问题。...能用通俗的写法写的，尽量不用怪异的写法写，哪怕我要多写几行代码，我们也要保持代码的可读性。但是现在的前端代码以别人看不懂为荣，以用了某些高级应用为荣，前端的代码编写已经进入了误区。...我们这些老前端没给新手一个明确，切实的指引 JavaScript的原型继承算是比较重要的，但是我读了很多JavaScript的书，没有发现那本书真正把他讲清楚了，至少现在没发现。...再比如说，书上讲的的很多css3的东西都是W3C的文档改编的，网上的。我不知道大家再用css3的时候有没有发现很多的bug，这些bug难倒不需要写在书里让我们的新人少走一些弯路吗？

    1.1K60

    瀑布流布局终于有了正确的打开方式

    还记得第一次做瀑布流布局时的绝望吗？Pinterest 那种错落有致的照片墙，看起来简单，实现起来却让人头大。...我一直在想，都 6202 年了，这事儿为啥还这么复杂？ 直到最近看到 WebKit 团队发布的 CSS Grid Lanes，我才发现——原来瀑布流布局，真的可以只用 3 行 CSS 搞定。...没有 JavaScript，没有媒体查询，没有复杂的计算。浏览器会自动把内容塞进合适的列里，就像下面这样： 在三行 CSS 中，无需媒体查询或容器查询，我们创建了一个适用于所有屏幕尺寸的灵活布局。...这在以前几乎是不可能用纯 CSS 实现的。 横着来还是竖着来？随变来 Grid Lanes 还有个贴心的设计：你可以自由选择“瀑布式”（竖着排）还是“砖墙式”（横着排）。 想要瀑布式？...瀑布流布局就是典型——它本质上是个布局问题，却一直要靠 JavaScript 解决。这就像用螺丝刀钉钉子，能用，但总觉得哪里不对劲。

    17310
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券