css实现文字聚焦探照灯动画效果代码-html代码-BFW代码库

css实现文字聚焦探照灯动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现文字聚焦探照灯动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: #72B565;
}

.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 235px;
  height: 70px;
  white-space: nowrap;
}

.focus {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: Arial;
  text-transform: uppercase;
  letter-spacing: 2px;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  font-size: 65px;
  opacity: 0.6;
  color: #fff;
}

.mask {
  position: absolute;
  left: -5px;
  top: -2px;
  width: 70px;
  font-family: Arial;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 65px;
  clip: rect(0px, 70px, 75px, 0px);
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0, #fff)) no-repeat, -webkit-gradient(linear, left top, right top, from(#fff), color-stop(0, #fff)) no-repeat, -webkit-gradient(linear, left top, right top, from(#fff), color-stop(0, #fff)) bottom left no-repeat, -webkit-gradient(linear, left top, right top, from(#fff), color-stop(0, #fff)) bottom left no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0, #fff)) bottom right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0, #fff)) bottom right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0, #fff)) top right no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0, #fff)) top right no-repeat;
  background: linear-gradient(#fff, #fff 0) no-rep.........完整代码请登录后点击上方下载按钮下载查看