video标签支持包含透明图层视频文件示例代码
代码语言:html
所属分类:多媒体
代码描述:video标签支持包含透明图层视频文件示例代码,苹果Safari的mov文件与chrome浏览器的webm视频文件支持透明图层。
代码标签: video 标签 支持 透明 图层 视频 文件 示例 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap"); :root { --color: #ECC091; --gray: #6A747E; --dark: #222222; } .e-white { background-color: #fff; } .t-white { color: #fff; } .e-black { background-color: #000; } .t-black { color: #000; } .t-dark { color: var(--dark); } .e-color { background-color: var(--color); } .e-dark { background-color: var(--dark); } .t-color { color: var(--color); } .e-gray { background-color: var(--gray); } .t-gray { color: var(--gray); } .t-100 { font-weight: 100; } .t-400 { font-weight: 400; } .t-500 { font-weight: 500; } .t-700 { font-weight: 700; } .t-900 { font-weight: 900; } .e-flex { display: flex; justify-content: center; align-items: center; } .e-flex-col { display: flex; justify-content: center; align-items: center; flex-direction: column; } .e-flex-wrap { display: flex; flex-wrap: wrap; justify-content: center; } .e-rel { position: relative; } .e-abs { position: absolute; } .e-fixed { position: fixed; } .e-wp { width: 100%; } .e-hp { height: 100%; } .e-85 { width: 85%; } .e-85w { width: 85vw; } .e-wvw { width: 100vw; } .e-hvh { height: 100vh; } .e-dn { display: none; } .e-img-fit { object-fit: cover; } .t-center { text-align: center; } .e-hidden { overflow: hidden; } .e-curp { cursor: pointer; } e-upper { text-transform: uppercase; } button { background: none repeat scroll 0 0 transparent; border: medium none; border-spacing: 0; color: #26589F; outline: none; padding: 0; } @media only screen and (min-wi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0