灯光摆动（light pendulum）

更多有趣示例 尽在 小红砖社区

示例

HTML

<svg viewBox="-50 0 700 300">
	<defs>  

   <clipPath id="text-1">  

    <text id="Mask" font-family="Montserrat-Black, Montserrat" font-size="200" font-weight="700" letter-spacing="50" fill="#121212">
                    <tspan x="" y="195">Light.</tspan>
                </text>

   </clipPath>  

 </defs>
<g>
	
	<text id="Mask" font-family="Montserrat-Black, Montserrat" font-size="200" font-weight="700" letter-spacing="50" fill="#121212">
                    <tspan x="0" y="195">Light.</tspan>
                </text>
	</text>
	</g>
//clip-path="url(#text-1)"
 <g clip-path="url(#text-1)">  
	<polygon class="light" fill="#F8F8F8" points="91.7663783 -3.51439292 176.859739 -3.51439292 234.191437 922.485607 -154.808563 887.785896"></polygon>
 </g>  
</svg>

CSS

body {
	margin: 0;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

svg {
  width: 700px;
  height: 300px;
}
.light {
	transform-origin: 15% 18%;
	transform:rotate(60deg)
}
.light {
	transform-origin: 30% 0;
	animation: 6s animate ease-in-out reverse infinite;
}

@keyframes animate {
	0% {
		transform-origin: 19% 16%;
	transform: rotate(60deg)
	}
	50% {
		transform-origin: 18% 7%;
		transform: rotate(-80deg);
	}
	100% {
		transform-origin: 19% 16%;
	transform:rotate(60deg)
	}
}