文字探照灯动画效果

代码语言:html

所属分类:动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>  Light</title>
<style>
  body {
  align-items: center;
  background-color: #333;
  display: flex;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
}
.cut {
  -webkit-clip-path: polygon(
    0% 0.67435509%,
    0.001% 76.864952%,
    19.42075% 76.865953%,
    22.46631% 76.864653%,
    30.31704% 76.865953%,
    33.13677% 47.031546%,
    33.1839% 50.785461%,
    33.32214% 54.23464%,
    33.54677% 57.387721%,
    33.85306% 60.253326%,
    34.23628% 62.840094%,
    34.69172% 65.156644%,
    35.21463% 67.211618%,
    35.80031% 69.013635%,
    36.44402% 70.571332%,
    37.14103% 71.893338%,
    37.88663% 72.988278%,
    38.67609% 73.864787%,
    39.50467% 74.531496%,
    40.36766% 74.997031%,
    41.26033% 75.270026%,
    42.17796% 75.359106%,
    42.79248% 75.337566%,
    43.34577% 75.270556%,
    43.84433% 75.153996%,
    44.29456% 74.983879%,
    44.70298% 74.756465%,
    45.07605% 74.467785%,
    45.42022% 74.113946%,
    45.74197% 73.691036%,
    46.04773% 73.195128%,
    46.34401% 72.622304%,
    46.63726% 71.968665%,
    46.93395% 71.230286%,
    47.24054% 70.403257%,
    47.5635% 69.483676%,
    47.90929% 68.467619%,
    48.28437% 67.351177%,
    48.45936% 71.283418%,
    48.25409% 74.596894%,
    47.73926% 77.320726%,
    46.98559% 79.484024%,
    46.06376% 81.11591%,
    45.04449% 82.245492%,
    43.99847% 82.90189%,
    42.99642% 83.114224%,
    42.1259% 83.048804%,
    41.39429% 82.833447%,
    40.75194% 82.439579%,
    40.14922% 81.838615%,
    39.53649% 81.00198%,
    38.86411% 79.90108%,
    38.08244% 78.507334%,
    37.14186% 76.792163%,
    33.80685% 91.543673%,
    33.84909% 91.638653%,
    33.97881% 91.907037%,
    34.19255% 92.324074%,
    34.48828% 92.864981%,
    34.86401% 93.504986%,
    35.31772% 94.219313%,
    35.84738% 94.983189%,
    36.45098% 95.77184%,
    37.12652% 96.560491%,
    37.87197% 97.324367%,
    38.68533% 98.038693%,
    39.56456% 98.678699%,
    40.50767% 99.219606%,
    41.51264% 99.636642%,
    42.57744% 99.905027%,
    43.70008% 100.00001%,
    45.3833% 99.81836%,
    46.91204% 99.294008%,
    48.29263% 98.457807%,
    49.5314% 97.340624%,
    50.63468% 95.973321%,
    51.6088% 94.386759%,
    52.4601% 92.611803%,
    53.19491% 90.679317%,
    53.81956% 88.620167%,
    54.34037% 86.465211%,
    54.76369% 84.245314%,
    55.09584% 81.991341%,
    55.34317% 79.734156%,
    55.512% 77.504618%,
    55.60864% 75.333594%,
    55.63963% 73.251949%,
    60.00647% 76.864744%,
    67.79977% 76.865944%,
    67.7368% 43.495897%,
    67.75267% 43.270713%,
    67.81953% 42.676825%,
    67.96674% 41.836712%,
    68.22363% 40.872831%,
    68.61964% 39.90768%,
    69.18407% 39.063723%,
    69.94627% 38.463444%,
    70.93557% 38.22934%,
    71.91779% 38.440578%,
    72.66131% 39.014408%,
    73.19932% 39.8304%,
    73.56507% 40.768115%,
    73.79172% 41.707108%,
    73.91248% 42.526936%,
    73.96059% 43.107158%,
    73.96929% 43.327315%,
    73.97069% 76.864943%,
    81.93269% 76.865943%,
    87.6615% 62.799012%,
    87.85758% 66.916778%,
    88.39617% 70.388007%,
    89.2028% 73.242751%,
    90.20296% 75.511059%,
    91.32215% 77.222988%,
    92.4859% 78.408587%,
    93.61971% 79.097908%,
    94.6491% 79.321013%,
    95.60816% 79.125423%,
    96.55657% 78.609779%,
    97.45819% 77.880765%,
    98.27691% 77.045067%,
    98.97658% 76.209364%,
    99.52108% 75.480351%,
    99.87428% 74.964706%,
    100.00002% 74.769116%,
    98.75354% 58.753189%,
    97.98846% 59.646744%,
    97.38228% 60.003531%,
    96.87156% 59.906701%,
    96.39283% 59.439427%,
    95.95146% 58.673472%,
    95.60953% 57.68349%,
    95.38854% 56.556968%,
    95.31008% 55.381396%,
    95.3106% 39.18248%,
    99.52256% 39.18398%,
    99.52356% 21.410726%,
    95.30962% 21.412026%,
    95.31058% 6.0692323%,
    87.66093% 6.0700351%,
    87.66162% 21.336908%,
    84.16708% 21.338008%,
    84.16763% 39.344765%,
    87.66093% 39.345965%,
    87.66162% 62.798939%,
    81.93221% 76.864665%,
    81.93361% 38.26962%,
    81.81609% 34.57647%,
    81.47744% 31.116206%,
    80.93121% 27.968823%,
    80.1922% 25.214313%,
    79.27529% 22.932668%,
    78.19531% 21.203884%,
    76.96713% 20.107951%,
    75.60558% 19.724864%,
    74.26178% 19.853761%,
    73.06237% 20.253672%,
    71.98548% 20.944436%,
    71.00925% 21.945893%,
    70.11182% 23.277879%,
    69.27131% 24.960232%,
    68.46586% 27.012791%,
    67.6736% 29.455393%,
    67.6736% 0%,
    60.02491% 0%,
    60.00601% 76.864676%,
    55.63917% 73.251881%,
    55.64937% 21.463792%,
    48.03081% 21.464992%,
    48.03178% 54.557111%,
    47.66381% 54.847189%,
    46.75368% 55.485336%,
    45.58659% 56.123482%,
    44.44874% 56.413561%,
    43.34051% 56.086972%,
    42.23858% 54.775862%,
    41.76832% 53.595785%,
    41.39361% 51.983186%,
    41.14583% 49.875935%,
    41.05625% 47.211902%,
    41.15561% 44.561786%,
    41.42955% 42.49123%,
    41.84188% 40.930505%,
    42.35644% 39.809895%,
    43.54749% 38.61013%,
    44.71326% 38.334149%,
    45.82599% 38.620902%,
    46.90035% 39.251799%,
    47.71055% 39.8827%,
    48.03079% 40.169452%,
    48.03176% 26.158149%,
    47.91883% 25.854759%,
    47.59273% 25.05491%,
    47.06746% 23.924088%,
    46.35789% 22.627779%,
    45.47888% 21.331472%,
    44.44534% 20.20065%,
    43.27213% 19.400801%,
    41.97416% 19.097411%,
    41.1763% 19.205161%,
    40.3773% 19.528775%,
    39.58441% 20.068801%,
    38.8049% 20.825787%,
    38.04601% 21.800278%,
    37.31501% 22.99282%,
    36.61918% 24.403965%,
    35.96576% 26.034257%,
    35.36201% 27.884243%,
    34.81521% 29.95447%,
    34.33261% 32.245487%,
    33.92147% 34.757839%,
    33.58906% 37.492075%,
    33.34263% 40.44874%,
    33.18944% 43.628383%,
    33.13676% 47.031551%,
    30.31708% 76.864681%,
    30.31786% 20.826693%,
    22.46641% 20.827993%,
    22.46791% 76.864682%,
    19.42068% 76.865982%,
    19.42188% 56.049503%,
    8.43032% 56.051003%,
    8.43093% 0.53039046%
  );
          clip-path: polygon(
    0% 0.67435509%,
    0.001% 76.864952%,
    19.42075% 76.865953%,
    22.46631% 76.864653%,
    30.31704% 76.865953%,
    33.13677% 47.031546%,
    33.1839% 50.785461%,
    33.32214% 54.23464%,
    33.54677% 57.387721%,
    33.85306% 60.253326%,
    34.23628% 62.840094%,
    34.69172% 65.156644%,
    35.21463% 67.211618%,
    35.80031% 69.013635%,
    36.44402% 70.571332%,
    37.14103% 71.893338%,
    37.88663% 72.988278%,
    38.67609% 73.864787%,
    39.50467% 74.531496%,
    40.36766% 74.997031%,
    41.26033% 75.270026%,
    42.17796% 75.359106%,
    42.79248% 75.337566%,
    43.34577% 75.270556%,
    43.84433% 75.153996%,
    44.29456% 74.983879%,
    44.70298% 74.756465%,
    45.07605% 74.467785%,
    45.42022% 74.113946%,
    45.74197% 73.691036%,
    46.04773% 73.195128%,
    46.34401% 72.622304%,
    46.63726% 71.968665%,
    46.93395% 71.230286%,
    47.24054% 70.403257%,
    47.5635% 69.483676%,
    47.90929% 68.467619%,
    48.28437% 67.35.........完整代码请登录后点击上方下载按钮下载查看

网友评论0