创建标题字体填充模糊视频背景:CSS+SVG剪辑+视频背景+画布

Question

在过去的几天里，我一直在努力创建一个模糊+闪电效果的

效果类似于https://www.apple.com/uk/iphone/photography-how-to/。我想重新创建"在iphone字体上"的效果

我理解这样一个概念，即让一个白色背景div和一个带滤镜的画布相互重叠以创建模糊效果。

然后我们可以在后台创建一个SVG剪辑来显示所需的输出。

在我的努力中，我能够剪辑视频与各自的创建。但我无法用高对比度的模糊视频填充字体。

请在我的努力下找到

我的代码笔：https://codepen.io/atom217-the-styleful/pen/KBmvBQ?editors=1100

所需输出：https://www.apple.com/uk/iphone/photography-how-to/

HTML

<section class="section section-hero active animated" style="
">
<div class="hero-content football-hero" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
<div class="hero-video-container">
<video class="hero-video" style="width:100%;height:100%;" autoplay playsinline muted loop preload poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/oceanshot.jpg">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ocean-small.webm" />
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" />
</video>        
</div>
<div class="hero-headline-wrapper">
<h1 class="hero-headline typography-hero-headline" style="display: block; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
<span class="visuallyhidden">Most awesome</span>
<div class="top-class">
How to write
<div class="text-mask" style="opacity: 1;">
<div class="text-mask-screen"></div>
<canvas width="1920" height="248" class="text-mask-canvas-background" style="width: 1920px; height: 248px;"></canvas>
<svg class="text-mask-svg">
<clipPath id="text-mask-svg-path">
<text class="text-mask-svg-content" x="25%" y="50%">on video</text>
</clipPath>
</svg>
</div>
</div>
</h1>
</div>
</div>
</section>

CSS

body {
font-size: 17px;
line-height: 1.47059;
font-weight: 400;
letter-spacing: -.022em;
font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
background-color: #000;
color: #fff;
font-style: normal;
}
.section-hero {
position: relative;
z-index: 1;
overflow: hidden;
height: 90vh;
min-height: 620px;
max-height: 980px;
}
.section-hero .hero-content {
position: relative;
z-index: 1;
height: 100%;
}
.football-hero .hero-video-container {
background-repeat: no-repeat;
}
.hero-video-container {
background-repeat: no-repeat;
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center top;
transition: opacity 0.5s ease-in-out;
}
hero-video {
background-size: cover;
background-position: center top;
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
.section-hero .hero-headline-wrapper {
position: absolute;
z-index: 4;
width: 100%;
top: 40%;
text-align: center;
}
.section-hero .hero-headline {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.typography-hero-headline {
font-size: 80px;
line-height: 1;
font-weight: 600;
letter-spacing: -.005em;
font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
html.svg-clip-path .section-hero .hero-headline {
display: none;
opacity: 0;
transform: translate3d(0, 25px, 0);
}
.visuallyhidden {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0;
}
.text-mask{
position: relative;
clip-path: url(#text-mask-svg-path);
&-screen{
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fff;
}
&-canvas-background{
display: block;
position: absolute;
height: auto;
z-index: 2;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-filter: blur(20px) saturate(140%) brightness(300%);
filter: blur(20px) saturate(140%) brightness(300%);
opacity: 0.8;
}
&-svg{
position: relative;
z-index: 10;
width: 100%;
height: 160px;

&-contnet{
text-anchor: middle;
font-size: 80px;
line-height: 1;
font-weight: 600;
letter-spacing: -.005em;
font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}
}
}

Answer 1

终于可以创建一个小预览oi:(我使用的逻辑是：我有一个画布元素和一个视频元素。当视频播放时，我会在画布上绘制视频，并将画布放置在视频上。现在，我正在从0开始绘制。可以动态地改变该坐标。以下是代码笔预览：https://codepen.io/aravi-pen/full/WKjXbq/

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var video = document.getElementById('video');
video.addEventListener('canplaythrough', function() {
var $this = this; //cache
(function loop() {
if (!$this.paused && !$this.ended) {
ctx.drawImage($this, 0, 0);
setTimeout(loop, 1000 / 30); // drawing at 30fps
}
})();
}, 0);

body {
font-size: 17px;
line-height: 1.47059;
font-weight: 400;
letter-spacing: -0.022em;
font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
background-color: #000;
color: #fff;
font-style: normal;
}
.section-hero {
position: relative;
z-index: 1;
overflow: hidden;
height: 90vh;
min-height: 620px;
max-height: 980px;
}
.section-hero .hero-content {
position: relative;
z-index: 1;
height: 100%;
}
.football-hero .hero-video-container {
background-repeat: no-repeat;
}
.hero-video-container {
background-repeat: no-repeat;
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center top;
transition: opacity 0.5s ease-in-out;
}
hero-video {
background-size: cover;
background-position: center top;
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100%;
min-height: 100%;
min-width: 100%;
}
.section-hero .hero-headline-wrapper {
position: absolute;
z-index: 4;
width: 100%;
top: 40%;
text-align: center;
}
.section-hero .hero-headline {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.typography-hero-headline {
font-size: 80px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.005em;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
html.svg-clip-path .section-hero .hero-headline {
display: none;
opacity: 0;
transform: translate3d(0, 25px, 0);
}
.visuallyhidden {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(0px 0px 99.9% 99.9%);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0;
}
.text-mask {
position: relative;
z-index: 1;
overflow: hidden;
-webkit-clip-path: url(#text-mask-svg-path);
clip-path: url(#text-mask-svg-path);
min-height: 160px;
}
.text-mask-screen {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.text-mask-canvas-background {
display: block;
position: absolute;
height: auto;
z-index: 2;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-filter: blur(20px) saturate(140%) brightness(300%);
filter: blur(20px) saturate(140%) brightness(300%);
opacity: 0.8;
}
.text-mask-svg {
position: relative;
z-index: 10;
width: 100%;
height: 160px;
}
.text-mask-svg-contnet {
text-anchor: middle;
font-size: 80px;
line-height: 1;
font-weight: 600;
letter-spacing: -0.005em;
font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.text-mask {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-position: 50% -146px;
background-size: 1175px 400px;
background-repeat: no-repeat;
background-image: url(https://www.apple.com/v/iphone/photography-how-to/d/images/overview/hero_football_fallback_background_large.jpg);
}

<section class="section section-hero active animated">
<div class="hero-content football-hero" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
<div class="hero-video-container" data-component-list="HeroBackgroundVideoComponent" aria-hidden="true">
<video id="video" class="hero-video" style="width:100%;height:100%;" autoplay playsinline muted loop preload poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/oceanshot.jpg">
		 <source src="https://www.apple.com/105/media/us/iphone/photography-how-to/2018/b9007d3d_e869_40c1_805c_16df669820f0/anim/hero_kick_background_large.mp4" />
	   </video>        
</div>
<div class="hero-headline-wrapper">
<h1 class="hero-headline typography-hero-headline" data-component-list="HeroTextMaskedVideoComponent" style="display: block; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
<span class="visuallyhidden">Most awesome</span>
<div role="presentation" aria-hidden="true">
How to write
<div class="text-mask" aria-label="on iPhone." style="opacity: 1;">
<div class="text-mask-screen"></div>
<canvas id="canvas"  class="text-mask-canvas-background"></canvas>
<svg class="text-mask-svg">
<clipPath id="text-mask-svg-path">
<text class="text-mask-svg-content" x="25%" y="50%">on video</text>
</clipPath>
</svg>
</div>
</div>
</h1>
</div>
</div>
</section>