创建带有模糊视频背景的标题字体填充：CSS + SVG剪裁+视频背景+画布

时间：2018-07-24 05:49:48

标签： html css css3 svg html5-canvas

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

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

我理解这样的概念，即一个白色背景div 和一个带滤镜的画布彼此重叠以产生模糊效果。

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

通过我的努力，我可以使用相应的create剪辑视频。但是我无法用高对比度的模糊视频填充字体。

请在我的努力下找到

我的密码笔：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;
    }
  }
}

1 个答案:

答案 0 :(得分：2)

最后能够创建一个小的预览oi :) 我使用的逻辑是：我有一个canvas元素和一个video元素。在播放视频时，我将在画布上绘制视频并将画布放置在视频上方。现在，我从0开始绘制。可以动态更改此坐标。这是codepen预览：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>

。

相关问题
最新问题