(1)HTML5 Web Audio API 添加声音
对简单或复杂的声音进行混合;
精确控制声音的密度和节奏;
内置淡入/淡出,颗粒噪点,音调控制等效果;
灵活的处理在音频流的声道,使它们成为拆分和合并;
处理从
#######最直接有效:可以直接产生声音,并且可以随意控制音调,时长以及淡入淡出等效果
window.AudioContext = window.AudioContext || window.webkitAudioContext;
(function () {
if (!window.AudioContext) {
alert('当前浏览器不支持Web Audio API');
return;
}
// 按钮元素
var eleButton = document.getElementById('button');
// 创建新的音频上下文接口
var audioCtx = new AudioContext();
// 发出的声音频率数据,表现为音调的高低
var arrFrequency = [100, 2000, 300, 196.00, 220.00, 246.94, 261.63, 293.66, 329.63, 349.23, 392.00, 440.00, 493.88, 523.25, 587.33, 659.25, 698.46, 783.99, 880.00, 987.77, 1046.50];
// 音调依次递增或者递减处理需要的参数
var start = 0, direction = 1;
// 鼠标hover我们的按钮的时候
eleButton.addEventListener('click', function () {
// 当前频率
var frequency = arrFrequency[start];
// 如果到头,改变音调的变化规则(增减切换)
if (!frequency) {
direction = -1 * direction;
start = start + 2 * direction;
frequency = arrFrequency[start];
}
// 改变索引,下一次hover时候使用
start = start + direction;
// 创建一个OscillatorNode, 它表示一个周期性波形(振荡),基本上来说创造了一个音调
var oscillator = audioCtx.createOscillator();
// 创建一个GainNode,它可以控制音频的总音量
var gainNode = audioCtx.createGain();
// 把音量,音调和终节点进行关联
oscillator.connect(gainNode);
// audioCtx.destination返回AudioDestinationNode对象,表示当前audio context中所有节点的最终节点,一般表示音频渲染设备
gainNode.connect(audioCtx.destination);
// 指定音调的类型,其他还有square|triangle|sawtooth
oscillator.type = 'sawtooth';
// 设置当前播放声音的频率,也就是最终播放声音的调调
oscillator.frequency.value = frequency;
// 当前时间设置音量为0
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
// 0.01秒后音量为1
// audioCtx.currentTime,其值是以双精度浮点型数字返回硬件调用的秒数,这个时间无法改变的,无论是
// 暂停或者重置都不可以
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
// 音调从当前时间开始播放
oscillator.start(audioCtx.currentTime);
// 1秒内声音慢慢降低,是个不错的停止声音的方法
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
// 1秒后完全停止声音
oscillator.stop(audioCtx.currentTime + 1);
});
})();
https://codepen.io/gregh/embed/LxJEaj?height=256&theme-id=0&default-tab=result&embed-version=2
(2)CSS新单位
2.1基于vw等viewport视区单位配合rem响应式排版和布局
vw – 视区宽度百分值
vh – 视区高度百分值
vmin – vw或vh,取小的那个
vmax – vw或vh,取大的那个
兼容性
JS实现自适应REM
function setRootFontSize () {
const xViewport = window.innerWidth;
const maxWidth = xViewport > 414 ? 414 : xViewport;
const fs = maxWidth / 3.75;
window.document.documentElement.style.fontSize = `${fs}px`;
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);
纯CSS实现自适应REM
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6的375px尺寸作为16px基准,414px正好18px大小, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39);
}
}
@media screen and (min-width: 414px) {
html {
/* 414px-1000px每100像素宽字体增加1px(18px-22px) */
font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586);
}
}
@media screen and (min-width: 600px) {
html {
/* 600px-1000px每100像素宽字体增加1px(20px-24px) */
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400);
}
}
@media screen and (min-width: 1000px) {
html {
/* 1000px往后是每100像素0.5px增加 */
font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
}
}
水平居中布局与滚动条跳动
当前web届,绝大多数的页面间布局都是水平居中布局,主体定个宽度,然后margin: 0 auto的节奏~
https://shangmiyun.com/#/account/login?backPath=%2F
http://www.zhangxinxu.com/study/201501/body-scrollbar-no-jump.html
1
1
1
1
1
1
1
1
1
1
1
1
.wrap-outer {
margin-left: calc(100vw - 100%);
}
首先,.wrap-outer指的是居中定宽主体的父级
然后,calc是CSS3中的计算,IE9+浏览器支持
最后,100vw相对于浏览器的window.innerWidth,是浏览器的内部宽度,滚动条宽度也计算在内!而100%是可用宽度,是不含滚动条的宽度。
于是,calc(100vw - 100%)就是浏览器滚动条的宽度大小(如果有,如果没有滚动条则是0)!左右都有一个滚动条宽度(或都是0)被占用,主体内容就可以永远居中浏览器,从而没有任何跳动!
2.2 ch单位与等宽字体
对比:
iiiiii
mmmmmm
iiiiii
mmmmmm
1ch表示一个0字符的宽度,所以000000所占据的宽度就是6ch。此单位,基本上,必须与等宽字体一起使用才有用。
应用:打点动画
(3)了解CSS/CSS3原生变量var
由less/sass的用法联想到这个东西,感觉这两个东西最大的好处就是可以定义CSS变量,以提供给其他页面复用,于是有了var将迎刃而解并且是原生的。
#######兼容性
#######作用域
#######CSS变量使用完整语法
CSS变量使用的完整语法为:var( [, ]? ),用中文表示就是:var( <自定义属性名> [, <默认值 ]? ),但是,不能包含$,[,^,(,%等字符,普通字符局限在只要是“数字[0-9]”“字母[a-zA-Z]”“下划线_”和“短横线-”这些组合,但是可以是中文,日文或者韩文
.box {
--1: #369;
}
body {
background-color: var(--1, #cd0000);
}
body {
--color: 20px;
background-color: #369;
background-color: var(--color, #cd0000);
}
请问,此时
的背景色是?A. transparent B. 20px C. #369 D. #cd0000
body {
--size: 20;
font-size: var(--size)px;
}
.
.
.
.
等于 font-size:20 px
.
.
..
body {
--size: 20;
font-size: calc(var(--size) * 1px);
}
#######变量定义时可传递
.box {
--columns: 4;
--margins: calc(24px / var(--columns));
--space: calc(4px * var(--columns));
--fontSize: calc(20px - 4 / var(--columns));
}
@media screen and (max-width: 1200px) {
.box {
--columns: 3;
}
}
@media screen and (max-width: 900px) {
.box {
--columns: 2;
}
}
@media screen and (max-width: 600px) {
.box {
--columns: 1;
}
}
#######可以用JS修改
:root {
--颜色: cornflowerblue;
}
h1 { color: var(--颜色); }
a { color: var(--颜色); }
strong { color: var(--颜色); }
const rootEl = document.documentElement;
rootEl.style.setProperty('--颜色', 'plum');
(4)@supports 操作符
众所周知,不同的浏览器(不管是现代浏览器还是老版本的IE浏览器)对Web页面的解析都是不一样,为了让Web页面在这些浏览器下渲染达到基本一致的情况,给用户更好的体验,我们必须为他们写不同的样式代码。CSS3 Conditional Rules Module Level 3推出了“@supports”条件判断规则,它充许我们可以根据浏览器对CSS特性的支持情况来定义不同的样式。
@supports not (display: flex){ #container div{float:left;}}
@supports ( display: flexbox )
and
( not ( display: flex ) ) {
.foo { display: flexbox; }
}
在@supports中“or”和“and”混用时,必须使用括号()来区分其优先级:
@supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) { // ...}
@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) { // ...}
#######JS支持
在javascript中支持css的@supports的写法是“window.CSS.supports”。CSS.supports规范提供了两种写法
var supportsFlex = CSS.supports("display", "flex");
var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)")
(5)CSS3 filter:drop-shadow滤镜与box-shadow区别应用
box-shadow: h-shadow v-shadow blur spread color inset;
filter: drop-shadow(h-shadow v-shadow spread color);
内阴影
盒阴影 VS 真正意义的阴影
应用:图片非透明区域变色
.test4{
width: 100px;
height: 100px;
position: relative;
left: -100px;
background: url(./icon3.png) no-repeat;
background-size: 100% 100%;
filter: drop-shadow(red 100px 0px);
border-right: 100px solid transparent;
}
.test{
width: 100px;
height: 100px;
margin: 0 auto;
overflow: hidden;
}
在Chrome浏览器下,如果一个元素的主体部分,无论以何种方式,只要在页面中不可见,其drop-shadow是不可见的;实体部分哪怕有1像素可见,则drop-shadow完全可见。