css制作哆啦a梦_css哆啦a梦-优快云博客

本文链接：https://blog.youkuaiyun.com/ssh6666/article/details/104980026

这篇博客详细介绍了如何利用CSS3技术来制作哆啦A梦的眼睛动画效果，提供了一种创新的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css制作哆啦a梦

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .doraemon{
   
            position: relative;
            margin: 20px 300px auto;
        }
		/* 头部 */
        .doraemon .head{
   
            width: 320px;
            height: 300px;
            border-radius: 150px;
            background: #07bbee;
            border: #555 2px solid;
            box-shadow: -7px 10px 15px rgba(0,0,0,0.45);
            position: relative;
        }
        .doraemon .face{
   
            position: relative;
            z-index: 2;
        }
        .doraemon .face .white{
   
            border: #000 2px solid;
            width: 265px;
            height: 195px;
            border-radius: 150px 150px;
            position: absolute;
            top: 75px;
            left: 25px;
            background: #fff;
           
        }
        .doraemon .face .nose{
   
            background: #C93300;
            width: 30px;
            height: 30px;
            border: 2px solid #000;
            border-radius: 30px;
            position: absolute;
            top: 110px;
            left: 140px;
            z-index: 3;
        }
        .doraemon .face .nose .light{
   
            border-radius: 5px;
            box-shadow: 19px 8px 5px #FFF;
            height: 10px;
            width: 10px;
        }
        .doraemon .face .nose_line{
   
            background: #333;
            width: 3px;
            height: 100px;
            top: 143px;
            left: 155px;
            position: absolute;
            z-index: 3;
        }
        .doraemon .face .mouth{
   
            width: 220px;
            height: 400px;
            border-bottom: 3px solid #333;
            border-radius: 120px;
            position: absolute;
            top: -160px;
            left: 45px;
        }
        .doraemon .eyes{
   
            position: relative;
            z-index: 3;
        }
        .doraemon .eyes .eye{
   
            position: absolute;
            top: 40px;
            width: 72px;
            height: 82px;
            background: #fff;
            border: 2px solid #000;
            border-radius: 35px 35px;
        }
        .doraemon .