纯css实现文字缩写无限循环幻灯效果
代码语言：html
所属分类：动画
代码描述：纯css实现文字缩写无限循环幻灯效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html {
background: aliceblue;
}
html:before {
animation: First 15s forwards infinite;
background-color: #fec8d8;
clip-path: circle(75vmax at center center);
content: "";
height: 100vmax;
left: calc((-100vmax + 100%) / 2);
position: absolute;
top: calc((-100vmax + 100%) / 2);
width: 100vmax;
}
body {
animation: Second 15s forwards infinite;
background-color: #d291bc;
clip-path: circle(75vmax at center center);
height: 100vmax;
margin: 0;
left: calc((-100vmax + 100%) / 2);
position: absolute;
top: calc((-100vmax + 100%) / 2);
width: 100vmax;
}
html:after {
animation: Third 15s forwards infinite;
background-color: #957dad;
clip-path: circle(25vmax at center center);
content: "";
height: 100vmax;
left: calc((-100vmax + 100%) / 2);
position: absolute;
top: calc((-100vmax + 100%) / 2);
width: 100vmax;
}
@keyframes First {
0% {
clip-path: polygon(
-2008% 352.5139%,
-1799.2386% -251.98836%,
-1718.4405% -252.0291%,
-1721.236% -96.064691%,
-1778.3975% 96.368067%,
-1664.4665% 96.016808%,
-1721.236% -96.064691%,
-1718.4405% -252.0291%,
-1643.3962% -251.98836%,
-1434.241% 353.0076%,
-1299.077% 352.89091%,
-1456.3835% -251.9277%,
-1298.0754% -251.8973%,
-1206.6759% 174.09388%,
-1100.4278% -252.20928%,
-967.24733% -251.94153%,
-860.99922% 174.08006%,
-769.4013% -251.70152%,
-611.31929% -252.20928%,
-768.53765% 352.87186%,
-550.69482% 352.90897%,
-550.7293% -252.20928%,
-228.29163% -252.02123%,
-228.3328% -119.8729%,
-402.80084% -119.80866%,
-403.07472% -18.675002%,
-254.69037% -18.760667%,
-254.50228% 112.56642%,
-402.9723% 112.75447%,
-402.88664% 220.81344%,
-221.41397% 220.45388%,
-170.75597% 219.68648%,
-47.63368% 158.15564%,
-46.321221% 161.03314%,
-42.300726% 168.61958%,
-35.447651% 179.34506%,
-25.637234% 191.64018%,
-12.744928% 203.93523%,
3.3540704% 214.66071%,
22.784264% 222.2472%,
45.670458% 225.12471%,
56.219768% 224.47161%,
65.87851% 222.54843%,
74.501446% 219.40909%,
81.943338% 215.10771%,
88.059075% 209.69842%,
92.703291% 203.23506%,
95.73092% 195.77178%,
96.996637% 187.36263%,
94.904893% 173.03065%,
87.852838% 160.35226%,
76.419872% 148.86258%,
61.185133% 138.09606%,
42.72789% 127.58775%,
21.627454% 116.87229%,
-1.5370768% 105.48469%,
-26.186306% 92.959673%,
-52.41795% 78.479552%,
-76.623947% 63.069161%,
-98.35044% 46.038812%,
-117.14395% 26.698347%,
-132.55089% 4.3582446%,
-144.11738% -21.671788%,
-151.38993% -52.081433%,
-153.91502% -87.560555%,
-150.08421% -126.80219%,
-138.96803% -161.63128%,
-121.13101% -191.79513%,
-97.13734% -217.04111%,
-67.551558% -237.11667%,
-32.93799% -251.76916%,
6.1389584% -260.74587%,
49.115096% -263.79428%,
95.180682% -259.11299%,
133.58941% -246.4896%,
165.00981% -228.05448%,
190.10979% -205.93803%,
209.558% -182.27108%,
224.02252% -159.18374%,
234.17158% -138.80664%,
240.67366% -123.27028%,
116.90363% -66.920806%,
115.98001% -69.488053%,
113.08358% -76.25503%,
108.02616% -85.818777%,
100.61904% -96.776671%,
90.673928% -107.72601%,
78.002547% -117.26431%,
62.416549% -123.98865%,
43.727451% -126.49641%,
34.975347% -125.92116%,
26.197064% -124.19562%,
17.762178% -121.23435%,
10.04061% -116.95116%,
3.4022384% -111.26042%,
-1.7830576% -104.07643%,
-5.145659% -95.313143%,
-6.315558% -84.884963%,
-3.400206% -71.954816%,
4.6625984% -59.868579%,
17.025618% -48.502227%,
32.840965% -37.732381%,
51.261531% -27.4354%,
71.439517% -17.48752%,
92.527294% -7.7650578%,
113.67763% 1.855539%,
149.03791% 19.881946%,
177.93469% 38.436219%,
200.92038% 57.727481%,
218.54674% 77.964781%,
231.36604% 99.356857%,
239.93041% 122.1127%,
244.79174% 146.44135%,
246.50246% 172.55178%,
294.76075% 42.600267%,
300.1376% -14.468747%,
315.94538% -69.713643%,
341.69962% -121.35112%,
376.91622% -167.59824%,
421.11068% -206.67216%,
473.79866% -236.78956%,
534.49604% -256.16753%,
602.71818% -263.02307%,
606.14946% -125.01876%,
583.2294% -122.99186%,
557.81013% -116.47116%,
531.60385% -104.79688%,
506.3229% -87.308915%,
483.67936% -63.347691%,
465.38546% -32.253151%,
453.15363% 6.6345822%,
448.69574% 53.975345%,
452.41155% 92.98555%,
462.92406% 127.55604%,
479.28066% 157.41294%,
500.52904% 182.28223%,
525.71685% 201.89032%,
553.89146% 215.96329%,
584.10052% 224.2271%,
615.39158% 226.40787%,
646.6959% 222.53534%,
676.4334% 212.95366%,
703.77238% 197.83431%,
727.88067% 177.3487%,
747.92624% 151.66838%,
763.07731% 120.96463%,
772.50186% 85.409005%,
775.36788% 45.173041%,
772.44342% 14.818261%,
764.56299% -15.276892%,
751.60101% -43.944886%,
733.43088% -70.018376%,
709.92684% -92.330011%,
680.96257% -109.71222%,
646.41212% -120.99753%,
606.14946% -125.01876%,
602.71818% -263.02307%,
656.48528% -261.8472%,
712.0823% -250.07344%,
766.73565% -227.67035%,
817.67161% -194.60688%,
862.11668% -150.8514%,
897.2972% -96.373053%,
920.43952% -31.140278%,
928.76996% 44.878246%,
1002.9047% 46.766084%,
1003.1342% -252.09032%,
1195.0297% -252.20928%,
1345.5074% 130.75746%,
1496.6818% -252.09032%,
1688.6965% -251.86079%,
1688.8153% 353.21077%,
1792.8614% 353.09179%,
1793.3287% -252.09032%,
2115.8684% -251.74194%,
2115.401% -119.45792%,
1940.8917% -119.92526%,
1941.0106% -18.555856%,
2089.3894% -18.793975%,
2089.8568% 112.79331%,
1940.8917% 112.91215%,
1940.9552% 220.45941%,
2122.8704% 220.2216%,
2122.9136% 353.21077%,
1792.8614% 353.09179%,
1688.8153% 353.21077%,
1546.9628% 352.86244%,
1546.6146% -43.403331%,
1413.863% 303.6351%,
1278.0864% 303.5163%,
1145.335% -43.403331%,
1144.9866% 353.21077%,
1003.4911% 352.86244%,
1002.9047% 46.766084%,
928.76996% 44.878246%,
921.50116% 121.68841%,
901.07232% 187.36251%,
869.54954% 242.19415%,
828.999% 286.47704%,
781.48716% 320.50473%,
729.0802% 344.5711%,
673.84434% 358.96958%,
617.84569% 363.99387%,
556.71993% 359.67547%,
497.94517% 345.59512%,
443.30857% 321.51169%,
394.59794% 287.18367%,
353.60023% 242.36989%,
322.10319% 186.82881%,
301.89423% 120.3194%,
294.76075% 42.600267%,
246.50246% 172.55178%,
245.03422% 205.75413%,
236.71542% 239.22066%,
221.51649% 271.50535%,
199.4082% 301.16241%,
170.36091% 326.74584%,
134.34546% 346.81008%,
91.332382% 359.9088%,
41.292138% 364.59634%,
-5.655765% 361.1069%,
-45.358898% 351.33865%,
-78.519218% 336.34177%,
-105.83911% 317.16654%,
-128.02059% 294.8632%,
-145.76567% 270.4819%,
-159.77682% 245.073%,
-170.75597% 219.68648%,
-221.41397% 220.45388%,
-221.3776% 352.79025%,
-550.69482% 352.90897%,
-768.53765% 352.87186%,
-936.12338% 352.85791%,
-1033.6432% -26.71612%,
-1131.4169% 352.60411%,
-1299.077% 352.89091%,
-1434.241% 353.0076%,
-1583.1286% 352.60713%,
-1626.0125% 217.25462%,
-1816.271% 216.98479%,
-1859.5876% 352.95856%
);
z-index: 0;
}
16.66% {
clip-path: polygon(
-2008% 352.5139%,
-1799.2386% -251.98836%,
-1718.4405% -252.0291%,
-1721.236% -96.064691%,
-1778.3975% 96.368067%,
-1664.4665% 96.016808%,
-1721.236% -96.064691%,
-1718.4405% -252.0291%,
-1643.3962% -251.98836%,
-1434.241% 353.0076%,
-1299.077% 352.89091%,
-1456.3835% -251.9277%,
-1298.0754% -251.8973%,
-1206.6759% 174.09388%,
-1100.4278% -252.20928%,
-967.24733% -251.94153%,
-860.99922% 174.08006%,
-769.4013% -251.70152%,
-611.31929% -252.20928%,
-768.53765% 352.87186%,
-550.69482% 352.90897%,
-550.7293% -252.20928%,
-228.29163% -252.02123%,
-228.3328% -119.8729%,
-402.80084% -119.80866%,
-403.07472% -18.675002%,
-254.69037% -18.760667%,
-254.50228% 112.56642%,
-402.9723% 112.75447%,
-402.88664% 220.81344%,
-221.41397% 220.45388%,
-170.75597% 219.68648%,
-47.63368% 158.15564%,
-46.321221% 161.03314%,
-42.300726% 168.61958%,
-35.447651% 179.34506%,
-25.637234% 191.64018%,
-12.744928% 203.93523%,
3.3540704% 214.66071%,
22.784264% 222.2472%,
45.670458% 225.12471%,
56.219768% 224.47161%,
65.87851% 222.54843%,
74.501446% 219.40909%,
81.943338% 215.10771%,
88.059075% 209.69842%,
92.703291% 203.23506%,
95.73092% 195.77178%,
96.996637% 187.36263%,
94.904893% 173.03065%,
87.852838% 160.35226%,
76.419872% 148.86258%,
61.185133% 138.09606%,
42.72789% 127.58775%,
21.627454% 116.87229%,
-1.5370768% 105.48469%,
-26.186306% 92.959673%,
-52.41795% 78.479552%,
-76.623947% 63.069161%,
-98.35044% 46.038812%,
-117.14395% 26.698347%,
-132.55089% 4.3582446%,
-144.11738% -21.671788%,
-151.38993% -52.081433%,
-153.91502% -87.560555%,
-150.08421% -126.80219%,
-138.96803% -161.63128%,
-121.13101% -191.79513%,
-97.13734% -217.04111%,
-67.551558% -237.11667%,
-32.93799% -251.76916%,
6.1389584% -260.74587%,
49.115096% -263.79428%,
95.180682% -259.11299%,
133.58941% -246.4896%,
165.00981% -228.05448%,
190.10979% -205.93803%,
209.558% -182.27108%,
224.02252% -159.18374%,
234.17158% -138.80664%,
240.67366% -123.27028%,
116.90363% -66.920806%,
115.98001% -69.488053%,
113.08358% -76.25503%,
108.02616% -85.818777%,
100.61904% -96.776671%,
90.673928% -107.72601%,
78.002547% -117.26431%,
62.416549% -123.98865%,
43.727451% -126.49641%,
34.975347% -125.92116%,
26.197064% -124.19562%,
17.762178% -121.23435%,
10.04061% -116.95116%,
3.4022384% -111.26042%,
-1.7830576% -104.07643%,
-5.145659% -95.313143%,
-6.315558% -84.884963%,
-3.400206% -71.954816%,
4.6625984% -59.868579%,
17.025618% -48.502227%,
32.840965% -37.732381%,
51.261531% -27.4354%,
71.439517% -17.48752%,
92.527294% -7.7650578%,
113.67763% 1.855539%,
149.03791% 19.881946%,
177.93469% 38.436219%,
200.92038% 57.727481%,
218.54674% 77.964781%,
231.36604% 99.356857%,
239.93041% 122.1127%,
244.79174% 146.44135%,
246.50246% 172.55178%,
294.76075% 42.600267%,
300.1376% -14.468747%,
315.94538% -69.713643%,
341.69962% -121.35112%,
376.91622% -167.59824%,
421.11068% -206.67216%,
473.79866% -236.78956%,
534.49604% -256.16753%,
602.71818% -263.02307%,
606.14946% -125.01876%,
583.2294% -122.99186%,
557.81013% -116.47116%,
531.60385% -104.79688%,
506.3229% -87.308915%,
483.67936% -63.347691%,
465.38546% -32.253151%,
453.15363% 6.6345822%,
448.69574% 53.975345%,
452.41155% 92.98555%,
462.92406% 127.55604%,
479.28066% 157.41294%,
500.52904% 182.28223%,
525.71685% 201.89032%,
553.89146% 215.96329%,
584.10052% 224.2271%,
615.39158% 226.40787%,
646.6959% 222.53534%,
676.4334% 212.95366%,
703.77238% 197.83431%,
727.88067% 177.3487%,
747.92624% 151.66838%,
763.07731% 120.96463%,
772.50186% 85.409005%,
775.36788% 45.173041%,
772.44342% 14.818261%,
764.56299% -15.276892%,
751.60101% -43.944886%,
733.43088% -70.018376%,
709.92684% -92.330011%,
680.96257% -109.71222%,
646.41212% -120.99753%,
606.14946% -125.01876%,
602.71818% -263.02307%,
656.48528% -261.8472%,
712.0823% -250.07344%,
766.73565% -227.67035%,
817.67161% -194.60688%,
862.11668% -150.8514%,
897.2972% -96.373053%,
920.43952% -31.140278%,
928.76996% 44.878246%,
1002.9047% 46.766084%,
1003.1342% -252.09032%,
1195.0297% -252.20928%,
1345.5074% 130.75746%,
1496.6818% -252.09032%,
1688.6965% -251.86079%,
1688.8153% 353.21077%,
1792.8614% 353.09179%,
1793.3287% -252.09032%,
2115.8684% -251.74194%,
2115.401% -119.45792%,
1940.8917% -119.92526%,
1941.0106% -18.555856%,
2089.3894% -18.793975%,
2089.8568% 112.79331%,
1940.8917% 112.91215%,
1940.9552% 220.45941%,
2122.8704% 220.2216%,
2122.9136% 353.21077%,
1792.8614% 353.09179%,
1688.8153% 353.21077%,
1546.9628% 352.86244%,
1546.6146% -43.403331%,
1413.863% 303.6351%,
1278.0864% 303.5163%,
1145.335% -43.403331%,
1144.9866% 353.21077%,
1003.4911% 352.86244%,
1002.9047% 46.766084%,
928.76996% 44.878246%,
921.50116% 121.68841%,
901.07232% 187.36251%,
869.54954% 242.19415%,
828.999% 286.47704%,
781.48716% 320.50473%,
729.0802% 344.5711%,
673.84434% 358.96958%,
617.84569% 363.99387%,
556.71993% 359.67547%,
497.94517% 345.59512%,
443.30857% 321.51169%,
394.59794% 287.18367%,
353.60023% 242.36989%,
322.10319% 186.82881%,
301.89423% 120.3194%,
294.76075% 42.600267%,
246.50246% 172.55178%,
245.03422% 205.75413%,
236.71542% 239.22066%,
221.51649% 271.50535%,
199.4082% 301.16241%,
170.36091% 326.74584%,
134.34546% 346.81008%,
91.332382% 359.9088%,
41.292138% 364.59634%,
-5.655765% 361.1069%,
-45.358898% 351.33865%,
-78.519218% 336.34177%,
-105.83911% 317.16654%,
-128.02059% 294.8632%,
-145.76567% 270.4819%,
-159.77682% 245.073%,
-170.75597% 219.68648%,
-221.41397% 220.45388%,
-221.3776% 352.79025%,
-550.69482% 352.90897%,
-768.53765% 352.87186%,
-936.12338% 352.85791%,
-1033.6432% -26.71612%,
-1131.4169% 352.60411%,
-1299.077% 352.89091%,
-1434.241% 353.0076%,
-1583.1286% 352.60713%,
-1626.0125% 217.25462%,
-1816.271% 216.98479%,
-1859.5876% 352.95856%
);
z-index: 0;
}
16.67% {
clip-path: polygon(
-2008% 352.5139%,
-1799.2386% -251.98836%,
-1718.4405% -252.0291%,
-1721.236% -96.064691%,
-1778.3975% 96.368067%,
-1664.4665% 96.016808%,
-1721.236% -96.064691%,
-1718.4405% -252.0291%,
-1643.3962% -251.98836%,
-1434.241% 353.0076%,
-1299.077% 352.89091%,
-1456.3835% -251.9277%,
-1298.0754% -251.8973%,
-1206.6759% 174.09388%,
-1100.4278% -252.20928%,
-967.24733% -251.94153%,
-860.99922% 174.08006%,
-769.4013% -251.70152%,
-611.31929% -252.20928%,
-768.53765% 352.87186%,
-550.69482% 352.90897%,
-550.7293% -252.20928%,
-228.29163% -252.02123%,
-228.3328% -119.8729%,
-402.80084% -119.80866%,
-403.07472% -18.675002%,
-254.69037% -18.760667%,
-254.50228% 112.56642%,
-402.9723% 112.75447%,
-402.88664% 220.81344%,
-221.41397% 220.45388%,
-170.75597% 219.68648%,
-47.63368% 158.15564%,
-46.321221% 161.03314%,
-42.300726% 168.61958%,
-35.447651% 179.34506%,
-25.637234% 191.64018%,
-12.744928% 203.93523%,
3.3540704% 214.66071%,
22.784264% 222.2472%,
45.670458% 225.12471%,
56.219768% 224.47161%,
65.87851% 222.54843%,
74.501446% 219.40909%,
81.943338% 215.10771%,
88.059075% 209.69842%,
92.703291% 203.23506%,
95.73092% 195.77178%,
96.996637% 187.36263%,
94.904893% 173.03065%,
87.852838% 160.35226%,
76.419872% 148.86258%,
61.185133% 138.09606%,
42.72789% 127.58775%,
21.627454% 116.87229%,
-1.5370768% 105.48469%,
-26.186306% 92.959673%,
-52.41795% 78.479552%,
-76.623947% 63.069161%,
-98.35044% 46.038812%,
-117.14395% 26.698347%,
-132.55089% 4.3582446%,
-144.11738% -21.671788%,
-151.38993% -52.081433%,
-153.91502% -87.560555%,
-150.08421% -126.80219%,
-138.96803% -161.63128%,
-121.13101% -191.79513%,
-97.13734% -217.04111%,
-67.551558% -237.11667%,
-32.93799% -251.76916%,
6.1389584% -260.74587%,
49.115096% -263.79428%,
95.180682% -259.11299%,
133.58941% -246.4896%,
165.00981% -228.05448%,
190.10979% -205.93803%,
209.558% -182.27108%,
224.02252% -159.18374%,
234.17158% -138.80664%,
240.67366% -123.27028%,
116.90363% -66.920806%,
115.98001% -69.488053%,
113.08358% -76.25503%,
108.02616% -85.818777%,
100.61904% -96.776671%,
90.673928% -107.72601%,
78.002547% -117.26431%,
62.416549% -123.98865%,
43.727451% -126.49641%,
34.975347% -125.92116%,
26.197064% -124.19562%,
17.762178% -121.23435%,
10.04061% -116.95116%,
3.4022384% -111.26042%,
-1.7830576% -104.07643%,
-5.145659% -95.313143%,
-6.315558% -84.884963%,
-3.400206% -71.954816%,
4.6625984% -59.868579%,
17.025618% -48.502227%,
32.840965% -37.732381%,
51.261531% -27.4354%,
71.439517% -17.48752%,
92.527294% -7.7650578%,
113.67763% 1.855539%,
149.03791% 19.881946%,
177.93469% 38.436219%,
200.92038% 57.727481%,
218.54674% 77.964781%,
231.36604% 99.356857%,
239.93041% 122.1127%,
244.79174% 146.44135%,
246.50246% 172.55178%,
294.76075% 42.600267%,
300.1376% -14.468747%,
315.94538% -69.713643%,
341.69962% -121.35112%,
376.91622% -167.59824%,
421.11068% -206.67216%,
473.79866% -236.78956%,
534.49604% -256.16753%,
602.71818% -263.02307%,
606.14946% -125.01876%,
583.2294% -122.99186%,
557.81013% -116.47116%,
531.60385% -104.79688%,
506.3229% -87.308915%,
483.67936% -63.347691%,
465.38546% -32.253151%,
453.15363% 6.6345822%,
448.69574% 53.975345%,
452.41155% 92.98555%,
462.92406% 127.55604%,
479.28066% 157.41294%,
500.52904% 182.28223%,
525.71685% 201.89032%,
553.89146% 215.96329%,
584.10052% 224.2271%,
615.39158% 226.40787%,
646.6959% 222.53534%,
676.4334% 212.95366%,
703.77238% 197.83431%,
727.88067% 177.3487%,
747.92624% 151.66838%,
763.07731% 120.96463%,
772.50186% 85.409005%,
775.36788% 45.173041%,
772.44342% 14.818261%,
764.56299% -15.276892%,
751.60101% -43.944886%,
733.43088% -70.018376%,
709.92684% -92.330011%,
680.96257% -109.71222%,
646.41212% -120.99753%,
606.14946% -125.01876%,
602.71818% -263.02307%,
656.48528% -261.8472%,
712.0823% -250.07344%,
766.73565% -227.67035%,
817.67161% -194.60688%,
862.11668% -150.8514%,
897.2972% -96.373053%,
920.43952% -31.140278%,
928.76996% 44.878246%,
1002.9047% 46.766084%,
1003.1342% -252.09032%,
1195.0297% -252.20928%,
1345.5074% 130.75746%,
1496.6818% -252.09032%,
1688.6965% -251.86079%,
1688.8153% 353.21077%,
1792.8614% 353.09179%,
1793.3287% -252.09032%,
2115.8684% -251.74194%,
2115.401% -119.45792%,
1940.8917% -119.92526%,
1941.0106% -18.555856%,
2089.3894% -18.793975%,
2089.8568% 112.79331%,
1940.8917% 112.91215%,
1940.9552% 220.45941%,
2122.8704% 220.2216%,
2122.9136% 353.21077%,
1792.8614% 353.09179%,
1688.8153% 353.21077%,
1546.9628% 352.86244%,
1546.6146% -43.403331%,
1413.863% 303.6351%,
1278.0864% 303.5163%,
1145.335% -43.403331%,
1144.9866% 353.21077%,
1003.4911% 352.86244%,
1002.9047% 46.766084%,
928.76996% 44.878246%,
921.50116% 121.68841%,
901.07232% 187.36251%,
869.54954% 242.19415%,
828.999% 286.47704%,
781.48716% 320.50473%,
729.0802% 344.5711%,
673.84434% 358.96958%,
617.84569% 363.99387%,
556.71993% 359.67547%,
497.945.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0