H5與CSS3
HTML5音訊標籤
<audio src="http://file.xuanmomo.com/Faded.mp3">您當前瀏覽器版本過低,請更換瀏覽器!</audio>
標籤內的文字只在不認識標籤的低版本中顯示
音訊標籤基本API:
play():播放
pause():暫停
obj.duration:總時間
obj.currentTime:當前時間
obj.volume:音量
obj.ended:是否播放完成(Boolean)
timeupdate事件,返回當前播放位置
CSS3 filter(濾鏡) 屬性
filter: none | blur() | brightness() | contrast() | drop-shadow() |
grayscale() | hue-rotate() | invert() | opacity() | saturate() |
sepia() | url();
提示: 使用空格分隔多個濾鏡。
所有濾鏡例項
以下例項演示了所有濾鏡的使用方法:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
相關文章
- iOS與H5互動iOSH5
- H5 與 APP 互動!H5APP
- H5與原生SDK對比H5
- css3 transform與animation妙用CSSS3ORM
- h5與安卓和ios除錯H5安卓iOS除錯
- CSS3邊框與圓角CSSS3
- H5與企業微信jssdk整合H5JS
- h5與微信小程式直播開發H5微信小程式
- 簡單聊聊H5的pushState與replaceStateH5
- H5頁面是什麼?淺析H5頁面的設計思路與方法H5
- H5與安卓/IOS進行原生互動H5安卓iOS
- h5與native互動總結1H5
- uniapp webview如何與H5相互通訊APPWebViewH5
- swift之與h5之間的互動(一)SwiftH5
- WebView詳解與簡單實現Android與H5互調WebViewAndroidH5
- 圖解css3:核心技術與案例實戰.3.1 CSS3邊框簡介圖解CSSS3
- JavaScript與CSS3動畫方式改變元素尺寸JavaScriptCSSS3動畫
- 移動端與H5頁面畫素的差異與關係H5
- H5活動刮刮卡功能的實現與注意事項H5
- PC、APP、H5三端測試的相同與不同APPH5
- HTML5與CSS3知識點總結HTMLCSSS3
- css3自定義checkbox與radioboxCSSS3
- 《HTML5與CSS3權威指南(第3版·下冊)》——第18章CSS3概述HTMLCSSS3
- 《HTML5與CSS3實戰指南》——1.5我們為什麼應關注CSS3HTMLCSSS3
- Flutter處理Webview與H5通訊的常見方式FlutterWebViewH5
- H5與APP混合開發通訊互動記錄H5APP
- H5與APP混合開發遇到的問題總結H5APP
- H5 與 Native 互動之 JSBridge 技術H5JS
- 專案分享五:H5圖片壓縮與上傳H5
- 第8章 CSS3中的變形與動畫(上)CSSS3動畫
- 第9章 CSS3中的變形與動畫(下)CSSS3動畫
- 《HTML5與CSS3權威指南(第3版·下冊)》——18.2 使用CSS3能做什麼HTMLCSSS3
- 關於H5與小程式路由引數的那些事兒H5路由
- 分享移動端app與h5的產品差別(一)APPH5
- h5 ios輸入框與鍵盤 相容性優化H5iOS優化
- CSS3CSSS3
- H5高階H5
- H5新增APIH5API