用代码画万圣节南瓜(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

百合花盲盒揭晓。3种颜色:橙色、粉色,黄色

 逆境清醒

2024.11.18

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 math
 
tu.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 = -500
            self.f = ra.uniform(-3.14, 3.14)
            self.speed = ra.randint(5, 10)
            self.color = ra.choice(colors)
            self.outline = 1
 
    def 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 = items
            t.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 = items
        turtle.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.py

import turtle as t

def 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 = items
        t.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:3
    tMap(:,:)=c1(i);
    tMap(p<=.14)=c2(i);
    CMap(:,:,i)=tMap;
end

figure()
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 动画相关属性实例大全系列目录:

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 启动闪退问题解决集(八大类详细)

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逆境清醒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值