找到
57
篇与
Web前端
相关的结果
- 第 7 页
-
三个令人期待的CSS特性即将推出！ 大家好，我是易航，今天给大家总结分享一下很 🐂🍺 的3个即将推出的 CSS 属性，等你看完，每一个都要喊：绝了！ {callout color="var(--theme)"} 声明一下：这些特性现在基本都不好使，就算有的高级浏览器支持了，也只是个例。可以期待一下以后 ~ {/callout} 前端CSS图片 一、@container @container 是一个容器查询方法，正如它的名字一样，它是用来支持根据当前元素所在容器的大小来进行动态修改添加样式的，这跟 @media 基于视口大小是不一样的。 来举个🌰 先创建一个侧边栏和一个主内容 <body> <aside class="sidebar"> <div class="card"> <h4>侧边栏</h4> <p> To the world you may be one person, but to one person you may be the world. </p> </div> </aside> <main class="content"> <div class="card"> <h4>主内容</h4> <p> To the world you may be one person, but to one person you may be the world. </p> </div> </main> </body>让这两个元素横向布局，且侧边栏宽度占 30% ，主内容宽度占 70% body { display: flex; color: white; } h4 { color: black; } .sidebar { width: 30%; } .content { width: 70%; background: #f0f5f9; /* 给个底色，与侧边栏区分 */ } .card { background: lightpink; box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.2); border-radius: 8px; }目前为止是这样的效果： 图片 现在我们发现主内容这块儿空间很富余，便想改变一下标题和内容文字的布局，此时就可以用上 @container 了，直接让主内容在当前容器宽度大于 400px 时变成横向布局 @container (min-width: 400px) { .content .card { display: flex; } }此时效果如下： 图片 是不是很酷 😎 基于这点，还想到了一个之前我做过的需求中很头疼的需求，就是字体大小随着容器宽高的改变而动态改变，如果支持了这个特性，那这个需求也就很简单了 二、object-view-box object-view-box 属性就类似于 SVG 中的 viewBox 属性。它允许您使用一行 CSS 来平移、缩放、裁剪 图像。 我们就对这张图来动动刀子 图片 加一行代码 .crop { object-view-box: inset(10% 50% 35% 5%); }实现的效果就是这样： 图片 跟原图对比一下就是这样： 图片 除了简单的裁剪，我们还能基于它实现一些好玩的效果，例如： 图片 三、animation-timeline animation-timeline 相比前两个就更好玩了！它允许我们基于容器滚动的进度来对动画进行处理，简而言之就是页面滚动了百分之多少，动画就执行百分之多少。而且动画也能根据页面倒着滚动而倒着播放 .shoes { animation-name: Rotate; animation-duration: 1s; animation-timeline: scrollTimeline; } @scroll-timeline scrollTimeline { source: selector('#container'); orientation: "vertical"; } @keyframes Rotate { from { transform: translate(-200px, -200px) rotate(0deg); } to { transform: translate(100vw, 100vh) rotate(720deg); } }使用起来很简单，就是在本身的基础动画上，新增一个 animation-timeline 属性即可，我们也可以对这个 timeline 定义是基于哪个容器，滚动方向是水平还是竖直 大致效果就是： 图片 最后 这三个 CSS 新特性，你们最喜欢哪个？有没有想到一些比较实用的场景，欢迎在评论区分享~
-
JS唤醒Windows10/11消息通知 在写一个应用的时候需要显示网页来的消息，为了让用户不会错过消息，所以希望使用JS调用win10的通知消息，调用方法如下: JavaScript图片 JS调用window.Notification() 1、在页面打开的时候查看浏览器是否支持Notification API，如果支持，则判断是否有权限通知，没有的话交由用户判断是否允许通知(JS代码)： // 判断浏览器是否支持唤醒 if (window.Notification) { let popNotice = () => { if (!Notification.permission === 'granted') return const notification = new Notification('阿巴阿巴', { body: '提示提示提示' }) // 点击通知的回调函数 notification.onclick = function() { window.open('https://baidu.com') notification.close() } } /* 授权过通知 */ if (Notification.permission === 'granted') { popNotice() } else { /* 未授权，先询问授权 */ Notification.requestPermission(function(permission) { popNotice() }) } }2.将应用部署到服务器之后只有https协议的网页可以调用通知功能。 如果是Win10/11系统的话，可以直接将上面代码复制到F12控制台运行
-
Js自动播放HTML音乐（不受浏览器限制，无需先与浏览器交互，无需对浏览器进行修改） 众所周知，声音无法自动播放一直是 IOS/Android 上的惯例。桌面版 Safari 也在 2017 年第 11 版宣布禁止带声音的多媒体自动播放功能。随后 2018 年 4 月发布的 Chrome 66 正式关闭了声音的自动播放，这意味着音频自动播放和视频自动播放在桌面浏览器中也会失效。 JavaScript图片 而通过网上搜索来解决这个问题，大部分都会提到使用 javascript 原生的 play()来解决。但是，当你运行它的时候，你会发现你在 Chrome 浏览器下调用 play 后的错误： DOMException: play() failed because the user didn’t interact with the document first. 但是，如果你想的是将音频当作背景音乐来播放时，当页面加载时音频文件就会自动响起，这个时候，用户是没有与页面进行数据交互的，所以 play()会报错，很多人百度后便会找到两种主流的方法 One： 1. 进入到 chrome://flags/#autoplay-policy 2. 找到Autoplay policy选项，设置为Setting No user gesture is required 3. 重启:Relaunch Chrome Two： 1. 直接在video标签中属性muted属性，静音播放即可首先说一下方法一。当前的谷歌浏览器已经删除了自动播放策略选项，所以当你进入谷歌浏览器进行设置时，是找不到这个选项的。而且作为网页的背景音乐，你还要把效果展示给别人看。所以，改变浏览器选项还不够成熟。先说第二种方法。如果作为背景音乐播放，可以更改静音属性，达到自动播放的效果。自动播放是可以的，但是这里用户需要的是背景音乐，而且是音频文件，静音属性无法达到这个效果。然后有人问，既然谷歌 Chrome 的背景音乐不能自动播放，究竟怎么解决呢？ 这里使用 Audio API 的 AudioContext 来自于我搭建的一个播放器。 //浏览器适用 contextClass = window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext; try { var context = new contextClass(); var source = null; var audioBuffer = null; function stopSound() { if (source) { source.stop(musics); //立即停止 } } function playSound() { source = context.createBufferSource(); source.buffer = audioBuffer; source.loop = true; source.connect(context.destination); source.start(0); //立即播放 } function initSound(arrayBuffer) { context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数 audioBuffer = buffer; playSound(); }, function(e) { //解码出错时的回调函数 console.log('404', e); }); } function loadAudioFile(url) { var xhr = new XMLHttpRequest(); //通过XHR下载音频文件 xhr.open('GET', url, true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { //下载完成 initSound(this.response); }; xhr.send(); } //这里用来存储背景音乐的路径 loadAudioFile('audio/music.flac'); } catch (e) { console.log('无法找到音乐！'); }构建播放器后，可以在进入页面时缓存，然后自动播放背景音乐，不考虑浏览器。 注意事项 这种方法只对浏览器有效，无法实现 APP 上自动播放音乐的效果。 API 的 AudioContext 可能用的不多，欢迎大牛和有个人见解的人站出来和我们讨论。
