欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 国际 > 用代码画万圣节南瓜(python,MATLAB,html css)

用代码画万圣节南瓜(python,MATLAB,html css)

2024/11/2 20:30:56 来源:https://blog.csdn.net/weixin_69553582/article/details/143416669  浏览:    关键词:用代码画万圣节南瓜(python,MATLAB,html css)

用代码画万圣节南瓜(python,MATLAB,html css)

本文目录:

零、时光宝盒

一、效果图片索引

二、用 python 绘制南瓜

2.1、Python南瓜和飞舞蝙蝠

2.2、Python万圣节礼物

2.3、Python绘制可爱的万圣节南瓜怪,不给糖果就捣乱

三、用MATLAB绘制南瓜灯

3.1、南瓜灯

四、html css 绘制南瓜

4.1、css代码绘制皮卡丘南瓜头

4.2、爱卡通南瓜头css代码

4.3、svg南瓜


零、时光宝盒

https://blog.csdn.net/weixin_69553582  逆境清醒)

2ab463de26a541818271efa176656ae6.png

  “我们,都是过客。这一生,行过的桥,走过的路,看过的风景,爱过的人都是一辈子最宝贵的财富。”-----汪曾祺

  既然是财富,就得好好珍惜,好好享受,才不负遇见,不枉此生。珍惜当下所拥有的,永远不放弃对美好生活的追求,每一天认认真真生活,最大限度地把日子过得有趣起来。

  认真生活的人,心里有爱,眼里有光,他们总能在琐碎艰难的生活里,脸上带着笑,开出一朵希望的花儿。-----三毛

百合盲盒种出花蕾了,会开什么颜色的花呢?

     逆境清醒

2024.10.31

7f8eafc867aa425cab7d368ee0eb4dd8.gif

一、效果图片索引

2.1、Python南瓜和飞舞蝙蝠2.2、Python万圣节礼物3、用MATLAB绘制南瓜灯
4、css代码绘制皮卡丘南瓜头5、爱卡通南瓜头css代码6、svg南瓜
2.3、Python绘制可爱的万圣节南瓜怪

二、用 python 绘制南瓜

2.1、Python南瓜和飞舞蝙蝠

作者:Want595  

网址:https://want595.blog.csdn.net/article/details/143377219  

效果图:()

完整代码: 

import turtle as tu
import random as ra
import mathtu.setup(1.0, 1.0)
tu.screensize(1.0, 1.0)
tu.title("万圣节快乐")
tu.bgcolor('darkblue')
t = tu.Pen()
t.ht()
colors = ['black']class Bat():  # 每个蝙蝠(蝙蝠类)def __init__(self):self.k = ra.uniform(0.1, 0.3)  # 蝙蝠的半径self.r = 1  # 南瓜的半径self.x = ra.randint(-1000, 1000)  # 蝙蝠的横坐标self.y = ra.randint(-500, 500)  # 蝙蝠的纵坐标self.f = ra.uniform(-3.14, 3.14)  # 蝙蝠左右移动呈正弦函数self.speed = ra.randint(5, 10)  # 蝙蝠移动速度self.color = ra.choice(colors)  # 蝙蝠的颜色self.outline = 1  # 蝙蝠的外框大小(可不要)def move(self):  # 蝙蝠移动函数if self.y <= 500:  # 当蝙蝠还在画布中时self.y += self.speed  # 设置上下移动速度self.x += self.speed * math.sin(self.f)  # 设置左右移动速度self.f += 0.1  # 可以理解成标志,改变左右移动的方向else:  # 当蝙蝠漂出了画布时,重新生成一个蝙蝠self.k = ra.uniform(0.1, 0.3)self.r = 1  # 南瓜的半径self.x = ra.randint(-1000, 1000)self.y = -500self.f = ra.uniform(-3.14, 3.14)self.speed = ra.randint(5, 10)self.color = ra.choice(colors)self.outline = 1def bat(self):  # 画蝙蝠函数,就是用turtle画蝙蝠t.penup()t.goto(self.x, self.y)t.pendown()t.pencolor(self.color)t.pensize(1)t.begin_fill()t.fillcolor(self.color)t.forward(self.k * 10)t.setheading(75)t.forward(self.k * 35)t.setheading(-75)t.forward(self.k * 55)t.setheading(0)t.circle(self.k * 40, 90)t.right(90)t.forward(self.k * 100)t.left(180)t.circle(self.k * 100, 90)t.setheading(180)t.circle(self.k * 70, 90)t.left(180)t.circle(self.k * 70, 90)t.right(90)t.circle(self.k * 100, 90)t.right(180)t.forward(self.k * 100)t.right(90)t.circle(self.k * 40, 90)t.setheading(75)t.forward(self.k * 55)t.setheading(-75)t.forward(self.k * 35)t.setheading(0)t.forward(self.k * 10)t.end_fill()def pumpkin(self):# 画南瓜t.penup()t.goto(250 * self.r, 30 * self.r)t.pendown()t.seth(90)t.begin_fill()for j in range(25):t.fd(j * self.r)t.left(3.6)for j in range(25, 0, -1):t.fd(j * self.r)t.left(3.6)t.seth(-90)t.circle(254 * self.r, 180)t.end_fill()# 眼睛eyes_items = [(-60, 230, 0), (60, -50, 1)]for items in eyes_items:position, angle, direction = itemst.pensize(6)t.penup()t.goto(position * self.r, 0)t.pendown()t.color('yellow', 'yellow')t.begin_fill()t.seth(angle)for j in range(55):t.fd(3 * self.r)if direction:t.left(3)  # 左转3度else:t.right(3)  # 右转3度t.goto(position * self.r, 0)t.end_fill()# 鼻子t.penup()t.goto(0, 0)t.seth(180)t.pendown()t.begin_fill()t.circle(50 * self.r, steps=3)t.end_fill()# 嘴巴t.color('#F9D503', '#F9D503')t.pensize(6)t.penup()t.goto(-150 * self.r, -100 * self.r)t.pendown()t.begin_fill()t.seth(-30)t.fd(100 * self.r)t.left(90)t.fd(30 * self.r)t.right(90)t.fd(60 * self.r)t.left(60)t.fd(60 * self.r)t.right(90)t.fd(30 * self.r)t.left(90)t.fd(100 * self.r)t.end_fill()# 南瓜枝t.penup()t.goto(0, 180 * self.r)t.pendown()t.color('#2E3C01')t.seth(100)t.pensize(25)t.circle(60 * self.r, 100)Bats = []  # 用列表保存所有蝙蝠
for i in range(100):Bats.append(Bat())while True:  # 开始漂浮tu.tracer(0)t.clear()# Bats[0].pumpkin()for i in range(50):  # 在画布中设置50个漂浮的蝙蝠Bats[i].move()Bats[i].bat()tu.update()

2.2、Python万圣节礼物

作者:Want595  

网址:https://bbs.huaweicloud.com/blogs/420016  

效果图:()

完整代码:

import turtle
def init():turtle.setup(1.0,1.0)turtle.speed(10)turtle.hideturtle()turtle.bgcolor('orange')def outline():turtle.color('#CF5E1A', '#CF5E1A')turtle.penup()turtle.goto(250, 30)turtle.pendown()turtle.seth(90)turtle.begin_fill()for j in range(25):turtle.fd(j)turtle.left(3.6)for j in range(25, 0, -1):turtle.fd(j)turtle.left(3.6)turtle.seth(-90)turtle.circle(254, 180)turtle.end_fill()def eyes(args):for items in args:position, angle, direction = itemsturtle.pensize(6)turtle.penup()turtle.goto(position, 0)turtle.pendown()turtle.color('#4C180D', '#4C180D')turtle.begin_fill()turtle.seth(angle)for j in range(55):turtle.fd(3)if direction:turtle.left(3)  # 左转3度else:turtle.right(3)  # 右转3度turtle.goto(position, 0)turtle.end_fill()def nose():turtle.penup()turtle.goto(0, 0)turtle.seth(180)turtle.pendown()turtle.begin_fill()turtle.circle(50, steps=3)turtle.end_fill()def mouth():turtle.color('#F9D503', '#F9D503')turtle.pensize(6)turtle.penup()turtle.penup()turtle.goto(-150, -100)turtle.pendown()turtle.begin_fill()turtle.seth(-30)turtle.fd(100)turtle.left(90)turtle.fd(30)turtle.right(90)turtle.fd(60)turtle.left(60)turtle.fd(60)turtle.right(90)turtle.fd(30)turtle.left(90)turtle.fd(100)turtle.end_fill()turtle.done()def tail():turtle.penup()turtle.goto(0, 180)turtle.pendown()turtle.color('#2E3C01')turtle.seth(100)turtle.pensize(25)turtle.circle(60, 100)def nangua():init()outline()tail()eyes_items = [(-60, 230, 0), (60, -50, 1)]eyes(eyes_items)nose()mouth()turtle.tracer(0)
nangua()

2.3、Python绘制可爱的万圣节南瓜怪,不给糖果就捣乱

作者:小颜今天也很开心 (王翔)

网址:https://blog.csdn.net/weixin_45783312/article/details/102837803  

效果图:()

完整代码:

# -*- coding: utf-8 -*-
# @Author   : 王翔
# @WeChat   : King_Uranus
# @公众号    : 清风Python
# @GitHub   : https://github.com/BreezePython
# @Date     : 2019/10/29 22:30
# @Software : PyCharm
# @version  :Python 3.7.3
# @File     : PumpkinMonster.pyimport turtle as tdef init():
# 初始化#t.bgpic('dark_night.png')t.screensize(500, 500, bg='white')t.speed(10)t.hideturtle()t.bgcolor('black')def outline():
# 绘制南瓜轮廓t.color('#CF5E1A', '#CF5E1A')t.penup()t.goto(250, 30)t.pendown()t.seth(90)t.begin_fill()for j in range(25):t.fd(j)t.left(3.6)for j in range(25, 0, -1):t.fd(j)t.left(3.6)t.seth(-90)t.circle(254, 180)t.end_fill()def tail():
# 绘制南瓜枝t.penup()t.goto(0, 180)t.pendown()t.color('#2E3C01')t.seth(100)t.pensize(25)t.circle(60, 100)def eyes(args):
# 眼睛for items in args:position, angle, direction = itemst.pensize(6)t.penup()t.goto(position, 0)t.pendown()t.color('#4C180D', '#4C180D')t.begin_fill()t.seth(angle)for j in range(55):t.fd(3)if direction:t.left(3)  # 左转3度else:t.right(3)  # 左转3度t.goto(position, 0)t.end_fill()def nose():
# 鼻子t.penup()t.goto(0, 0)t.seth(180)t.pendown()t.begin_fill()t.circle(50, steps=3)t.end_fill()def mouth():
# 嘴巴t.color('#F9D503', '#F9D503')t.pensize(6)t.penup()t.penup()t.goto(-150, -100)t.pendown()t.begin_fill()t.seth(-30)t.fd(100)t.left(90)t.fd(30)t.right(90)t.fd(60)t.left(60)t.fd(60)t.right(90)t.fd(30)t.left(90)t.fd(100)t.end_fill()t.done()if __name__ == '__main__':init()
outline()
tail()
eyes_items = [(-60, 230, 0), (60, -50, 1)]
eyes(eyes_items)
nose()
mouth()
t.done()

三、用MATLAB绘制南瓜灯

3.1、南瓜灯

作者:slandarer

网址:https://slandarer.blog.csdn.net/article/details/120857708  

效果图:(图片来源:slandarer)

代码:

function pumpkin
clc;clear;% 构造网格
[t,p]=meshgrid(linspace(0,2*pi,200),linspace(0,pi-.05,200));
% 二元分段函数
foutline=@(t,p)(p<=.14).*90.*cos(7.*p)+(p>.14).*(cos(20.*t)+70).*(p.*(pi-p+.1)).^.2;mask=ones(size(t));
[maskX,maskY]=meshgrid(1:size(t,1),1:size(t,2));% 画个嘴巴
mask(maskX>50&maskX<100&maskY>130&maskY<140)=nan;
% 矩形眼睛
mask(maskX>45&maskX<65&maskY>90&maskY<100)=nan;
mask(maskX>85&maskX<105&maskY>90&maskY<100)=nan;% 三角形眼睛
% mask(maskX>45&maskX<70&maskY>90&maskY<100)=nan;
% mask(maskX>80&maskX<105&maskY>90&maskY<100)=nan;
% mask(maskX>45&maskX<70&maskY>90&maskY<100&(maskX-maskY>-35))=1;
% mask(maskX>45&maskX<70&maskY>90&maskY<100&(maskX-maskY(end:-1:1,:)<-55))=1;
% mask(maskX>80&maskX<105&maskY>90&maskY<100&(maskX-maskY>5))=1;
% mask(maskX>80&maskX<105&maskY>90&maskY<100&(maskX-maskY(end:-1:1,:)<-15))=1;% 球面坐标转化为X,Y,Z
h=cos(p).*foutline(t,p);
R=sin(p).*foutline(t,p);
R=R.*mask;
X=cos(t).*R;
Y=sin(t).*R;% 颜色矩阵构造
CMap=ones([size(t),3]);
tMap=ones(size(t));
c1=[253,158,3]./255;
c2=[76,103,86]./255;
for i=1:3tMap(:,:)=c1(i);tMap(p<=.14)=c2(i);CMap(:,:,i)=tMap;
endfigure()
surf(X,Y,h,'CData',CMap,'EdgeColor',[0,0,0],'EdgeAlpha',.2)
ax=gca;
hold(ax,'on')
% ax.Color=[0 0 0];% 绘制一个小一圈的南瓜头假装光源
h=cos(p).*foutline(t,p).*0.95;
R=sin(p).*foutline(t,p).*0.95;
X=cos(t).*R;
Y=sin(t).*R;
surf(X,Y,h,'FaceColor',[248,240,186]./255,'EdgeColor','none')ax.View=[-137.3000 13.9844];end

四、html css 绘制南瓜

4.1、css代码绘制皮卡丘南瓜头

作者:网络,请作者留言告知我,更新作者信息

效果图:()

完整代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css代码绘制皮卡丘南瓜头</title><style>@-webkit-keyframes blinky {0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% {transform: scaleY(1);}10%, 20%, 70% {transform: scaleY(0);}
}
@keyframes blinky {0%, 9%, 11%, 19%, 21%, 69%, 71%, 100% {transform: scaleY(1);}10%, 20%, 70% {transform: scaleY(0);}
}
:root {--black: #8f3632;--white: #fff;--primary-color: #ff9441;--primary-color-dark: #dd814b;--primary-color-tint: #ffc562;--secondary-color: #697f31;--secondary-color-tint: #98b847;--tertiary-color: #ebd24c;--tertiary-color-dark: #d3b35a;--tertiary-color-tint: #fcf691;--accent-color: #e63900;--background: #ebd5f6;--background-shadow: #d8ade3;--pumpkin-inside-color: var(--black);--darkness-color: #753f8e;--stroke-width: 0.3125rem;--transition-dur: 0.5s;--flip: 1;
}* {box-sizing: border-box;
}html {font-size: 14px;
}body {display: grid;place-items: center;height: 100vh;background-color: var(--background);line-height: 1;
}.pumpkin {display: grid;place-items: center;position: relative;cursor: pointer;
}
.pumpkin *,
.pumpkin *::before,
.pumpkin *::after {position: absolute;transition: background-color var(--transition-dur);
}
.pumpkin::after {content: "";position: absolute;bottom: -1rem;height: 3rem;width: 70%;border-radius: 100%;background-color: var(--background-shadow);transition: background-color var(--transition-dur);
}
.pumpkin-ear {border-top-left-radius: 50% 80%;border-top-right-radius: 50% 80%;border-bottom-right-radius: 50% 20%;border-bottom-left-radius: 50% 20%;--ear-position-x: 2.75rem;--ear-tip-position-x: -1.5rem;z-index: 4;bottom: calc(100% - 4rem);height: 10rem;width: 5.5rem;transform-origin: center bottom;transform: rotate(calc(40deg * var(--flip)));background-color: var(--primary-color);overflow: hidden;
}
.pumpkin-ear::before {content: "";top: -0.5rem;left: var(--ear-tip-left);right: var(--ear-tip-right);height: 4rem;width: 140%;transform: rotate(calc(20deg * var(--flip)));border-radius: 100%;border: var(--stroke-width) solid var(--black);transition: border-color var(--transition-dur);
}
.pumpkin-ear-left {--flip: -1;--ear-tip-left: var(--ear-tip-position-x);left: var(--ear-position-x);
}
.pumpkin-ear-right {--ear-tip-right: var(--ear-tip-position-x);right: var(--ear-position-x);
}
.pumpkin-eye {--eye-position-x: 4.5em;--eye-inner-position-x: 0.375em;--eye-light-position-x: 35%;--eye-br-bottom-y: 40%;top: 0;height: 3.5em;width: 3.25em;
}
.pumpkin-eye::before {content: "";z-index: 5;top: 0;left: var(--eye-inner-left);right: var(--eye-inner-right);height: 1.5em;width: 1.5em;border-radius: 100%;background-color: var(--primary-color);
}
.pumpkin-eye-inner {height: 100%;width: 100%;transform: translateZ(0);border-top-left-radius: 50% 60%;border-top-right-radius: 50% 60%;border-bottom-left-radius: var(--eye-br-bottom-left);border-bottom-right-radius: var(--eye-br-bottom-right);box-shadow: var(--eye-box-shadow);background-color: var(--pumpkin-inside-color);overflow: hidden;
}
.pumpkin-eye-inner::before, .pumpkin-eye-inner::after {content: "";bottom: -6em;left: var(--eye-light-left);right: var(--eye-light-right);height: 300%;width: 300%;border-radius: 100%;opacity: var(--eye-light-opacity, 0);transition: opacity var(--transition-dur);
}
.pumpkin-eye-inner::before {transform: scale(1.1);background-color: var(--tertiary-color);-webkit-animation: var(--pumpkin-light-animation);animation: var(--pumpkin-light-animation);
}
.pumpkin-eye-inner::after {transform: scale(0.9);background-color: var(--tertiary-color-tint);-webkit-animation: var(--pumpkin-light-inner-animation);animation: var(--pumpkin-light-inner-animation);
}
.pumpkin-eye-left {--eye-inner-right: var(--eye-inner-position-x);--eye-br-bottom-left: 55% var(--eye-br-bottom-y);--eye-br-bottom-right: 45% var(--eye-br-bottom-y);--eye-box-shadow: inset var(--stroke-width) calc(var(--stroke-width) * -1) var(--primary-color-tint);--eye-light-left: var(--eye-light-position-x);left: var(--eye-position-x);
}
.pumpkin-eye-right {--eye-inner-left: var(--eye-inner-position-x);--eye-br-bottom-left: 45% var(--eye-br-bottom-y);--eye-br-bottom-right: 55% var(--eye-br-bottom-y);--eye-box-shadow: inset calc(var(--stroke-width) * -1) calc(var(--stroke-width) * -1) var(--primary-color-tint);--eye-light-right: var(--eye-light-position-x);right: var(--eye-position-x);
}
.pumpkin-nose {border-top-left-radius: 50% 30%;border-top-right-radius: 50% 30%;border-bottom-right-radius: 50% 70%;border-bottom-left-radius: 50% 70%;top: 2.5em;left: 50%;height: 0.5em;width: 0.75em;transform: translateX(-50%);background-color: var(--black);
}
.pumpkin-mouth {top: 3.5em;left: 50%;height: 0.625em;width: 4.75em;transform: translateX(-50%);overflow: hidden;
}
.pumpkin-mouth::before, .pumpkin-mouth::after {content: "";bottom: 0;height: 200%;width: calc(50% - var(--stroke-width) * 2);border-radius: 100%;border: var(--stroke-width) solid var(--black);transition: border-color var(--transition-dur);
}
.pumpkin-mouth::before {left: calc(50% - var(--stroke-width) / 2);border-right: 0;
}
.pumpkin-mouth::after {right: calc(50% - var(--stroke-width) / 2);border-left: 0;
}
.pumpkin-cheek {--cheek-position-x: 2rem;--cheek-light-position-x: 117%;top: 2.5rem;height: 3.75rem;width: 3rem;transform: rotate(calc(15deg * var(--flip)));border-radius: 100%;background-color: var(--pumpkin-inside-color);overflow: hidden;
}
.pumpkin-cheek::before {content: "";left: var(--cheek-light-left);right: var(--cheek-light-right);top: -1.75em;height: 280%;width: 320%;border-radius: 100%;background-color: var(--tertiary-color);opacity: var(--cheek-light-opacity, 0);transition: opacity var(--transition-dur);-webkit-animation: var(--pumpkin-light-animation);animation: var(--pumpkin-light-animation);
}
.pumpkin-cheek-left {--flip: -1;--cheek-light-left: var(--cheek-light-position-x);left: var(--cheek-position-x);box-shadow: inset var(--stroke-width) calc(var(--stroke-width) * -1) var(--primary-color-tint);
}
.pumpkin-cheek-right {--cheek-light-right: var(--cheek-light-position-x);right: var(--cheek-position-x);box-shadow: inset calc(var(--stroke-width) * -1) calc(var(--stroke-width) * -1) var(--primary-color-tint);
}
.pumpkin-face {z-index: 5;width: 100%;top: 8rem;
}
.pumpkin-body {position: relative;z-index: 1;height: 16rem;width: 21rem;
}
.pumpkin-body-front {border-top-left-radius: 50% 60%;border-top-right-radius: 50% 60%;border-bottom-right-radius: 45% 40%;border-bottom-left-radius: 45% 40%;position: absolute;z-index: 2;left: 50%;height: 100%;width: 65%;transform: translateX(-50%);background-color: var(--primary-color-dark);overflow: hidden;
}
.pumpkin-body-front::before {content: "";top: -10%;left: 50%;height: 100%;width: 90%;transform: translateX(-50%);border-radius: inherit;background-color: var(--primary-color);
}
.pumpkin-body-side {--side-br-top-y: 55%;--side-highlight-position-x: 0;z-index: 1;bottom: 1%;height: 100%;width: 70%;border-bottom-left-radius: 50% 45%;border-bottom-right-radius: 50% 45%;background-color: var(--primary-color-dark);overflow: hidden;
}
.pumpkin-body-side::before {content: "";top: -10%;left: var(--side-highlight-left);right: var(--side-highlight-right);height: 100%;width: 120%;border-radius: inherit;background-color: var(--primary-color);
}
.pumpkin-body-side-left {--side-highlight-left: var(--side-highlight-position-x);left: 0;border-top-left-radius: 65% var(--side-br-top-y);border-top-right-radius: 35% var(--side-br-top-y);
}
.pumpkin-body-side-right {--side-highlight-right: var(--side-highlight-position-x);right: 0;border-top-left-radius: 35% var(--side-br-top-y);border-top-right-radius: 65% var(--side-br-top-y);
}
.pumpkin-body-smol {position: relative;z-index: 2;height: 10rem;width: 12rem;margin-bottom: -2rem;
}
.pumpkin-body-smol::after {content: "";bottom: -1rem;left: 50%;height: 3rem;width: 80%;transform: translateX(-50%);border-radius: 100%;background-color: var(--primary-color-dark);
}
.pumpkin-leaves {z-index: 4;bottom: 2.5rem;left: 50%;width: 6.5rem;transform: translateX(-50%);
}
.pumpkin-leaf {height: 3rem;width: 3rem;transform: rotate(calc(-15deg * var(--flip))) rotateY(var(--leaf-rotate-y, 0deg));border-top-right-radius: 100%;border-bottom-left-radius: 100%;border-bottom-right-radius: 50%;background-color: var(--accent-color);
}
.pumpkin-leaf::before {content: "";left: 75%;bottom: -0.5rem;height: 70%;width: var(--stroke-width);transform: rotate(-45deg);border-radius: var(--stroke-width);background-color: var(--black);
}
.pumpkin-leaf-right {--leaf-rotate-y: 180deg;--flip: -1;right: 0;
}
.pumpkin-stem {z-index: 3;top: -1%;left: 50%;width: 25%;height: 10%;transform: translateX(-50%);
}
.pumpkin-stem-base {height: 100%;width: 100%;border-radius: 100%;background-color: var(--secondary-color);
}
.pumpkin-stem-stick {z-index: 2;bottom: 50%;left: 50%;width: 50%;height: 100%;background-color: var(--secondary-color);transform: translateX(-50%);
}
.pumpkin-stem-stick::before, .pumpkin-stem-stick::after {content: "";width: 100%;height: 50%;border-radius: 100%;
}
.pumpkin-stem-stick::before {top: -25%;background-color: var(--secondary-color-tint);
}
.pumpkin-stem-stick::after {bottom: -25%;
}.darkness {position: absolute;top: 0;left: 0;height: 100%;width: 100%;position: fixed;z-index: -1;max-width: 100%;background-color: var(--darkness-color);opacity: var(--darkness-opacity, 0);transition: var(--transition-dur);
}.pumpkin-control {position: absolute;opacity: 0;
}
.pumpkin-control:checked + .pumpkin {--black: #3a0f1d;--primary-color: #6c2728;--primary-color-dark: #5d212c;--secondary-color: #2c1c1c;--secondary-color-tint: #402c2a;--accent-color: #601709;--background-shadow: #31154c;--pumpkin-inside-color: var(--tertiary-color-dark);--eye-light-opacity: 0.7;--cheek-light-opacity: 0.7;--pumpkin-light-animation: flicker 7s var(--transition-dur) infinite;--pumpkin-light-inner-animation: flickerPulse 6s var(--transition-dur) infinite;
}
.pumpkin-control:checked ~ .darkness {--darkness-opacity: 1;
}@-webkit-keyframes flicker {0%, 20%, 50%, 60%, 90%, 100% {transform: scale(1.1);opacity: 0.7;}40% {transform: scale(1.2) translateX(0.75rem);opacity: 0.4;}80% {transform: scale(1.3) translateX(-0.5rem);opacity: 0.2;}
}@keyframes flicker {0%, 20%, 50%, 60%, 90%, 100% {transform: scale(1.1);opacity: 0.7;}40% {transform: scale(1.2) translateX(0.75rem);opacity: 0.4;}80% {transform: scale(1.3) translateX(-0.5rem);opacity: 0.2;}
}
@-webkit-keyframes flickerPulse {0%, 100% {transform: scale(0.9);opacity: 0.7;}50% {transform: scale(1);opacity: 0.3;}
}
@keyframes flickerPulse {0%, 100% {transform: scale(0.9);opacity: 0.7;}50% {transform: scale(1);opacity: 0.3;}
}</style>
</head>
<body>
<label for="pumpkin" class="pumpkin"><div class="pumpkin-body-smol"><div class="pumpkin-body-front"></div><div class="pumpkin-body-side pumpkin-body-side-left"></div><div class="pumpkin-body-side pumpkin-body-side-right"></div><div class="pumpkin-stem"><div class="pumpkin-stem-stick"></div><div class="pumpkin-stem-base"></div></div></div><div class="pumpkin-body"><div class="pumpkin-ear pumpkin-ear-left"></div><div class="pumpkin-ear pumpkin-ear-right"></div><div class="pumpkin-face"><div class="pumpkin-eye pumpkin-eye-left"><div class="pumpkin-eye-inner"></div></div><div class="pumpkin-eye pumpkin-eye-right"><div class="pumpkin-eye-inner"></div></div><div class="pumpkin-nose"></div><div class="pumpkin-mouth"></div><div class="pumpkin-cheek pumpkin-cheek-left"></div><div class="pumpkin-cheek pumpkin-cheek-right"></div></div><div class="pumpkin-body-front"></div><div class="pumpkin-body-side pumpkin-body-side-left"></div><div class="pumpkin-body-side pumpkin-body-side-right"></div><div class="pumpkin-leaves"><div class="pumpkin-leaf pumpkin-leaf-left"></div><div class="pumpkin-leaf pumpkin-leaf-right"></div></div></div>
</label>
<div class="darkness"></div>
</body>
</html>

4.2、爱卡通南瓜头css代码

作者:网络,请作者留言告知我,更新作者信息

效果图:()

完整代码:

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>可爱卡通南瓜头css代码</title><style>body{background-color:#321757}.general-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:fly 10s ease-in-out infinite}.shine{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:300px;background:radial-gradient(closest-side,#872c91,transparent);animation:shine 4s ease-in-out infinite alternate}.stem{position:absolute;top:-5px;width:100px;height:25px;background-color:#2f5c15;border-radius:50%}.stem:before{position:absolute;top:-44px;left:45px;content:'';display:block;width:25px;height:30px;border-top:15px solid #2f5c15;border-left:10px solid #2f5c15;border-top-left-radius:100% 100%}.stem:after{position:absolute;top:-32px;left:50px;content:'';display:block;width:25px;height:30px;border-top:3px solid #264d0f;border-left:5px solid #264d0f;border-top-left-radius:100% 100%}.pumpkin1{position:absolute;top:0;width:100px;height:125px;background-color:#c27713;box-shadow:inset 7px -20px 20px rgba(0,0,0,0.5),inset -10px 15px 20px #fa940c,-1px 2px 5px rgba(0,0,0,0.4);border-width:0;border-top-left-radius:50% 60%;border-top-right-radius:50% 60%;border-bottom-left-radius:50% 40%;border-bottom-right-radius:50% 40%}.pumpkin2{position:absolute;top:0;left:-35px;width:100px;height:123px;background-color:#b56b0d;box-shadow:inset 3px -20px 20px rgba(0,0,0,0.5),inset -3px 15px 20px #fa940c;border-top-left-radius:60% 60%;border-top-right-radius:40% 40%;border-bottom-left-radius:60% 40%;border-bottom-right-radius:40% 40%}.pumpkin3{position:absolute;top:0;left:35px;width:100px;height:123px;background-color:#b56b0d;box-shadow:inset 3px -20px 20px rgba(0,0,0,0.5),inset -3px 15px 20px #fa940c;border-top-right-radius:60% 60%;border-top-left-radius:40% 40%;border-bottom-right-radius:60% 40%;border-bottom-left-radius:40% 40%}.pumpkin4{position:absolute;top:0;left:60px;width:90px;height:120px;background-color:#754709;box-shadow:inset 3px -20px 20px rgba(0,0,0,0.4),inset -3px 15px 20px #fa940c;border-top-right-radius:60% 60%;border-top-left-radius:40% 60%;border-bottom-right-radius:50% 40%;border-bottom-left-radius:50% 40%}.pumpkin5{position:relative;top:0;left:-50px;width:100px;height:120px;background-color:#754709;box-shadow:inset 3px -20px 20px rgba(0,0,0,0.4),inset -3px 15px 20px rgba(250,148,12,0.8);border-top-left-radius:60% 60%;border-top-right-radius:40% 40%;border-bottom-left-radius:50% 40%;border-bottom-right-radius:50% 40%}.eye-l{position:absolute;top:60px;left:-10px;width:15px;height:15px;background-color:black;border:5px solid black;border-radius:50%;box-shadow:inset -3px -3px 3px rgba(201,136,38,0.7);animation:blink 2s linear infinite alternate}.eye-l:after{position:absolute;top:2px;left:5px;content:'';display:block;width:5px;height:15px;background-color:yellow;border-bottom-left-radius:50% 10%;border-bottom-right-radius:50% 10%;border-top-left-radius:50% 90%;border-top-right-radius:50% 90%}.eye-l:before{position:absolute;top:-2px;left:0;content:'';display:block;width:5px;height:5px;background-color:white;border-radius:50%}.eye-r{position:absolute;top:60px;right:-10px;width:15px;height:15px;background-color:black;border:5px solid black;border-radius:50%;box-shadow:inset -3px -3px 3px rgba(201,136,38,0.7);animation:blink 2s linear infinite alternate}.eye-r:after{position:absolute;top:2px;left:5px;content:'';display:block;width:5px;height:15px;background-color:yellow;border-bottom-left-radius:50% 10%;border-bottom-right-radius:50% 10%;border-top-left-radius:50% 90%;border-top-right-radius:50% 90%}.eye-r:before{position:absolute;top:-2px;left:0;content:'';display:block;width:5px;height:5px;background-color:white;border-radius:50%}.mouth{position:absolute;top:80px;left:37px;width:26px;height:10px;background-color:darkred;border:2px solid rgba(0,0,0,0.5);border-top-left-radius:50% 0;border-top-right-radius:50% 0;border-bottom-left-radius:50% 100%;border-bottom-right-radius:50% 100%;animation:mouth 4s ease-in-out infinite alternate}.mouth:before{content:'';display:block;position:absolute;top:-7px;left:4px;width:6px;height:10px;background-color:#c27713;border-radius:2px;animation:tooth 4s ease-in-out infinite alternate}.mouth:after{content:'BOOO!';display:block;position:absolute;bottom:4px;right:9px;width:0;overflow:hidden;color:white;font-family:cursive;font-size:12px;font-weight:500;transform-origin:right;transform:rotate(50deg);animation:boo 8s ease-in-out infinite}@keyframes mouth{0%,50%{top:80px;left:37px;width:26px;height:10px;border-top-left-radius:50% 0;border-top-right-radius:50% 0;border-bottom-left-radius:50% 100%;border-bottom-right-radius:50% 100%}70%,100%{top:65px;left:42px;width:16px;height:16px;border-radius:50%}}@keyframes tooth{0%,60%{left:4px}70%,100%{left:1px}}@keyframes boo{0%,33%{width:0;opacity:1}50%,70%{width:60px;opacity:1}73%,100%{opacity:0}}@keyframes blink{0%,95%{transform:scaleY(1)}100%{transform:scaleY(0)}}@keyframes fly{0%{transform:translate(-150px,-50px) rotate(-10deg)}25%{transform:translate(50px,30px) rotate(10deg)}50%{transform:translate(-100px,50px) rotate(-5deg)}75%{transform:translate(0px,-30px) rotate(20deg)}100%{transform:translate(-150px,-50px) rotate(-10deg)}}@keyframes shine{0%{width:400px;height:300px}40%{width:320px;height:220px}50%{width:400px;height:300px}65%{width:370px;height:270px}100%{width:400px;height:300px}}</style>
</head>
<body><div class='general-container'><div class='shine'></div><div class='stem'></div><div class='pumpkin5'></div><div class='pumpkin4'></div><div class='pumpkin3'></div><div class='pumpkin2'></div><div class='pumpkin1'></div><div class='eye-l'></div><div class='eye-r'></div><div class='mouth'></div>
</div>
</body>
</html>

4.3、svg南瓜

作者:网络,请作者留言告知我,更新作者信息(

效果图:()

完整代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>svg南瓜</title><style>body {background: #F8E0BF;
}.contain {margin: 50px auto;width: 70%;
}@media (max-width: 800px) {.contain {width: 100%;}
}</style>
</head>
<body><div class="contain"><svg viewBox="0 0 700 450" fill="none"><g id="pumpkin"><path id="Vector 1" d="M325 159C333.333 159.667 350 163.8 350 175C350 186.2 350 204.333 350 212" stroke="black" stroke-width="10" /><rect id="Rectangle 1" x="250" y="189" width="200" height="151" rx="75.5" fill="#EE8532" /><ellipse id="Ellipse 1" cx="350" cy="264.5" rx="76" ry="75.5" fill="#E26B2C" /><ellipse id="Ellipse 2" cx="350" cy="264.5" rx="35" ry="75.5" fill="#EE8532" /></g></svg></div>
</body>
</html>

           推荐阅读:

CSS @规则(At-rules)详解系列索引目录

逆境清醒CSS3 动画相关属性实例大全系列目录:

  • 1、CSS3 动画相关属性实例大全(一)(@keyframes ,background属性,border 属性)
  • 2、CSS3 动画相关属性实例大全(二)(bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性)
  • 3、CSS3 动画相关属性实例大全(三)(columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性)
  • 4、CSS3 动画相关属性实例大全(四)(font、height、left、letter-spacing、line-height 属性)
  • 5、CSS3 动画相关属性实例大全(五)(margin 、max-height、max-width、min-height、min-width、opacity 、order 属性)
  • 6、CSS3 动画相关属性实例大全(六)(outline 、outline-color 、outline-offset、outline-width、padding、padding-bottom、padding-left 、padding-right 、padding-top、perspective属性)
  • 7、

CSS3 动画相关属性实例大全(七)(perspective-origin、right、text-decoration-color 、text-indent、text-shadow、top 、transform、transform-origin、vertical-align、visibility 、width、word-spacing、z-index属性)

27d5b50d93a089da35ee1a28905f9719.jpeg​​​​

c64d8b4d0b6842ebe1196c0b1e3fba51.jpeg​​​​

a136a43cd0015088d4ce37b1bb653533.jpeg​​​​

给照片换底色(python+opencv)猫十二分类基于大模型的虚拟数字人__虚拟主播实例

0f92b28e915ca3cc26cfaaf47c5fc62d.jpeg​​​​​​

5d2b51be3e7e932be95355088e17d524.jpeg​​​​​​

3cf3fe3c1a186bfcbf12d4755b8950ae.jpeg​​​​​​

计算机视觉__基本图像操作(显示、读取、保存)直方图(颜色直方图、灰度直方图)直方图均衡化(调节图像亮度、对比度)

849b7a72434213407c862c8f8e071a22.png​​​​​​

9412a31659ba6db83d806c3f354dd1c0.png​​​​​​

fb29a865f75af8352dca5e3d56a09004.png​​​​​​

语音识别实战(python代码)(一)

 人工智能基础篇

 计算机视觉基础__图像特征

逆境清醒

637c349e8206c0651d1f2751ba128912.png​​​​​​

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

ec9793633e16de7b52fbf0b74ecfa2f3.png​​​​​​

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

6e420cca6a1313b93948785f689f5723.png​​​​​​

1da3f182e081ad8f3cfcf53013909b8b.png​​​​​​

ca733c1a99c6457a762d0e503855ce79.png​​​​​​

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

 Python 3D可视化(一)

让你的作品更出色——词云Word Cloud的制作方法(基于python,WordCloud,stylecloud)

f92dfeb72ec683025a63db2fe8a26492.png​​​​​​

1b2a866ebb074a1e5859dad42c435d5c.jpeg​​​​​​

8207b63755bf37b10807a046080f14df.png​​​​​​

 python Format()函数的用法___实例详解(一)(全,例多)___各种格式化替换,format对齐打印

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

python爱心源代码集锦(18款)

b97d56fe7e3ce6234cb182ad86fef4ed.jpeg​​​​​​

6871f222e7db3f8ce83336ad50311c3a.png​​​​​​

b89ed1147e8a76e6c64b812d65e8f2ef.png​​​​​​

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

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

 《 Python List 列表全实例详解系列(一)》__系列总目录、列表概念

7090a17485b11d9da69e37e5756c6910.png​​​​​​

50313523c8c19f29270fb1110fe66ae9.png​​​​​​

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

 python练习题目录

4c77c7a60782637db9e27b3deec7abee.png​​​​​​

c397ed3a22c7885194eb92b5b3883322.png​​​​​​

a18fbd27f15eaa98f0bb5a4fed8cbd8b.png​​​​​​

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

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

 ​草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码

36e2af3bf474c59b9c430b223417793b.png​​​​​​

542dbf91cfafa23e1ccdee94a7b22397.png​​​​​​

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

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

68b0f4704053ab870c16bb4e37897d63.png​​​​​​

25ff4b8d741f0942c50dd96b7e866386.jpeg​​​​​​

59bb0955631256520f0edd17f8304669.jpeg​​​​​​

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

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

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

7dda70990181a20a430cc7b13dc9d8aa.png

a1fea2de0187913a4cdb18473c512c55.png​​​​​​

96e1df3760ce3017026da2d1de069869.png​​​​​​

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

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

 查看jdk安装路径,在windows上实现多个java jdk的共存解决办法,安装java19后终端乱码的解决

fa753f11d26d967646a85b78b53dc703.png​​​​​​

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

4290a52c20eee861ee159e17659342f5.png​​​​​​

b126b976989a1e4f1ae40867407e8f4d.png​​​​​​

15f065b7e46b238db1e7382f70fd7076.png​​​​​​

2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特

 别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(4套)

SVG实例详解系列(一)(svg概述、位图和矢量图区别(图解)、SVG应用实例)

f3a00b9bf85e8d36c21d8e9785f43a53.png​​​​​​

1f143789d9652fd35c1fabf11b6f149c.png​​​​​​

2c8047a9f87aa22a8abe57ad0081b1d9.png​​​​​​

【程序人生】卡塔尔世界杯元素python海龟绘图(附源代码),世界杯主题前端特效5个(附源码)HTML+CSS+svg绘制精美彩色闪灯圣诞树,HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

 2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)(附完整源代码及资源免费下载)

a01e7c6663c27936b3c174265db14012.png​​​​​​

6d12eed561af36157625a07b771f9b0b.png​​​​​​

af9dcebc4110cf5b9a012a3ef7d268fe.png​​​​​​

 tomcat11、tomcat10 安装配置(Windows环境)(详细图文)

 Tomcat端口配置(详细)

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com