<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.spot {
position: relative;
display: inline-block;
font-size: 48px;
}
.spot::after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
content: attr(title);
color: #fff;
animation: spot 3s ease-in-out infinite alternate;
}
@keyframes spot {
0% {
clip-path: ellipse(32px 32px at 0% 50%);
}
100% {
clip-path: ellipse(32px 32px at 100% 50%);
}
}
body{
background-color: #3c3c3c;
}
</style>
</head>
<body>
<h1 class="spot" title="Audemars Piguet">Audemars Piguet</h1>
</body>
</html>
总结
前端探照灯效果,细节很重要。