程序人生卡塔尔世界杯元素python海龟绘图附源代码，世界杯主题前端特效5个附源码

卡塔尔世界杯元素python海龟绘图（附源代码）

世界杯主题前端特效5个（附源码）程序人生

本文目录：

一、python turtle海龟绘图卡塔尔世界杯元素

（1）、绘制效果图

（2）、代码演示方法和代码命令解释

（3）、本机运行、将绘图动画打包发给别人

（4）、我的 “2022年卡塔尔世界杯元素” 绘图完整源代码

二、世界杯主题网页特效

（1）、为透明png图片添加阴影特效

（2）、css三维空间移动特效

（3）、css滤镜发光按钮

（4）、翻转卡片特效

（5）、不停弹跳的旋转足球（带红色光影）

---

       世界杯元素版权属活动举办方和相关机构，本例只是用做python turtle绘图示范和绘图效果展示

如果你看不到图片，可以试试点击下面链接：

https://github.com/nijingqingxing/webweb/blob/main/Laeeb_600.png

 如果你看不到图片，可以试试点击下面链接：

https://github.com/nijingqingxing/webweb/blob/main/Laeeb_600.png

　　国际足联世界杯（FIFA World Cup），简称“世界杯”，是由全世界国家级别球队参与，象征足球界最高荣誉，并具有最大知名度和影响力的足球赛事。世界杯全球电视转播观众超过35亿。世界杯每四年举办一次，任何国际足联会员国（地区）都可以派出代表队报名参加这项赛事。

　　2022年卡塔尔世界杯于北京时间2022年11月21日至12月18日举行。

　　我是不懂足球的女性，就单从程序代码角度来看世界杯吧。先用python画一个卡塔尔世界杯吉元素，再从前端特效角度探讨一下世界杯主题网站的实现的几种方法。

　　编外话：

　　今天是2022年12月14日，很快就到2023年了。几年了，困扰各个国家的疫情还是没能彻底解决，这些不是某个人某个国家单方面就能解决的问题。

　　我一直在广州没离开过，广州现在的疫情情况大家都知道。 个人觉得，对于新冠病毒，大家还是需要以平常心对待，现在拼的是免疫力和心态。

　　只要不发展成重症，身体基础好的很快就会初步康复，这需要拼的是免疫力（没有专门特效药情况下）。

　　在这期间，首先不要自己把自己弄病了。对未知的危险，人本能会有恐惧感，人之常情。所以需要拼的是心态。

　　每个人需要做的就是，照顾好自己，照顾好家人，要相信，疫情一定会过去。人类发展史上出现过数不清的未知病菌病毒，人类不是还没灭亡吗？如果生病了，就放宽心，好好休息，要相信你自己一定能打败病毒，重新夺取回属于你的健康。没有生病的，就好好珍惜所有，开开心心努力过好每一天！

　　世界杯元素版权属活动举办方和相关机构，本例只是用做python turtle绘图示范，请勿用作其他方面。

一、python turtle海龟绘图卡塔尔世界杯元素

（1）、世界杯吉元素绘制效果图

　　2022年卡塔尔世界杯吉元素，在阿拉伯语中意为技艺高超的球员。它鼓励人们相信自己，将带领所有人享受足球的快乐。

（2）、代码演示方法和代码命令解释

  　　将源代码完整拷贝，保存成：你的文件名.py   ，然后在python环境下运行。你会看到和我一样的“2022年卡塔尔世界杯吉元素”效果。

  　　代码的语法解释部分，可点击查看文章里的介绍：皮卡丘python turtle海龟绘图（电力球版）附源代码

（3）、本机运行、将绘图动画打包发给别人

 　　可点击查看文章里的介绍：

　　巴斯光年python turtle绘图__附源代码

（4）、我的 “2022年卡塔尔世界杯元素” 绘图完整源代码

1.  
   #-*- coding: UTF-8 -*-
2.  
   import turtle as t
3.  
    
4.  
   """
5.  
   =================================================
6.  
   @Project ->Adversity Awake 世界杯系列
7.  
   @类别 : 世界杯->世界杯之1
8.  
   @Author : 逆境清醒
9.  
   @Date : 2022/12/13 06:02
10.  
    @Desc :https://blog.csdn.net/weixin_69553582
11.  
    =================================================
12.  
    """
13.  
    # 设置背景颜色，窗口位置以及大小
14.  
     
15.  
    t.colormode(255)# 颜色模式
16.  
    t.speed(0)
17.  
    t.screensize(800,600,"black")#画布大小背景颜色
18.  
    t.setup(width=800, height=600,startx=None, starty=None)#绘图窗口的大小和起始坐标
19.  
     
20.  
    t.title("逆境清醒2022卡塔尔世界杯吉元素！")#设置绘图窗口的标题
21.  
    t.resizemode('noresize') #大小调整模式:auto,user,noresize
22.  
    t.tracer(1)
23.  
    t.hideturtle()
24.  
     
25.  
    def mlingpen(x, y):
26.  
    t.penup()
27.  
    t.goto(x, y)
28.  
    t.pendown()
29.  
     
30.  
     
31.  
    def mlingfacecheek(x, y, fx):
32.  
    mlingpen(x, y)
33.  
    t.seth(fx)
34.  
    t.pencolor("#fcd1ae")
35.  
    t.fillcolor('#fcd1ae')
36.  
    t.begin_fill()
37.  
    n = 1.8
38.  
    for i in range(120):
39.  
    if 0 <= i < 30 or 60 <= i < 90:
40.  
    n -= 0.05
41.  
    t.left(3)
42.  
    t.fd(n)
43.  
    else:
44.  
    n = 0.05
45.  
    t.left(3)
46.  
    t.fd(n)
47.  
    t.end_fill()
48.  
     
49.  
    def mlingfacecheek_h(x, y, fx):
50.  
    mlingpen(x, y)
51.  
    t.seth(fx)
52.  
    t.pencolor("#fcc6ae")
53.  
    t.fillcolor('#fcc6ae')
54.  
    t.begin_fill()
55.  
    n = 1.6
56.  
    for i in range(120):
57.  
    if 0 <= i < 30 or 60 <= i < 90:
58.  
    n -= 0.06
59.  
    t.left(3)
60.  
    t.fd(n)
61.  
    else:
62.  
    n = 0.06
63.  
    t.left(3)
64.  
    t.fd(n)
65.  
    t.end_fill()
66.  
     
67.  
    def mlingellipse(x,y,jiajiao,l, size,color1,color2):
68.  
    mlingpen(x, y)
69.  
    t.seth(jiajiao 270)
70.  
    t.pensize(size)
71.  
    t.pencolor(color1)
72.  
    t.fillcolor(color2)
73.  
    t.pendown()
74.  
    t.begin_fill()
75.  
    a = 0.3
76.  
    for i in range(120):
77.  
    if 0 <= i < 30 or 60 <= i < 90:
78.  
    a = l
79.  
    t.lt(3)
80.  
    t.fd(a)
81.  
    else:
82.  
    a -= l
83.  
    t.lt(3)
84.  
    t.fd(a)
85.  
    t.penup()
86.  
    t.end_fill()
87.  
     
88.  
    def mlingrotate_left(chishu, angle, length):
89.  
    for i in range(chishu):
90.  
    t.left(angle)
91.  
    t.forward(length)
92.  
     
93.  
    def mlingrotate_right(chishu, angle, length):
94.  
    for i in range(chishu):
95.  
    t.right(angle)
96.  
    t.forward(length)
97.  
     
98.  
     
99.  
    def llaeebeye():
100.  
     #AdversityAwake
101.  
     t.seth(22)
102.  
     mlingpen(80,62)
103.  
     t.pensize(3)
104.  
     t.pencolor("#000000")
105.  
     t.fillcolor('#000000')
106.  
     t.begin_fill()
107.  
     t.circle(40,62)
108.  
     t.circle(21,160)
109.  
     t.circle(40,53)
110.  
     t.goto(80,62)
111.  
     t.end_fill()
112.  
     t.seth(20)
113.  
     mlingpen(80,62)
114.  
     t.pensize(2)
115.  
     t.pencolor("#000000")
116.  
     t.fillcolor('#ffffff')
117.  
     t.begin_fill()
118.  
     t.circle(35,62)
119.  
     t.circle(20,164)
120.  
     t.circle(40,53)
121.  
     t.goto(80,62)
122.  
     t.end_fill()
123.  
     t.seth(30)
124.  
     mlingpen(76,65)
125.  
     t.pensize(3)
126.  
     t.pencolor("#452b14")
127.  
     t.fillcolor('#e58f59')
128.  
     t.begin_fill()
129.  
     t.circle(31,90)
130.  
     t.lt(12)
131.  
     t.circle(12,70)
132.  
     t.lt(27)
133.  
     t.circle(40,68)
134.  
     t.goto(76,65)
135.  
     t.end_fill()
136.  
     t.seth(0)
137.  
     mlingpen(66,72)
138.  
     t.pensize(1)
139.  
     t.pencolor("#000000")
140.  
     t.fillcolor('#000000')
141.  
     t.begin_fill()
142.  
     t.circle(20,120)
143.  
     t.circle(10,120)
144.  
     t.lt(6)
145.  
     t.circle(40,40)
146.  
     t.goto(66,72)
147.  
     t.end_fill()
148.  
     t.seth(0)
149.  
     mlingpen(68,75)
150.  
     t.pencolor("#373331")
151.  
     t.fillcolor('#3f3a38')
152.  
     t.begin_fill()
153.  
     t.circle(5,360)
154.  
     t.end_fill()
155.  
     t.seth(0)
156.  
     mlingpen(73,102)
157.  
     t.pensize(1)
158.  
     t.pencolor("#000000")
159.  
     t.fillcolor('#ffffff')
160.  
     t.begin_fill()
161.  
     t.circle(6,360)
162.  
     t.end_fill()
163.  
     #AdversityAwake
164.  
     t.seth(40)
165.  
     mlingpen(10,70)
166.  
     t.pensize(3)
167.  
     t.pencolor("#000000")
168.  
     t.fillcolor('#000000')
169.  
     t.begin_fill()
170.  
     t.circle(30,170)
171.  
     t.circle(23,120)
172.  
     t.goto(10,70)
173.  
     t.end_fill()
174.  
     t.seth(44)
175.  
     mlingpen(10,70)
176.  
     t.pensize(2)
177.  
     t.pencolor("#000000")
178.  
     t.fillcolor('#ffffff')
179.  
     t.begin_fill()
180.  
     t.circle(29,170)
181.  
     t.circle(23,100)
182.  
     t.goto(10,70)
183.  
     t.end_fill()
184.  
     t.seth(30)
185.  
     mlingpen(0,75)
186.  
     t.pensize(3)
187.  
     t.pencolor("#452b14")
188.  
     t.fillcolor('#e58f59')
189.  
     t.begin_fill()
190.  
     t.circle(23,280)
191.  
     t.goto(0,75)
192.  
     t.end_fill()
193.  
     t.seth(30)
194.  
     mlingpen(-3,82)
195.  
     t.pensize(3)
196.  
     t.pencolor("#000000")
197.  
     t.fillcolor('#000000')
198.  
     t.begin_fill()
199.  
     t.circle(15,360)
200.  
     t.goto(-3,82)
201.  
     t.end_fill()
202.  
     t.seth(0)
203.  
     mlingpen(-11,82)
204.  
     t.pencolor("#373331")
205.  
     t.fillcolor('#3f3a38')
206.  
     t.begin_fill()
207.  
     t.circle(5,360)
208.  
     t.end_fill()
209.  
     t.seth(0)
210.  
     mlingpen(-6,102)
211.  
     t.pensize(1)
212.  
     t.pencolor("#000000")
213.  
     t.fillcolor('#ffffff')
214.  
     t.begin_fill()
215.  
     t.circle(6,360)
216.  
     t.end_fill()
217.  
      
218.  
      
219.  
     def llaeebmeim():
220.  
     t.seth(100)
221.  
     mlingpen(-30,125)
222.  
     t.pensize(2)
223.  
     t.pencolor("#000000")
224.  
     t.fillcolor('#000000')
225.  
     t.begin_fill()
226.  
     t.goto(25,133)
227.  
     t.circle(10,100)
228.  
     t.rt(30)
229.  
     t.circle(50,60)
230.  
     t.goto(-30,125)
231.  
     t.end_fill()
232.  
     #AdversityAwake
233.  
     t.seth(120)
234.  
     mlingpen(60,130)
235.  
     t.pensize(2)
236.  
     t.pencolor("#000000")
237.  
     t.fillcolor('#000000')
238.  
     t.begin_fill()
239.  
     t.goto(106,130)
240.  
     t.circle(30,40)
241.  
     t.circle(25,80)
242.  
     t.goto(60,130)
243.  
     t.end_fill()
244.  
      
245.  
      
246.  
     def llaeebmouse():
247.  
     #AdversityAwake
248.  
     t.seth(-30)
249.  
     mlingpen(0,55)
250.  
     t.pensize(3)
251.  
     t.pencolor("#000000")
252.  
     #t.begin_fill()
253.  
     t.circle(130,16)
254.  
     t.circle(48,40)
255.  
     #t.end_fill()
256.  
      
257.  
      
258.  
     def llaeebbozi():
259.  
     #AdversityAwake
260.  
     t.seth(120)
261.  
     mlingpen(145,40)
262.  
     t.pensize(3)
263.  
     t.pencolor("#000000")
264.  
     t.fillcolor('#805d57')
265.  
     t.begin_fill()
266.  
     t.circle(12,120)
267.  
     t.rt(30)
268.  
     t.circle(55,17)
269.  
     t.rt(10)
270.  
     t.circle(-110,70)
271.  
     t.circle(100,50)
272.  
     t.circle(50,45)
273.  
     t.goto(-140,-210)
274.  
     t.goto(110,-210)
275.  
     t.lt(120)
276.  
     t.circle(100,60)
277.  
     t.goto(145,40)
278.  
     t.end_fill()
279.  
      
280.  
     def llaeebyifu():
281.  
     t.seth(160)
282.  
     mlingpen(-70,140)
283.  
     t.pencolor("#624655")
284.  
     t.pensize(6)
285.  
     t.circle(170,20)
286.  
     t.circle(30,95)
287.  
     t.dot(15,"#624655")
288.  
     t.seth(-100)
289.  
     mlingpen(-70,140)
290.  
     t.circle(-30,130)
291.  
     t.dot(15,"#624655")
292.  
     t.seth(-180)
293.  
     mlingpen(-70,140)
294.  
     t.circle(30,50)
295.  
     t.circle(-190,20)
296.  
     t.circle(190,20)
297.  
     t.circle(-30,50)
298.  
     t.dot(15,"#624655")
299.  
     t.seth(190)
300.  
     mlingpen(-70,140)
301.  
     t.circle(-250,20)
302.  
     t.circle(250,10)
303.  
     t.circle(-30,50)
304.  
     t.dot(15,"#624655")
305.  
     #AdversityAwake
306.  
     t.seth(0)
307.  
     mlingpen(-140,-210)
308.  
     t.pensize(3)
309.  
     t.pencolor("#000000")
310.  
     t.fillcolor('#ffffff')
311.  
     t.begin_fill()
312.  
     t.goto(110,-210)
313.  
     t.circle(100,60)
314.  
     t.lt(20)
315.  
     t.circle(50,20)
316.  
     t.circle(-50,30)
317.  
     t.circle(80,60)
318.  
     t.goto(100,140)
319.  
     t.rt(20)
320.  
     t.circle(80,60)
321.  
     t.circle(100,60)
322.  
     t.circle(190,10)
323.  
     t.rt(15)
324.  
     t.circle(290,55)
325.  
     t.goto(-140,-210)
326.  
     t.end_fill()
327.  
      
328.  
      
329.  
     def llaeebhand():
330.  
     t.seth(0)
331.  
     mlingpen(195,-165)
332.  
     t.pensize(3)
333.  
     t.pencolor("#000000")
334.  
     t.fillcolor('#ffffff')
335.  
     t.begin_fill()
336.  
     t.lt(75)
337.  
     t.circle(50,20)
338.  
     t.circle(-50,30)
339.  
     t.circle(80,60)
340.  
     t.goto(150,40)
341.  
     t.lt(130)
342.  
     t.circle(-100,70)
343.  
     t.goto(20,-40)
344.  
     t.lt(105)
345.  
     t.circle(200,60)
346.  
     t.goto(195,-165)
347.  
     t.end_fill()
348.  
     t.seth(0)
349.  
     mlingpen(190,-160)
350.  
     t.pensize(2)
351.  
     t.pencolor("#eee7f1")
352.  
     t.fillcolor('#eee7f1')
353.  
     t.begin_fill()
354.  
     t.lt(75)
355.  
     t.circle(50,20)
356.  
     t.circle(-50,30)
357.  
     t.circle(80,60)
358.  
     t.goto(147,25)
359.  
     t.lt(130)
360.  
     t.circle(-100,20)
361.  
     t.end_fill()
362.  
     t.seth(0)
363.  
     mlingpen(185,-160)
364.  
     t.pensize(2)
365.  
     t.pencolor("#faf4fc")
366.  
     t.fillcolor('#faf4fc')
367.  
     t.begin_fill()
368.  
     t.lt(75)
369.  
     t.circle(50,20)
370.  
     t.circle(-50,30)
371.  
     t.circle(75,55)
372.  
     t.goto(145,21)
373.  
     t.lt(130)
374.  
     t.circle(-95,30)
375.  
     t.end_fill()
376.  
     t.seth(0)
377.  
     mlingpen(185,-160)
378.  
     t.pensize(2)
379.  
     t.pencolor("#fdfafe")
380.  
     t.fillcolor('#fdfafe')
381.  
     t.begin_fill()
382.  
     t.lt(75)
383.  
     t.circle(45,20)
384.  
     t.circle(-45,30)
385.  
     t.circle(65,55)
386.  
     t.goto(143,13)
387.  
     t.lt(130)
388.  
     t.circle(-95,30)
389.  
     t.end_fill()
390.  
     #AdversityAwake
391.  
     t.seth(-80)
392.  
     mlingpen(-127.85,12.90)
393.  
     t.pensize(3)
394.  
     t.pencolor("#000000")
395.  
     t.fillcolor('#ffffff')
396.  
     t.begin_fill()
397.  
     t.circle(46,55)
398.  
     t.lt(60)
399.  
     t.circle(-30,40)
400.  
     t.lt(10)
401.  
     t.circle(-150,30)
402.  
     t.goto(20,-40)
403.  
     t.goto(110,-5)
404.  
     t.circle(-8,80)
405.  
     t.lt(2)
406.  
     t.circle(-280,55)
407.  
     t.goto(-140,-210)
408.  
     t.rt(89)
409.  
     t.circle(-300,48)
410.  
     t.goto(-127.85,12.90)
411.  
     t.end_fill()
412.  
     t.seth(-120)
413.  
     mlingpen(-101.00,-20.80)
414.  
     t.circle(90,32)
415.  
     t.lt(120)
416.  
     t.circle(-80,50)
417.  
     t.circle(66,60)
418.  
     mlingpen(40,-80)
419.  
     mlingellipse(40,-80,46,0.06,3,"#911a2b","#dd4159")
420.  
     mlingellipse(52,-66,45,0.01,3,"#911a2b","#ffffff")
421.  
     mlingpen(45,-74)
422.  
     t.dot(9,"#ffffff")
423.  
     mlingpen(46,-60)
424.  
     t.dot(9,"#ffffff")
425.  
     mlingpen(56,-48)
426.  
     t.dot(9,"#ffffff")
427.  
     mlingpen(72,-46)
428.  
     t.dot(9,"#ffffff")
429.  
     mlingpen(59,-75)
430.  
     t.dot(9,"#ffffff")
431.  
     mlingpen(73,-64)
432.  
     t.dot(9,"#ffffff")
433.  
     t.pensize(3)
434.  
     t.pencolor("#911a2b")
435.  
     t.fillcolor('#dd4159')
436.  
     t.begin_fill()
437.  
     mlingpen(10,-100)
438.  
     t.goto(20,-100)
439.  
     t.lt(90)
440.  
     t.fd(20)
441.  
     t.lt(135)
442.  
     t.fd(10)
443.  
     t.goto(10,-100)
444.  
     t.end_fill()
445.  
     t.pensize(10)
446.  
     mlingpen(100,-80)
447.  
     t.goto(110,-85)
448.  
     t.pensize(3)
449.  
     mlingpen(-50,-35)
450.  
     t.goto(-20,-45)
451.  
     t.pencolor("#000000")
452.  
      
453.  
     t.pencolor("#fdfafe")
454.  
     mlingpen(290,75)
455.  
     t.write("鼓\n励\n人\n们\n相\n信\n自\n己\n",align="center",font=("黑体",16,"normal"))
456.  
     t.up()
457.  
     mlingpen(250,30)
458.  
     t.write("\n\n\n\n卡\n塔\n尔\n世\n界\n杯\n吉\n元\n素\n",align="center",font=("黑体",14,"normal"))
459.  
     mlingpen(-220,-200)
460.  
     t.write("绘\n图\n：\n逆\n境\n清\n醒\n\n",align="center",font=("黑体",12,"normal"))
461.  
      
462.  
      
463.  
     def llaeebtoumao():
464.  
     t.seth(0)
465.  
     mlingpen(105,135)
466.  
     t.pensize(3)
467.  
     t.pencolor("#000000")
468.  
     t.fillcolor('#624655')
469.  
     t.begin_fill()
470.  
     t.circle(10,155)
471.  
     t.rt(90)
472.  
     t.circle(8,90)
473.  
     t.lt(8)
474.  
     t.circle(270,38)
475.  
     t.lt(5)
476.  
     t.circle(8,100)
477.  
     t.rt(90)
478.  
     t.circle(10,100)
479.  
     t.lt(110)
480.  
     t.circle(-20,50)
481.  
     t.circle(-270,18)
482.  
     t.lt(5)
483.  
     t.circle(-250,18)
484.  
     t.goto(105,135)
485.  
     t.end_fill()
486.  
      
487.  
      
488.  
     if __name__ == '__main__':
489.  
     llaeebyifu()
490.  
     llaeebbozi()
491.  
     llaeebhand()
492.  
     llaeebtoumao()
493.  
     llaeebmouse()
494.  
     llaeebmeim()
495.  
     llaeebeye()
496.  
     t.done()
497.  
      

二、世界杯主题网页特效

　　为了增加交互体验感，网页上通常会有很多特效。有时不需要用很多复杂的技术，简单用css就能达到不错的效果，一起来看一下吧：

（1）、为透明png图片添加阴影特效

　　如果我有一张png图片，想要加一个文字投影，是不是非要用ps等制图软件呢？答案是否定的，我们可以CSS滤镜来实现添加阴影特效。CSS滤镜 drop-shadow 可以做 box-shadow 一样类似的事情，我们可以输入x-offset、y-offset、模糊半径和颜色的值。

.elementname {  filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));}
与 box-shadow 不同，它不需要 spread 参数

　　使用 drop-shadow 可以让我们给一个元素添加阴影，这个阴影并不对应于它的边界框，而是使用该元素的Alpha蒙版。例如，我们可以在透明的PNG或SVG徽标中添加投影。

img {  filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));}

　　我们可以比较 box-shadow 和 drop-shadow 的效果：

1.  
   <style>
2.  
   .shadow {box-shadow:0px 0px 20px rgb(240, 240, 240);}
3.  
   </style>

使用 box-shadow 为我们提供了一个矩形阴影，即使元素没有背景

style="filter:drop-shadow(0 0 20px #ffffff);"

  而 drop-shadow 则为图像的非透明部分创建阴影。

 我们可以使用多个 drop-shadow 阴影以获得一些很酷的效果！

style="filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 10px #ffffff);"

（2）、css三维空间移动特效

　　本例css三维空间移动特效用到了translateZ()函数。该translateZ() CSS函数沿着z轴在三维空间中重新定位元素，即从观察者的角度而言更近或者更远。这个变换是由一个<length>元素定义的，它指定元素向内或向外移动的距离。

　　translateZ(tz)相当于translate3d(0, 0, tz)。

　　语法：translateZ(tz)

　　它是怎么起作用的呢？首先，perspective()函数将观察者相对于z = 0处的平面（本质上是屏幕的表面）进行定位。500px意味着用户在位于z = 0处的图像“前”500个像素。

　　然后，该translateZ()函数将元素从屏幕“向外”移动tz像素到用户。这使得在显示器上观看时元素显得更大，或者观看时更接近元素。

1.  
   <style>
2.  
   .titleimg{
3.  
   top: 10px;
4.  
   justify-content:center center;
5.  
   opacity: 1;
6.  
   position: absolute;
7.  
   align-items:center;
8.  
   top: 100px;
9.  
   width: 1000px;
10.  
    -webkit-transform-origin: center center;
11.  
    -webkit-animation: logo 5s linear;
12.  
    -webkit-animation-iteration-count: 1;
13.  
    -webkit-animation-delay: 1s;
14.  
    -webkit-animation-timing-function: ease-in;
15.  
    }
16.  
     
17.  
    .titleimg1{animation: light 2s ease-in-out infinite alternate;}
18.  
     
19.  
    @-webkit-keyframes logo {
20.  
    0% {-webkit-transform: perspective(100000px) translateZ(0);
21.  
    opacity: 1;
22.  
    }
23.  
    50% {-webkit-transform: perspective(500px) translateZ(-5000px);
24.  
    opacity: 1;
25.  
    }
26.  
    90% {-webkit-transform: perspective(100000px) translateZ(0);
27.  
    opacity: 1;
28.  
    }
29.  
    100% {-webkit-transform: perspective(100000px) translateZ(0);
30.  
    opacity: 1;
31.  
    }
32.  
    }
33.  
    </style>

    

（3）、css滤镜发光按钮

鼠标移动到按钮上面时，显示流光发光效果，如图： 

实现方法：用css的filter滤镜：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

1.  
   a{ /*去掉下划线*/
2.  
   text-decoration: none;
3.  
   position: absolute;
4.  
   left: 50%;
5.  
   top: 50%;
6.  
   transform: translate(-50%,-50%);
7.  
   font-size: 30px;
8.  
   background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
9.  
   background-size: 400%;
10.  
    width: 300px;
11.  
    height: 100px;
12.  
    line-height: 100px;
13.  
    text-align: center;
14.  
    color: #fff;
15.  
    border-radius: 50px;
16.  
    z-index: 1;
17.  
    }
18.  
     
19.  
    a::before{
20.  
    content: "";
21.  
    position: absolute;
22.  
    left: -2px;
23.  
    right: -2px;
24.  
    top: -2px;
25.  
    bottom: -2px;
26.  
    background: linear-gradient(190deg,#03a9f4,#f441a5,#ffeb3b,#3bff3b,,rgb(30, 179, 162));
27.  
    background-size: 200%;
28.  
    border-radius: 80px;
29.  
    filter: blur(2px);
30.  
    z-index: -1;
31.  
    }
32.  
     
33.  
    a:hover::before{
34.  
    animation: sun 8s infinite;
35.  
    filter: hue-rotate(90deg)
36.  
    }
37.  
    a:hover{
38.  
    animation: sun 10s infinite;
39.  
    }
40.  
     
41.  
    @keyframes sun{
42.  
    100%{
43.  
    background-position: -400% 0;
44.  
    background-size: 200%;
45.  
    border-radius: 80px;
46.  
    filter:drop-shadow(8px 8px 20px rgb(252, 235, 45));
47.  
    z-index: -inherit;
48.  
    }
49.  
    }

网页调用：<div><a href="/link/to?link=https://blog.csdn.net/weixin_69553582/article/details/128296176">历届世界杯回顾</a></div>

（4）、翻转卡片特效

鼠标移动到图片上，自动翻转图片，显示出图片后的说明文字

完整css和调用方法如下：

1.  
   <div class="lanren">
2.  
   <div class="flip-3d">
3.  
   <figure>
4.  
   <img src="images/cup1_300a.jpg" alt="">
5.  
   <figcaption>2022世界杯会徽，远看类似一个白色奖杯，又似一个英文“无穷大”符号和阿拉伯数字中的“8”，上边还装饰有勃艮第颜色的图案。会徽的顶部有两个点，两点之间是一个足球图形，会徽底部是装饰图案。</figcaption>
6.  
   </figure>
7.  
   </div>
8.  
   <div class="flip-3d">
9.  
   <figure>
10.  
    <img src="images/cup2_300a.jpg" alt="">
11.  
    <figcaption>世界杯奖杯奖杯，名“大力神杯”。高36.8厘米，重6.175公斤，其中4.97公斤的主体由纯金铸造。底座由两层孔雀石构成。
12.  
    国际足联规定奖杯为流动奖品，不论哪队获得多少冠军，也不能永久占有此杯。在大力神杯的底座下面有能容纳镌刻17个冠军队名字的铭牌——可以持续使用到2038年。</figcaption>
13.  
    </figure>
14.  
    </div>
15.  
    <div class="flip-3d">
16.  
    <figure>
17.  
    <img src="images/cup3_300a.jpg" alt="">
18.  
    <figcaption>卡塔尔世界杯的吉元素，代表着技艺高超的球员。设计灵感来自于卡塔尔人的传统服饰，它鼓励人们相信自己，也寓意着它将带领所有人享受足球的快乐。
19.  
    吉元素（。。）是一个阿拉伯语单词，吉元素（。。）是青春永驻的，来自“吉祥物宇宙”。</figcaption>
20.  
    </figure>
21.  
    </div>
22.  
    </div>

1.  
   <style>
2.  
   .lanren{width:600px;overflow:hidden;margin:0 auto;}
3.  
   .flip-3d {
4.  
   perspective: 200px; width: 50%; float: left;
5.  
   }
6.  
   .flip-3d figure {
7.  
   position: relative;
8.  
   transform-style: preserve-3d;
9.  
   transition: 1s transform;
10.  
    font-size: 1em;
11.  
    margin:25px;
12.  
    }
13.  
    .flip-3d figure img {
14.  
    width: 100%; height: auto;
15.  
    }
16.  
    .flip-3d figure figcaption {
17.  
    position: absolute;
18.  
    width: 100%; height: 100%; top: 0;
19.  
    transform: rotateY(.5turn) translateZ(1px);
20.  
    background: rgba(255,255,255,1);
21.  
    text-align: center;
22.  
    padding-top: 5%;
23.  
    opacity: 0.6;
24.  
    transition: 1s .5s opacity;
25.  
    }
26.  
    .flip-3d:hover figure { transform: rotateY(.5turn); }
27.  
    .flip-3d:hover figure figcaption { opacity: 1; }
28.  
    .flip-3d figure:after {
29.  
    content: " "; display: block;
30.  
    height: 400; width: 100%;
31.  
    transform: rotateX(90deg);
32.  
    background-image:radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
33.  
    }
34.  
    @media screen and (max-width: 600px) {
35.  
    #flip-3d { perspective-origin: center top; }
36.  
    div#flip-3d figure {
37.  
    float: none;
38.  
    width: 100%;
39.  
    margin: 0 auto;
40.  
    margin-bottom: 12vw;
41.  
    }
42.  
    .flip-3d figure figcaption{font-size: 0.8rem;}
43.  
    div#flip-3d figure:last-child { display: none; }
44.  
    }
45.  
    </style>

(5)、不停弹跳的旋转足球（带红色光影）

导入了animate.min.css库，加了一个足球从远处跳进画面的动画

 实现方式：

<link rel="stylesheet" href="/link/to?link=https://blog.csdn.net/weixin_69553582/article/details/css/animate.min.css"/>

调用时，用：class="animate__animated animate__zoomInDown"即可

阴影部分，随着足球的跳起，会有个缩放的过程，由css动画完成：

1.  
   .shadow{
2.  
   width: 100px;
3.  
   height: 25px;
4.  
   border-radius: 50%;
5.  
   background-color: rgba(0,0,0,0.4);
6.  
   animation: shadowShow 1s linear infinite;
7.  
   }
8.  
   @keyframes shadowShow {
9.  
   0%{
10.  
    opacity: 1;
11.  
    transform: scale(1);
12.  
    -webkit-transform:translateY(-500);
13.  
    }
14.  
    50%{
15.  
    opacity: 0.5;
16.  
    transform: scale(0.5);
17.  
    -webkit-transform:translateY(-300);
18.  
    }
19.  
    100%{
20.  
    opacity: 1;
21.  
    transform: scale(1);
22.  
    }
23.  
     
24.  
    }

为了增加足球的炫酷感，我加了一个红色光影效果，也是由css设置完成，代码如下：

1.  
   @keyframes light {
2.  
   from {
3.  
   box-shadow:0px 0px 30px rgb(234, 194, 194);
4.  
   }
5.  
   to {
6.  
   box-shadow:0px 30px 90px rgb(253, 0, 0);
7.  
   }
8.  
   }
9.  
   .light {
10.  
    width: 100px;
11.  
    height: 100px;
12.  
    border-radius:100%;
13.  
    perspective-origin: center top;
14.  
    animation: light 2s ease-in-out infinite alternate;
15.  
    }

不停弹跳的旋转足球（带红色光影） 的完整css和调用方法如下：

1.  
   <style>
2.  
   .box800{
3.  
   width: 800px;
4.  
   height: 100%;
5.  
   display: flex;
6.  
   justify-content: space-around;
7.  
   align-items: center;
8.  
   padding-top:40%;
9.  
   justify-content:center;
10.  
    }
11.  
    .ball{
12.  
    width: 100px;
13.  
    height: 100px;
14.  
    background: url("images/ball300.png");
15.  
    background-size: 100px 100px;
16.  
    border-radius: 100%;
17.  
    animation: animationBall 1s linear infinite;
18.  
    }
19.  
     
20.  
    @keyframes animationBall {
21.  
    0%{transform: translateY(0) rotate(0deg) }
22.  
    50%{transform: translateY(-450px) rotate(180deg)}
23.  
    100%{transform: translateY(0) rotate(360deg)}
24.  
    }
25.  
     
26.  
    .shadow{
27.  
    width: 100px;
28.  
    height: 25px;
29.  
    border-radius: 50%;
30.  
    background-color: rgba(0,0,0,0.4);
31.  
    animation: shadowShow 1s linear infinite;
32.  
    }
33.  
    @keyframes shadowShow {
34.  
    0%{
35.  
    opacity: 1;
36.  
    transform: scale(1);
37.  
    -webkit-transform:translateY(-500);
38.  
    }
39.  
    50%{
40.  
    opacity: 0.5;
41.  
    transform: scale(0.5);
42.  
    -webkit-transform:translateY(-300);
43.  
    }
44.  
    100%{
45.  
    opacity: 1;
46.  
    transform: scale(1);
47.  
    }
48.  
     
49.  
    }
50.  
     
51.  
     
52.  
    @keyframes light {
53.  
    from {
54.  
    box-shadow:0px 0px 30px rgb(234, 194, 194);
55.  
    }
56.  
    to {
57.  
    box-shadow:0px 30px 90px rgb(253, 0, 0);
58.  
    }
59.  
    }
60.  
    .light {
61.  
    width: 100px;
62.  
    height: 100px;
63.  
    border-radius:100%;
64.  
    perspective-origin: center top;
65.  
    animation: light 2s ease-in-out infinite alternate;
66.  
    }
67.  
    </style>

<link rel="stylesheet" href="/link/to?link=https://blog.csdn.net/weixin_69553582/article/details/css/animate.min.css"/>

1.  
   <div class="box800">
2.  
   <div class="animate__animated animate__zoomInDown">
3.  
   <div class="ball"><div class="light"></div></div>
4.  
   <div class="shadow"></div>
5.  
   </div>
6.  
   </div>

   
    

   推荐阅读：

这篇好文章是转载于：学新通技术网