用代码画万圣节南瓜(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 逆境清醒)
“我们,都是过客。这一生,行过的桥,走过的路,看过的风景,爱过的人都是一辈子最宝贵的财富。”-----汪曾祺
既然是财富,就得好好珍惜,好好享受,才不负遇见,不枉此生。珍惜当下所拥有的,永远不放弃对美好生活的追求,每一天认认真真生活,最大限度地把日子过得有趣起来。
认真生活的人,心里有爱,眼里有光,他们总能在琐碎艰难的生活里,脸上带着笑,开出一朵希望的花儿。-----三毛
百合盲盒种出花蕾了,会开什么颜色的花呢? |
逆境清醒
2024.10.31
一、效果图片索引
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属性)
| | |
给照片换底色(python+opencv) | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
| | |
计算机视觉__基本图像操作(显示、读取、保存) | 直方图(颜色直方图、灰度直方图) | 直方图均衡化(调节图像亮度、对比度) |
| | |
语音识别实战(python代码)(一) | 人工智能基础篇 | 计算机视觉基础__图像特征 |
逆境清醒
| ||
matplotlib 自带绘图样式效果展示速查(28种,全) | ||
| ||
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) | ||
| | |
立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 | Python 3D可视化(一) | 让你的作品更出色——词云Word Cloud的制作方法(基于python,WordCloud,stylecloud) |
| | |
python Format()函数的用法___实例详解(一)(全,例多)___各种格式化替换,format对齐打印 | 用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心) | python爱心源代码集锦(18款) |
| | |
Python中Print()函数的用法___实例详解(全,例多) | Python函数方法实例详解全集(更新中...) | 《 Python List 列表全实例详解系列(一)》__系列总目录、列表概念 |
| | |
用代码过中秋,python海龟月饼你要不要尝一口? | python练习题目录 | |
| | |
草莓熊python turtle绘图(风车版)附源代码 | 草莓熊python turtle绘图代码(玫瑰花版)附源代码 | 草莓熊python绘图(春节版,圣诞倒数雪花版)附源代码 |
| | |
巴斯光年python turtle绘图__附源代码 | 皮卡丘python turtle海龟绘图(电力球版)附源代码 | |
| | |
Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程(超详细) | 色彩颜色对照表(一)(16进制、RGB、CMYK、HSV、中英文名) | 2024年6月多家权威机构____编程语言排行榜__薪酬状况 |
| | |
手机屏幕坏了____怎么把里面的资料导出(18种方法) | 【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向) | 查看jdk安装路径,在windows上实现多个java jdk的共存解决办法,安装java19后终端乱码的解决 |
| ||
vue3 项目搭建教程(基于create-vue,vite,Vite + Vue) | ||
| | |
2023年春节祝福第二弹——送你一只守护兔,让它温暖每一个你【html5 css3】画会动的小兔子,炫酷充电,字体特 | 别具一格,原创唯美浪漫情人节表白专辑,(复制就可用)(html5,css3,svg)表白爱心代码(4套) | SVG实例详解系列(一)(svg概述、位图和矢量图区别(图解)、SVG应用实例) |
| | |
【程序人生】卡塔尔世界杯元素python海龟绘图(附源代码),世界杯主题前端特效5个(附源码) | HTML+CSS+svg绘制精美彩色闪灯圣诞树,HTML+CSS+Js实时新年时间倒数倒计时(附源代码) | 2023春节祝福系列第一弹(上)(放飞祈福孔明灯,祝福大家身体健康)(附完整源代码及资源免费下载) |
| | |
tomcat11、tomcat10 安装配置(Windows环境)(详细图文) | Tomcat端口配置(详细) | Tomcat 启动闪退问题解决集(八大类详细) |