使用SVG当背景做一个有个性的播放器
给大家分享一个使用SVG做背景的个性播放器，效果如下：
当滚动鼠标时，爱心会放大，播放区域也会跟着放大。
以下是代码实现，欢迎大家复制粘贴和收藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用SVG当背景做一个有个性的播放器</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: '微软雅黑', sans-serif;
}
body {
min-height: 4000px;
background: #000;
}
.banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.banner video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.banner #background {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
background-repeat: no-repeat;
background-size: 100px;
background-position: center;
mix-blend-mode: screen;
}
</style>
</head>
<body>
<div class="banner">
<video muted autoplay loop src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/11.mp4"></video>
<div >
<svg viewBox="0 -28 512.00002 512" xmlns="http://www.w3.org/2000/svg" id="background">
<path d="m471.382812 44.578125c-26.503906-28.746094-62.871093-44.578125-102.410156-44.578125-29.554687 0-56.621094 9.34375-80.449218 27.769531-12.023438 9.300781-22.917969 20.679688-32.523438 33.960938-9.601562-13.277344-20.5-24.660157-32.527344-33.960938-23.824218-18.425781-50.890625-27.769531-80.445312-27.769531-39.539063 0-75.910156 15.832031-102.414063 44.578125-26.1875 28.410156-40.613281 67.222656-40.613281 109.292969 0 43.300781 16.136719 82.9375 50.78125 124.742187 30.992188 37.394531 75.535156 75.355469 127.117188 119.3125 17.613281 15.011719 37.578124 32.027344 58.308593 50.152344 5.476563 4.796875 12.503907 7.4375 19.792969 7.4375 7.285156 0 14.316406-2.640625 19.785156-7.429687 20.730469-18.128907 40.707032-35.152344 58.328125-50.171876 51.574219-43.949218 96.117188-81.90625 127.109375-119.304687 34.644532-41.800781 50.777344-81.4375 50.777344-124.742187 0-42.066407-14.425781-80.878907-40.617188-109.289063zm0 0"/>
</svg>
</div>
<script>
let background = document.getElementById('background')
window.addEventListener('scroll', function () {
let value = window.scrollY
background.style.backgroundSize = 100 + value * 2 + 'px'
})
</script>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/06/01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
