WYweya 2021-06-07 09:32 采纳率: 20%
浏览 33

怎么在这个卡通基础上加眼珠子转或者吐舌头的动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Pikachu</title>
        <link rel="stylesheet" href="css/Pikachu.css" />
    </head>
    <body>
         <div class="wrapper">
            <div class="nose"></div>
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div class="face left"></div>
            <div class="face right"></div>
            <div class="lip left"></div>
            <div class="lip right"></div>
            <div class="lowerlip">
                <div class="mouth"></div>
            </div>

         </div>

    </body>
</html>

*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
*::after{
    box-sizing:border-box;
}
*::before{
    box-sizing:border-box;
}
body{
    height: 100vh;
    border:1px solid green;
    display: flex;
    justify-content: center;
    align-items:center;
    background-color:#FEE433;
}
.wrapper{
    width: 400px;
    height: 320px;
    position: absolute;
}
.nose{
    width: 0px;
    height:0px;
    border: 13px solid;
    border-radius: 50%;
    border-color:black transparent transparent;
    position: relative;
    left:50%;
    top: 25%;
    transform: translateX(-50%);
}
.eye{
    width: 50px;
    height: 50px;
    border-radius:50% ;
    background-color: #2E2E2E;
    border: 5px solid black;
    float: left;
    position: absolute;
}
.eye::before{
    content: "";
    display:block;
    width: 20px;
    height: 20px;
    border-radius:50%;
    background-color:white ;
    transform: translateX(2px) translateY(-1px);
}
.eye.left{
    position: relative;
    left:25%;
    transform: translateX(-50%) translateY(50%);
}
.eye.right{
    position: relative;
    left:50%;
    transform: translateX(50%) translateY(50%);
}
.face{
    width: 80px;
    height: 80px;
    border:2px solid red;
    border-radius:50% ;
    background-color: #FC0D1C;
    position: absolute;
    top:0;
    left:0;

}
.face.left{
    position:relative;
    top:60%;
    left: 15%;
     transform: translateX(-50%) translateY(-50%);
}
.face.right{
    position:relative;
    top:60%;
    left: 85%;
    transform: translateX(-50%) translateY(-150%);
}
.lip{
    width: 80px;
    height: 24px;
    border:4px solid black;
    background-color:#FEE433;
    z-index: 1;
    position:absolute;
    top:40%;
    left:50%;
}
.lip.left{
    border-bottom-left-radius:50% 100%;
    border-top:none ;
    border-right: none;
    transform: translateX(-100%) translateY(-7px) rotate(-30deg) translateX(2px);

}
.lip.right{
    border-bottom-right-radius:50% 100%;
    border-top:none;
    border-left: none;
    transform: translateX(-2px) translateY(-7px) rotate(30deg);
}
.mouth{
    width: 100px;
    height: 480px;
    border:1px solid red;
    border-radius: 50% ;
    background-color:#990513 ;
    position:absolute ;
    top: -30%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    overflow: hidden;
}
.lowerlip{
    width: 280px;
    height: 200px;
    position:absolute ;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-18%);
    overflow: hidden;
}
.mouth::after{
    content: " ";
    display: block;
    width:150px;
    height: 150px;
    border-radius:50% ;
    background-color:#FC4A62 ;
    position: relative;
    top: 90%;
    transform:  translateX(-25px) translateY(-65%);

}
  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2021-06-07 10:14
    关注

    可以参考这个 

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>汉克狗案例</title>
	<style type="text/css">
		:root{
			--hl:#1b2f90;
			--bg:#f9f9f6;
			--t:2s;
		}
		body{
			background: #ffc400;
		}
		.dog{
			width: 300px;
			height:400px;
			position: relative;
		}
		.center{
			position:absolute;
			left: 50%;
			transform: translate(-50%,0);
			z-index: 1;
		}
		.forehead{
			width: 102px;
			height: 48px;
			background: var(--bg);
			/*margin-left:-51px;*/
			border-radius: 51px/40px 40px 8px 8px; 
		}
		.face{
			width: 110px;
			height:68px;
			top: 20px;
			background: var(--bg);
			border-radius: 50px; 
		}
		.chin{
			width: 104px;
			height:36px;
			top: 60px;			
			background: var(--bg);
			border-radius:52px/0 0 36px 36px;
		}
		.ear{
			width: 16px;
			height:70px;
			background: var(--hl);
			border-radius:50%;
			position:absolute;
			left: 50%;
			top: 34px;
			transform: translate(-42px,0) rotate(10deg);
			transform-origin: 50% 0;
			z-index: 0;
			animation:rotate var(--t) ease-out infinite;
		}
		.ear.right{
			transform:scale(-1,1) translate(-26px,0) rotate(10deg);
			animation:rotate-r var(--t) ease-out infinite;
		}
		.eye{
			width: 24px;
			height:24px;
			background: var(--bg);
			border-radius:12px/13px 12px 12px 0;
			position:absolute;
			z-index:2;
			left: 50%;
			top:20px;
			transform: translate(-40px,0) rotate(10deg);
			transform-origin: 50% 0;
			box-shadow: 1px 0 0 0 #000 inset,-1px 0 5px 1px #ddd;
			z-index:2;
			overflow:hidden;
		}
		.eye.right{
			transform:scale(-1,1) translate(-17px,0) rotate(10deg);
			box-shadow: 1px 0 0 0 #000 inset;
		}
		.birthmark{
			width: 30px;
			height:36px;
			background: var(--hl);
			border-radius:15px/17px 23px 2px 13px;
			position:absolute;
			z-index:1;
			left: 50%;
			top: 10px;
			transform:translate(14px,0) rotate(-10deg);
		}
		.eye .eyeball{
			width: 26px;
			height:26px;
			background: #e79101;
			border-radius:50%;
			position:absolute;
			left: 3px;
			top: 1px;
			box-shadow:  0 0 8px 0 #000 inset;
			animation:translate var(--t) ease-out infinite;
		}
		.eyeball::before {
			width: 18px;
			height:18px;
			border-radius:50%;
			background:#000;
			position:absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			content: '';
		}
		.eyeball::after {
			width: 5px;
			height:5px;
			border-radius:50%;
			background:#fff;
			position:absolute;
			left: 7px;
			top: 9px;
			transform: translate(-50%,-50%);
			content: '';
		}
		.nose{
			width:62px;
			height: 32px;
			top: 42px;
			background:#363035;
			z-index:3;
			border-radius:50%/10px 10px 22px 22px;
		}
		.nose:before{
			content:'';
			width:60px;
			height:10px;
			position:absolute;
			left: 50%;
			top: 1px;
			transform: translate(-50%,0);
			border-radius:50%/8px 8px 2px 2px;
			background:linear-gradient(10deg,#fff 0%,#fff 8%,#b1aeb1 15%,#b1aeb1 50%,#544d53 100%);
		}
		.nostril{
			width:15px;
			height: 4px;
			top: 22px;
			background:linear-gradient(0deg,#363035 0%,#000 100%);
			z-index:2;
			border-radius:50%/10px 10px 22px 22px;
			position:absolute;
			left: 50%;
			transform: translate(-21px,0) rotate(30deg);
			animation:resizes var(--t) ease-out infinite;
		}
		.nostril.right{
			transform:scale(-1,1) translate(-7px,0) rotate(30deg);
		}
		.mouth{
			width:68px;
			height: 25px;
			top: 70px;
			background:#671316;
			z-index:2;
			border-radius:50%/0px 0px 27px 27px;
			box-shadow: 0 0 4px 0 #000 inset;
			animation:open var(--t) ease-out infinite;
		}
		.mouth:before{
			background: var(--bg);
			width: 68px;
			height: 8px;
			border-radius:50%/0 0 5px 5px;
			content: '';
			position:absolute;
			top: 0;
			left: 0;
			z-index:2;
		}
		.teen{
			width: 8px;
			height: 3px;
			background:#fff;
			border-radius:50%/0 0 0px 1px;
			position:absolute;
			top: 7px;
			left: 50%;
			transform:translate(-100%,0);
			z-index:1;
		}
		.teen.right{
			transform:scale(-1,1) translate(0,0);
			border-right: .5px solid #ddd;
			z-index:1;
		}
		.tongue{
			width:34px;
			height: 14px;
			top: 0px;
			background:#a2504f;
			z-index:0;
			border-radius:50%/0px 0px 7px 7px;
			box-shadow: 0 0 4px 0 #111 inset;
			animation:extend var(--t) ease-out infinite;
		}
		.body{
			width:66px;
			height:70px;			
			background:var(--bg);
			top: 89px;
			border-radius:50%;
		}
		.arm{
			width:26px;
			height:40px;			
			background:var(--bg);
			position:absolute;
			top: 5px;
			left: 50%;
			border-radius:50%/20px 0 0 20px;
			transform:translate(-43px,0) rotate(21deg);
		}
		.arm:before{
			content:'';
			width: 5px;
			height: 20px;
			border-radius:50%/10px 0 0 10px;
			right: 7px;
			top: 14px;
			position:absolute;
			transform:rotate(-5deg);
			box-shadow: -1px 0 0 0 rgba(200,200,200,.5)
		}
		.arm.right{
			transform: scale(-1,1) translate(-17px,0) rotate(21deg);
		}
		.leg{
			width:29px;
			height:50px;			
			background:linear-gradient(-90deg,#eee 0%,#fff 20%,#fff 100%);
			position:absolute;
			top: 40px;
			left: 50%;
			border-radius:50%/5px 5px 15px 45px;
			transform:translate(-33px,0);
		}
		.leg.right{
			transform: scale(-1,1) translate(-3px,0);
		}
		.foot{
			width: 29px;
			height: 15px;			
			background:linear-gradient(-120deg,#bbb 0%, #eee 20%,#fff 20%,#fff 100%);
			position:absolute;
			bottom: -29px;
			left: 2px;
			border-radius:50%/10px 10px 5px 5px;
		}
		.foot.right{
			transform: scale(-1,1) translate(-33px,0);
		}
		.belly{
			width: 60px;
			height: 36px;
			z-index: 2;
			background:linear-gradient(0deg,#ddd 0%,#fff 20%,#fff 100%);
			border-radius:50%/0px 0px 36px 36px;
			top: 34px;
		}
		@keyframes rotate{
			0%{transform: translate(-42px,0) rotate(10deg);}
			50%{transform: translate(-42px,0) rotate(30deg);}
			100%{transform: translate(-42px,0) rotate(10deg);}
		}
		@keyframes rotate-r{
			0%{transform:scale(-1,1) translate(-26px,0) rotate(10deg);}
			50%{transform:scale(-1,1) translate(-26px,0) rotate(30deg);}
			100%{transform:scale(-1,1) translate(-26px,0) rotate(10deg);}
		}
		@keyframes translate{
			0%{left: 3px;}
			50%{left: 6px;}
			100%{left: 3px;}
		}
		@keyframes resizes{
			0%{height: 4px;}
			50%{height: 3px;}
			100%{height: 4px;}
		}
		@keyframes extend{
			0%{height: 14px;}
			50%{height: 23px;}
			100%{height: 14px;}
		}
		@keyframes open{
			0%{height: 25px;border-radius:50%/0px 0px 27px 27px;}
			50%{height: 18px;border-radius:50%/0px 0px 20px 20px;}
			100%{height: 25px;border-radius:50%/0px 0px 27px 27px;}
		}
	</style>
</head>
<body>
	<div class="dog center">
		<div class="forehead center"></div>  <!-- 额头 -->
		<div class="face center"></div>	<!-- 	脸颊 -->
		<div class="chin center"></div>		<!-- 下巴 -->
		<div class="ear"></div>		<!-- 左耳朵 -->
		<div class="ear right"></div>	<!-- 右耳朵 -->
		<div class="birthmark"></div>
		<div class="eye">
			<div class="eyeball"></div>
		</div>   <!-- 左眼 -->
		<div class="eye right">
			<div class="eyeball right"></div>
		</div> <!-- 右眼 -->
		<div class="nose center">   <!-- 鼻子 -->
			<div class="nostril"></div> <!-- 左鼻孔 -->
			<div class="nostril right"></div><!-- 右鼻孔 -->
		</div>
		<div class="mouth center"><!-- 嘴巴 -->
			<div class="teen"></div><!-- 左牙齿 -->
			<div class="teen right"></div><!-- 右牙齿 -->
			<div class="tongue center"></div><!-- 舌头 -->
		</div>
		<div class="body center"><!-- 身体 -->
			<div class="arm"></div><!-- 左手臂 -->
			<div class="arm right"></div><!-- 右手臂 -->
			<div class="leg"></div><!-- 左脚 -->
			<div class="leg right"></div><!-- 右脚 -->
			<div class="foot"></div><!-- 左脚掌 -->
			<div class="foot right"></div><!-- 右脚掌 -->
			<div class="belly center"></div>
		</div>
	</div>
</body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 用hfss做微带贴片阵列天线的时候分析设置有问题
  • ¥50 我撰写的python爬虫爬不了 要爬的网址有反爬机制
  • ¥15 Centos / PETSc / PETGEM
  • ¥15 centos7.9 IPv6端口telnet和端口监控问题
  • ¥120 计算机网络的新校区组网设计
  • ¥20 完全没有学习过GAN，看了CSDN的一篇文章，里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 海浪数据 南海地区海况数据，波浪数据
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目，支持注册表等