用代码画万圣节南瓜(python,MATLAB,html css)
本文目录:
零、时光宝盒
(https://blog.csdn.net/weixin_69553582 逆境清醒)
“我们,都是过客。这一生,行过的桥,走过的路,看过的风景,爱过的人都是一辈子最宝贵的财富。”-----汪曾祺
既然是财富,就得好好珍惜,好好享受,才不负遇见,不枉此生。珍惜当下所拥有的,永远不放弃对美好生活的追求,每一天认认真真生活,最大限度地把日子过得有趣起来。
认真生活的人,心里有爱,眼里有光,他们总能在琐碎艰难的生活里,脸上带着笑,开出一朵希望的花儿。-----三毛
![]() |
买的百合盲盒种出花蕾了,会开什么颜色的花呢? |
逆境清醒
2024.10.31
百合花盲盒揭晓。3种颜色:橙色、粉色,黄色
逆境清醒
2024.11.18
一、效果图片索引
![]() | ![]() | ![]() |
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>
推荐阅读:
逆境清醒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、
|
|
|
给照片换底色(python+opencv) | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
|
|
|
计算机视觉__基本图像操作(显示、读取、保存) | 直方图(颜色直方图、灰度直方图) | 直方图均衡化(调节图像亮度、对比度) |
|
|
|
逆境清醒
| ||
| ||
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) | ||
|
|
|
立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 | ||
|
|
|
用代码写出浪漫__合集(python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心) | python爱心源代码集锦(18款) | |
|
|
|
|
| |
用代码过中秋,python海龟月饼你要不要尝一口? | ||
|
|
|
草莓熊python turtle绘图(风车版)附源代码 | ||
|
| |
皮卡丘python turtle海龟绘图(电力球版)附源代码 | ||
|
|
|
2024年6月多家权威机构____编程语言排行榜__薪酬状况 | ||
|
|
|
【CSDN云IDE】个人使用体验和建议(含超详细操作教程)(python、webGL方向) | ||
|
|
|