文字探照灯动画效果
代码语言: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