css+js实现南瓜表情点击旋转动画效果代码-html代码-BFW代码库

css+js实现南瓜表情点击旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：css+js实现南瓜表情点击旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body {
        	height: 100vh;
        	margin: 0;
        	background: rgb(19, 24, 17);
        	background: radial-gradient(
        		circle,
        		rgba(19, 24, 17, 1) 50%,
        		rgba(0, 0, 0, 1) 100%
        	);
        	color: gray;
        	font-family: system-ui;
        	display: flex;
        	align-content: center;
        	flex-wrap: nowrap;
        	justify-content: center;
        	align-items: center;
        	gap: 5rem;
        }
        
        p {
        	position: absolute;
        	top: 25%;
        }
        
        .pumpkin {
        	display: inline- block;
        	width: 20vmin;
        	aspect-ratio: 1.1/1;
        	background: 
        /* 		radial-gradient(60% 125% at 50% 50%, rgba(255,255,255,.1) 50%, transparent 60%), */
        		#F60;
        	text-align: center;
        	position: relative;
        	border-radius: 40%;
        	filter: drop-shadow(5px 5px black) drop-shadow(-5px 5px black)
        		drop-shadow(5px -5px black) drop-shadow(-5px -5px black);
        	transition: 2s;
        }
        .rotate .pumpkin {
        	transform: rotate(1440deg);
        }
        .pumpkin:before {
        	content: "";
        	width: 20%;
        	height: 15%;
        	background: saddlebrown;
        	position: absolute;
        	top: -15%;
        	left: 40%;
        }
        .pumpkin:after {
        	content: "";
        	width: 30%;
        	height: 15%;
        	background: forestgreen;
        	position: absolute;
        	top: -15%;
        	left: 15%;
        	border-radius: 0 1rem 0 1rem;
        }
        
        .feature {
        	/* 	outline: 1px solid white; */
        	width: 100%;
        	height: 33%;
        	display: block;
        }
        
        .eyes_one {
        	background: radial-gradient(circle at 33% 100%, black 20%, transparent 21%),
        		radial-gradient(circle at 66% 100%, black 20%, transparent 21%);
        }
        .eyes_two {
        	background: 
        		conic-gradient(transparent 0deg 145deg, black 145deg 215deg, transparent 215deg);
        	background-size: 50% 100%;
        /* 	transform: translateY(50%); */
        }
        .eyes_three {
        	background: 
        		radial-gradient(20% 50% at 33% 75%, black 50%, transparent 50%),
        		radial-gradient(20% 50% at 66% 75%, black 50%, transparent 50%);
        }
        
        .nose_one {
        	background: 
        		conic-gradient(transparent 0deg 145deg, black 145deg 215deg, transparent 215deg);
        	transform: translateY(-25%);
        }
        .nose_two {
        	background: 
        		conic-gradient(transparent 0deg 145deg, black 145deg 215deg, transparent 215deg);
        	transform: translateY(25%) scaleY(-1);
        }
        .nose_three {
        	background: radial-gradient(circle at 50% 100%, black 20%, transparent 21%);
        	transform: translateY(-25%);
        }
        
        .mouth_one {
        	background: 
        		.........完整代码请登录后点击上方下载按钮下载查看