当前位置:首页 » 《随便一记》 » 正文

【程序人生】卡塔尔世界杯吉祥物python海龟绘图(附源代码),世界杯主题前端特效5个(附源码)

15 人参与  2022年12月15日 10:41  分类 : 《随便一记》  评论

点击全文阅读


卡塔尔世界杯吉祥物python海龟绘图(附源代码)

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

本文目录:

一、python turtle海龟绘图卡塔尔世界杯吉祥物

(1)、世界杯吉祥物“Laeeb”绘制效果图

(2)、代码演示方法和代码命令解释

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

(4)、我的 “2022年卡塔尔世界杯吉祥物Laeeb” 绘图完整源代码

二、世界杯主题网页特效

(1)、为透明png图片添加阴影特效

(2)、css三维空间移动特效

(3)、css滤镜发光按钮

(4)、翻转卡片特效

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


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

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

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

  编外话:

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

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

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

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

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

一、python turtle海龟绘图卡塔尔世界杯吉祥物

(1)、世界杯吉祥物“Laeeb”绘制效果图

  2022年卡塔尔世界杯吉祥物“Laeeb”是一个卡通人物,在阿拉伯语中意为技艺高超的球员。它鼓励人们相信自己,将带领所有人享受足球的快乐。

(2)、代码演示方法和代码命令解释

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

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

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

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

  

(4)、我的 “2022年卡塔尔世界杯吉祥物Laeeb” 绘图完整源代码

#-*- coding: UTF-8 -*-import turtle as t """=================================================@Project ->Adversity Awake 世界杯系列@类别     : 世界杯->世界杯之1@Author  : 逆境清醒@Date    : 2022/12/13 06:02@Desc    :https://blog.csdn.net/weixin_69553582================================================="""# 设置背景颜色,窗口位置以及大小 t.colormode(255)# 颜色模式t.speed(0)t.screensize(800,600,"black")#画布大小背景颜色t.setup(width=800, height=600,startx=None, starty=None)#绘图窗口的大小和起始坐标t.title("逆境清醒2022卡塔尔世界杯吉祥物!")#设置绘图窗口的标题t.resizemode('noresize')  #大小调整模式:auto,user,noresizet.tracer(1)   t.hideturtle() def mlingpen(x, y):    t.penup()    t.goto(x, y)    t.pendown() def mlingfacecheek(x, y, fx):    mlingpen(x, y)    t.seth(fx)    t.pencolor("#fcd1ae")    t.fillcolor('#fcd1ae')    t.begin_fill()    n = 1.8    for i in range(120):        if 0 <= i < 30 or 60 <= i < 90:            n -= 0.05            t.left(3)            t.fd(n)        else:            n += 0.05            t.left(3)            t.fd(n)    t.end_fill() def mlingfacecheek_h(x, y, fx):    mlingpen(x, y)    t.seth(fx)    t.pencolor("#fcc6ae")    t.fillcolor('#fcc6ae')    t.begin_fill()    n = 1.6    for i in range(120):        if 0 <= i < 30 or 60 <= i < 90:            n -= 0.06            t.left(3)            t.fd(n)        else:            n += 0.06            t.left(3)            t.fd(n)    t.end_fill()def mlingellipse(x,y,jiajiao,l, size,color1,color2):    mlingpen(x, y)    t.seth(jiajiao + 270)    t.pensize(size)    t.pencolor(color1)    t.fillcolor(color2)    t.pendown()    t.begin_fill()    a = 0.3    for i in range(120):        if 0 <= i < 30 or 60 <= i < 90:            a += l            t.lt(3)              t.fd(a)          else:            a -= l            t.lt(3)            t.fd(a)    t.penup()    t.end_fill() def mlingrotate_left(chishu, angle, length):    for i in range(chishu):          t.left(angle)          t.forward(length)   def mlingrotate_right(chishu, angle, length):    for i in range(chishu):          t.right(angle)          t.forward(length)   def llaeebeye():    #AdversityAwake    t.seth(22)    mlingpen(80,62)    t.pensize(3)    t.pencolor("#000000")    t.fillcolor('#000000')    t.begin_fill()    t.circle(40,62)    t.circle(21,160)    t.circle(40,53)    t.goto(80,62)    t.end_fill()    t.seth(20)    mlingpen(80,62)    t.pensize(2)    t.pencolor("#000000")    t.fillcolor('#ffffff')    t.begin_fill()    t.circle(35,62)    t.circle(20,164)    t.circle(40,53)    t.goto(80,62)    t.end_fill()    t.seth(30)    mlingpen(76,65)    t.pensize(3)    t.pencolor("#452b14")    t.fillcolor('#e58f59')    t.begin_fill()    t.circle(31,90)    t.lt(12)    t.circle(12,70)    t.lt(27)    t.circle(40,68)    t.goto(76,65)    t.end_fill()    t.seth(0)    mlingpen(66,72)    t.pensize(1)    t.pencolor("#000000")    t.fillcolor('#000000')    t.begin_fill()    t.circle(20,120)    t.circle(10,120)    t.lt(6)    t.circle(40,40)    t.goto(66,72)    t.end_fill()    t.seth(0)    mlingpen(68,75)    t.pencolor("#373331")    t.fillcolor('#3f3a38')    t.begin_fill()    t.circle(5,360)    t.end_fill()    t.seth(0)    mlingpen(73,102)    t.pensize(1)    t.pencolor("#000000")    t.fillcolor('#ffffff')    t.begin_fill()    t.circle(6,360)    t.end_fill()    #AdversityAwake    t.seth(40)    mlingpen(10,70)    t.pensize(3)    t.pencolor("#000000")    t.fillcolor('#000000')    t.begin_fill()    t.circle(30,170)    t.circle(23,120)    t.goto(10,70)    t.end_fill()    t.seth(44)    mlingpen(10,70)    t.pensize(2)    t.pencolor("#000000")    t.fillcolor('#ffffff')    t.begin_fill()    t.circle(29,170)    t.circle(23,100)    t.goto(10,70)    t.end_fill()    t.seth(30)    mlingpen(0,75)    t.pensize(3)    t.pencolor("#452b14")    t.fillcolor('#e58f59')    t.begin_fill()    t.circle(23,280)    t.goto(0,75)    t.end_fill()    t.seth(30)    mlingpen(-3,82)    t.pensize(3)    t.pencolor("#000000")    t.fillcolor('#000000')    t.begin_fill()    t.circle(15,360)    t.goto(-3,82)    t.end_fill()    t.seth(0)    mlingpen(-11,82)    t.pencolor("#373331")    t.fillcolor('#3f3a38')    t.begin_fill()    t.circle(5,360)    t.end_fill()    t.seth(0)    mlingpen(-6,102)    t.pensize(1)    t.pencolor("#000000")    t.fillcolor('#ffffff')    t.begin_fill()    t.circle(6,360)    t.end_fill()def llaeebmeim():    t.seth(100)    mlingpen(-30,125)    t.pensize(2)    t.pencolor("#000000")    t.fillcolor('#000000')    t.begin_fill()    t.goto(25,133)    t.circle(10,100)    t.rt(30)    t.circle(50,60)    t.goto(-30,125)    t.end_fill()    #AdversityAwake    t.seth(120)    mlingpen(60,130)    t.pensize(2)    t.pencolor("#000000")    t.fillcolor('#000000')    t.begin_fill()    t.goto(106,130)    t.circle(30,40)    t.circle(25,80)    t.goto(60,130)    t.end_fill()def llaeebmouse():    #AdversityAwake    t.seth(-30)    mlingpen(0,55)    t.pensize(3)    t.pencolor("#000000")    #t.begin_fill()    t.circle(130,16)    t.circle(48,40)    #t.end_fill()def llaeebbozi():    #AdversityAwake    t.seth(120)    mlingpen(145,40)    t.pensize(3)    t.pencolor("#000000")    t.fillcolor('#805d57')    t.begin_fill()    t.circle(12,120)    t.rt(30)    t.circle(55,17)    t.rt(10)    t.circle(-110,70)    t.circle(100,50)    t.circle(50,45)    t.goto(-140,-210)    t.goto(110,-210)    t.lt(120)    t.circle(100,60)    t.goto(145,40)    t.end_fill()def llaeebyifu():    t.seth(160)    mlingpen(-70,140)    t.pencolor("#624655")    t.pensize(6)    t.circle(170,20)    t.circle(30,95)    t.dot(15,"#624655")    t.seth(-100)    mlingpen(-70,140)    t.circle(-30,130)    t.dot(15,"#624655")    t.seth(-180)    mlingpen(-70,140)    t.circle(30,50)    t.circle(-190,20)    t.circle(190,20)    t.circle(-30,50)    t.dot(15,"#624655")    t.seth(190)    mlingpen(-70,140)    t.circle(-250,20)    t.circle(250,10)    t.circle(-30,50)    t.dot(15,"#624655")    #AdversityAwake    t.seth(0)    mlingpen(-140,-210)    t.pensize(3)    t.pencolor("#000000")    t.fillcolor('#ffffff')    t.begin_fill()    t.goto(110,-210)    t.circle(100,60)    t.lt(20)    t.circle(50,20)    t.circle(-50,30)    t.circle(80,60)    t.goto(100,140)    t.rt(20)    t.circle(80,60)    t.circle(100,60)    t.circle(190,10)    t.rt(15)    t.circle(290,55)    t.goto(-140,-210)    t.end_fill()def llaeebhand():    t.seth(0)    mlingpen(195,-165)    t.pensize(3)    t.pencolor("#000000")    t.fillcolor('#ffffff')    t.begin_fill()    t.lt(75)    t.circle(50,20)    t.circle(-50,30)    t.circle(80,60)    t.goto(150,40)    t.lt(130)    t.circle(-100,70)    t.goto(20,-40)    t.lt(105)    t.circle(200,60)    t.goto(195,-165)    t.end_fill()    t.seth(0)    mlingpen(190,-160)    t.pensize(2)    t.pencolor("#eee7f1")    t.fillcolor('#eee7f1')    t.begin_fill()    t.lt(75)    t.circle(50,20)    t.circle(-50,30)    t.circle(80,60)    t.goto(147,25)    t.lt(130)    t.circle(-100,20)    t.end_fill()    t.seth(0)    mlingpen(185,-160)    t.pensize(2)    t.pencolor("#faf4fc")    t.fillcolor('#faf4fc')    t.begin_fill()    t.lt(75)    t.circle(50,20)    t.circle(-50,30)    t.circle(75,55)    t.goto(145,21)    t.lt(130)    t.circle(-95,30)    t.end_fill()    t.seth(0)    mlingpen(185,-160)    t.pensize(2)    t.pencolor("#fdfafe")    t.fillcolor('#fdfafe')    t.begin_fill()    t.lt(75)    t.circle(45,20)    t.circle(-45,30)    t.circle(65,55)    t.goto(143,13)    t.lt(130)    t.circle(-95,30)    t.end_fill()    #AdversityAwake    t.seth(-80)    mlingpen(-127.85,12.90)    t.pensize(3)    t.pencolor("#000000")    t.fillcolor('#ffffff')    t.begin_fill()    t.circle(46,55)    t.lt(60)    t.circle(-30,40)    t.lt(10)    t.circle(-150,30)    t.goto(20,-40)    t.goto(110,-5)    t.circle(-8,80)    t.lt(2)    t.circle(-280,55)    t.goto(-140,-210)    t.rt(89)    t.circle(-300,48)    t.goto(-127.85,12.90)    t.end_fill()    t.seth(-120)    mlingpen(-101.00,-20.80)    t.circle(90,32)    t.lt(120)    t.circle(-80,50)    t.circle(66,60)    mlingpen(40,-80)    mlingellipse(40,-80,46,0.06,3,"#911a2b","#dd4159")    mlingellipse(52,-66,45,0.01,3,"#911a2b","#ffffff")    mlingpen(45,-74)    t.dot(9,"#ffffff")    mlingpen(46,-60)    t.dot(9,"#ffffff")    mlingpen(56,-48)    t.dot(9,"#ffffff")    mlingpen(72,-46)    t.dot(9,"#ffffff")    mlingpen(59,-75)    t.dot(9,"#ffffff")    mlingpen(73,-64)    t.dot(9,"#ffffff")    t.pensize(3)    t.pencolor("#911a2b")    t.fillcolor('#dd4159')    t.begin_fill()    mlingpen(10,-100)    t.goto(20,-100)    t.lt(90)    t.fd(20)    t.lt(135)    t.fd(10)    t.goto(10,-100)    t.end_fill()    t.pensize(10)    mlingpen(100,-80)    t.goto(110,-85)    t.pensize(3)    mlingpen(-50,-35)    t.goto(-20,-45)    t.pencolor("#000000")t.pencolor("#fdfafe")mlingpen(290,75)t.write("鼓\n励\n人\n们\n相\n信\n自\n己\n",align="center",font=("黑体",16,"normal"))t.up()mlingpen(250,30)t.write("\n\n\n\n卡\n塔\n尔\n世\n界\n杯\n吉\n祥\n物\n",align="center",font=("黑体",14,"normal"))mlingpen(-220,-200)t.write("作\n者\n:\n逆\n境\n清\n醒\n\n",align="center",font=("黑体",12,"normal"))def llaeebtoumao():    t.seth(0)    mlingpen(105,135)    t.pensize(3)    t.pencolor("#000000")    t.fillcolor('#624655')    t.begin_fill()    t.circle(10,155)    t.rt(90)    t.circle(8,90)    t.lt(8)    t.circle(270,38)    t.lt(5)    t.circle(8,100)    t.rt(90)    t.circle(10,100)    t.lt(110)    t.circle(-20,50)    t.circle(-270,18)    t.lt(5)    t.circle(-250,18)    t.goto(105,135)    t.end_fill()if __name__ == '__main__':    llaeebyifu()    llaeebbozi()    llaeebhand()    llaeebtoumao()    llaeebmouse()    llaeebmeim()    llaeebeye()    t.done()

二、世界杯主题网页特效

  为了增加交互体验感,网页上通常会有很多特效。有时不需要用很多复杂的技术,简单用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 的效果:

        <style>          .shadow {box-shadow:0px 0px 20px rgb(240, 240, 240);}        </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像素到用户。这使得在显示器上观看时元素显得更大,或者观看时更接近元素。

<style>    .titleimg{        top: 10px;        justify-content:center center;        opacity: 1;        position: absolute;        align-items:center;        top: 100px;        width: 1000px;        -webkit-transform-origin: center center;        -webkit-animation: logo 5s linear;        -webkit-animation-iteration-count: 1;        -webkit-animation-delay: 1s;        -webkit-animation-timing-function: ease-in;        }        .titleimg1{animation: light 2s ease-in-out infinite alternate;}    @-webkit-keyframes logo {        0% {-webkit-transform: perspective(100000px) translateZ(0);            opacity: 1;           }       50% {-webkit-transform: perspective(500px) translateZ(-5000px);            opacity: 1;           }       90% {-webkit-transform: perspective(100000px) translateZ(0);            opacity: 1;           }      100% {-webkit-transform: perspective(100000px) translateZ(0);            opacity: 1;           }      }</style>
css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别
描    述
linear 以相同速度开始至结束的过渡效果(== cubic-bezier(0,0,1,1))。(匀速)
ease

慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))

(相对于匀速,中间快,两头慢)。

ease-in

以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))

(相对于匀速,开始的时候慢,之后快)。

ease-out

以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))

(相对于匀速,开始时快,结束时候间慢)。

ease-in-out

以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))

(相对于匀速,(开始和结束都慢)两头慢)。

cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

    

(3)、css滤镜发光按钮

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

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

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

filter:滤镜函数

(可使用百分比值,也接受该值是十进制(小数制例 0.85),使用多个滤镜,用空格分隔每个滤镜。

滤 镜 名功   能描      述
none规定无效果。默认值。
blur(px)对图像应用模糊效果。

较大的值将产生更多的模糊。

如果为指定值,则使用 0。

brightness(%)调整图像的亮度。 0% 将使图像完全变黑。默认值是 100%,代表原始图像。值超过 100% 将提供更明亮的结果。
contrast(%)调整图像的对比度。 0% 将使图像完全变黑。默认值是 100%,代表原始图像。超过 100% 的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)对图像应用阴影效果。 h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。blur -可选。单位用像素。为阴影添加模糊效果。不允许负值。默认使用 0。spread - 可选。单位用像素。正值将导致阴影扩展并增大,负值将导致阴影缩小。默认使用 0。Chrome、Safari 和 Opera。。。不支持第 4 个长度;如果添加,则不会呈现。color - 可选。为阴影添加颜色。默认颜色取决于浏览器(通常为黑色)。
grayscale(%)将图像转换为灰阶。 0% (0) 是默认值,代表原始图像。100% 将使图像完全变灰(用于黑白图像)不允许负值。
hue-rotate(deg)在图像上应用色相旋转。

该值定义色环的度数。

默认值为 0deg,代表原始图像。

最大值是 360deg。

invert(%)反转图像中的样本。 0% (0) 是默认值,代表原始图像。100%将使图像完全反转。不允许负值。
opacity(%)设置图像的不透明度级别。

opacity-level 描述了透明度级别,其中:

0% 为完全透明。100% 默认值,代表原始图像(不透明)。不允许负值。类似 opacity 属性。
saturate(%)设置图像的饱和度。 0% (0)将使图像完全不饱和。100% 默认值,表示原始图像。超过 100% 提供过饱和的结果。不允许负值。
sepia(%)将图像转换为棕褐色。 0% (0) 是默认值,代表原始图像。100% 将使图像完全变为棕褐色。不允许负值。
url()SVG 滤镜的 XML 文件的位置

url() 函数接受规定 SVG 滤镜的 XML 文件的位置,并且可以包含指向特定滤镜元素的锚点。

filter: url(svg-url#element-id)

initial将此属性设置为其默认值。
inherit从其父元素继承此属性。

a{  /*去掉下划线*/    text-decoration: none;     position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);    font-size: 30px;    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);    background-size: 400%;    width: 300px;    height: 100px;    line-height: 100px;    text-align: center;    color: #fff;    border-radius: 50px;    z-index: 1;} a::before{    content: "";    position: absolute;    left: -2px;    right: -2px;    top: -2px;    bottom: -2px;    background: linear-gradient(190deg,#03a9f4,#f441a5,#ffeb3b,#3bff3b,,rgb(30, 179, 162));    background-size: 200%;    border-radius: 80px;    filter: blur(2px);    z-index: -1;} a:hover::before{    animation: sun 8s infinite;    filter: hue-rotate(90deg)}a:hover{    animation: sun 10s infinite;}@keyframes sun{    100%{        background-position: -400% 0;        background-size: 200%;        border-radius: 80px;        filter:drop-shadow(8px 8px 20px rgb(252, 235, 45));        z-index: -inherit;    }}

网页调用:<div><a href="#">历届世界杯回顾</a></div>

(4)、翻转卡片特效

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

 

 

完整css和调用方法如下:

        <div class="lanren">            <div class="flip-3d">                <figure>                   <img src="images/cup1_300a.jpg" alt="">                   <figcaption>2022世界杯会徽,远看类似一个白色奖杯,又似一个英文“无穷大”符号和阿拉伯数字中的“8”,上边还装饰有勃艮第颜色的图案。会徽的顶部有两个点,两点之间是一个足球图形,会徽底部是装饰图案。</figcaption>               </figure>           </div>            <div class="flip-3d">                <figure>                    <img src="images/cup2_300a.jpg" alt="">                    <figcaption>世界杯奖杯奖杯,名“大力神杯”。高36.8厘米,重6.175公斤,其中4.97公斤的主体由纯金铸造。底座由两层孔雀石构成。                        国际足联规定奖杯为流动奖品,不论哪队获得多少冠军,也不能永久占有此杯。在大力神杯的底座下面有能容纳镌刻17个冠军队名字的铭牌——可以持续使用到2038年。</figcaption>                  </figure>            </div>            <div class="flip-3d">                <figure>                    <img src="images/cup3_300a.jpg" alt="">                    <figcaption>卡塔尔世界杯的吉祥物名叫Laeeb。La'eeb(拉伊卜),代表着技艺高超的球员。设计灵感来自于卡塔尔人的传统服饰,它鼓励人们相信自己,也寓意着它将带领所有人享受足球的快乐。                        La’eeb是一个阿拉伯语单词,la’eeb是青春永驻的,来自“吉祥物宇宙”。</figcaption>                </figure>            </div>        </div>
<style>.lanren{width:600px;overflow:hidden;margin:0 auto;}.flip-3d {   perspective: 200px; width: 50%; float: left;  }.flip-3d figure {   position: relative;   transform-style: preserve-3d;   transition: 1s transform;  font-size: 1em;  margin:25px;}.flip-3d figure img {   width: 100%; height: auto; }.flip-3d figure figcaption {   position: absolute;   width: 100%; height: 100%; top: 0;   transform: rotateY(.5turn) translateZ(1px);   background: rgba(255,255,255,1);   text-align: center;   padding-top: 5%;   opacity: 0.6;   transition: 1s .5s opacity; }.flip-3d:hover figure { transform: rotateY(.5turn); }.flip-3d:hover figure figcaption { opacity: 1; }.flip-3d figure:after {   content: " "; display: block;  height: 400; width: 100%;   transform: rotateX(90deg);   background-image:radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); }@media screen and (max-width: 600px) {   #flip-3d { perspective-origin: center top; }div#flip-3d figure {     float: none;     width: 100%;     margin: 0 auto;     margin-bottom: 12vw;   } .flip-3d figure figcaption{font-size: 0.8rem;}div#flip-3d figure:last-child { display: none; }}</style>

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

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

 实现方式:

<link rel="stylesheet" href="css/animate.min.css"/>

调用时,用:class="animate__animated animate__zoomInDown"即可

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

.shadow{  width: 100px;  height: 25px;  border-radius: 50%;  background-color: rgba(0,0,0,0.4);  animation: shadowShow 1s linear infinite;}@keyframes shadowShow {  0%{      opacity: 1;      transform: scale(1);      -webkit-transform:translateY(-500);  }  50%{      opacity: 0.5;      transform: scale(0.5);      -webkit-transform:translateY(-300);  }  100%{      opacity: 1;      transform: scale(1);  }}

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

@keyframes light {from {box-shadow:0px 0px 30px rgb(234, 194, 194);}to {box-shadow:0px 30px 90px rgb(253, 0, 0);}}.light {width: 100px;height: 100px;border-radius:100%;perspective-origin: center top;animation: light 2s ease-in-out infinite alternate;}

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

<style>.box800{  width: 800px;  height: 100%;  display: flex;  justify-content: space-around;  align-items: center;  padding-top:40%;   justify-content:center;}.ball{  width: 100px;  height: 100px;  background: url("images/ball300.png");  background-size: 100px 100px;  border-radius: 100%;  animation: animationBall 1s linear infinite;}@keyframes animationBall {  0%{transform: translateY(0) rotate(0deg)  }  50%{transform: translateY(-450px) rotate(180deg)}  100%{transform: translateY(0) rotate(360deg)}}.shadow{  width: 100px;  height: 25px;  border-radius: 50%;  background-color: rgba(0,0,0,0.4);  animation: shadowShow 1s linear infinite;}@keyframes shadowShow {  0%{      opacity: 1;      transform: scale(1);      -webkit-transform:translateY(-500);  }  50%{      opacity: 0.5;      transform: scale(0.5);      -webkit-transform:translateY(-300);  }  100%{      opacity: 1;      transform: scale(1);  }}@keyframes light {from {box-shadow:0px 0px 30px rgb(234, 194, 194);}to {box-shadow:0px 30px 90px rgb(253, 0, 0);}}.light {width: 100px;height: 100px;border-radius:100%;perspective-origin: center top;animation: light 2s ease-in-out infinite alternate;}</style>

<link rel="stylesheet" href="css/animate.min.css"/>

<div class="box800">  <div class="animate__animated animate__zoomInDown">      <div class="ball"><div class="light"></div></div>      <div class="shadow"></div>  </div></div>

justify-content:

flex-start|flex-end|center|space-between|space-around|initial|inherit;

属性值 描 述
flex-start默认值。项目位于容器的开头。
flex-end项目位于容器的结尾。
center 项目位于容器中央。
space-between项目在行与行之间留有间隔。
space-around 项目在行之前、行之间和行之后留有空间。
initial 将此属性设置为其默认值。
inherit从其父元素继承此属性。


   
    
 

     推荐阅读:

21

python爱心源代码集锦
20

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

​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)
18

​​​

​草莓熊python turtle绘图(玫瑰花版)附源代码

17

​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

16

​​​

皮卡丘python turtle海龟绘图(电力球版)附源代码

15

​​​

【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向)

14

​​​

草莓熊python turtle绘图(风车版)附源代码

13

​​​

用代码过中秋,python海龟月饼你要不要尝一口?

12

​​​

《 Python List 列表全实例详解系列》__系列总目录

11

​​​

用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心)

10

​​​

Python函数方法实例详解全集(更新中...)

9

​​​

matplotlib 自带绘图样式效果展示速查(全)

8

​​​

手机屏幕坏了____怎么把里面的资料导出(18种方法)

7

​​​

2022年12月多家权威机构____编程语言排行榜__薪酬状况

6

​​​

Python中Print()函数的用法___实例详解(全,例多)

5

​​​

色彩颜色对照表(300种颜色)(16进制、RGB、CMYK、HSV、中英文名)

4

​​​

Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细)

3

​​​

Tomcat 启动闪退问题解决集(八大类详细)

2

​​​

Tomcat端口配置(详细)

1

​​​

Tomcat10 安装(Windows环境)(详细)sss


点击全文阅读


本文链接:http://zhangshiyu.com/post/49767.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1