纯css小猫

最新推荐文章于 2023-03-26 14:35:36 发布
最新推荐文章于 2023-03-26 14:35:36 发布
阅读量1.2k 收藏 3
点赞数 1
分类专栏： 前端笔记 css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32584661/article/details/55260288
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css小猫</title>

    <style>

        *{padding:0;margin: 0;}
        li{list-style:none;}

        body{background:#f6f7f2;}
        .box{width:700px;height:500px;margin:100px auto;border:1px solid #8d8d8d;background:#ffffff;position: relative;}



        .ears{margin:60px 0 0 120px;z-index:0;position: relative; width:440px;height: 200px;}
        .ear{width: 160px;height: 200px;border: 2px solid #000;
            background: #f3f3f3;position: absolute;}
        .ear_l{border-radius: 4% 80% 0% 50%;left:0;top: 0;
            transform: rotate(-15deg);
            -ms-transform: rotate(-15deg);
            -moz-transform: rotate(-15deg);
            -webkit-transform: rotate(-15deg);
            -o-transform: rotate(-15deg);transition: all 1s;}
        .ear_r{border-radius: 80% 4% 50% 0%;right:0;top: 0;
            transform: rotate(15deg);
            -ms-transform: rotate(15deg);
            -moz-transform: rotate(15deg);
            -webkit-transform: rotate(15deg);
            -o-transform: rotate(15deg);transition: all 1s;}


        .face{width:400px;height: 340px;border-radius: 50% 50% 35% 35%;position: absolute;left:136px;top:84px;
            border: 2px solid #000;background: #f3f3f3; z-index:10;}

        .facebox{width:400px;height:340px;border-radius: 50% 50% 35% 35%;position: relative;overflow: hidden;}

        .hairs{width:180px;height:160px;border-radius:0 0 50% 50%;overflow: hidden;position: absolute;left:111px;top:-2px; background: #8d8d8d;}
        .hair{width:90px;height:160px;background: #f0ac6b;}


        .eye-wrap{width:300px;height:70px;
            position: absolute;top:200px;left: 50%;
            margin-left:-150px;overflow:hidden;}

        .eye{height:104px;width:104px;position:absolute;}
        .eye_l{left:0;top:0;}
        .eye_r{right:0;top:0;}

        .eye-circle{width:100px;height: 100px;overflow: hidden;
            border: 2px solid #000;border-radius:50%;position:absolute;left:0;top:0;}
        .eye-core{height:100px;width:30px;background:#000;
            position:absolute;left:50%;top:0;margin-left: -15px;transition: all 1s;}
        .eye-bottom{height:50px;width:160px;border-radius:50%;background: #f6f7f2;border-top:2px solid #000;
            position:absolute;bottom:16px;transition: all 1s;}
        .eye_l .eye-bottom{left:-30px;}
        .eye_r .eye-bottom{right:-30px;}

        .eye-red{width:66px;height:24px;
            position: absolute;top:44px;left: 18px;
            border-radius:50% 50% 50% 50%;
            background: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);
            background: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);
            background: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);
            opacity:0;
            transition: all 0.1s ease-in 0.2s;}

        .nose{width:30px;height:10px;
            border-bottom: 8px solid #000;border-radius:0% 0% 50% 50%;
            position: absolute;top:250px;left:50%;margin-left: -15px;z-index:15;}

        .mouth-wrap{width:100px;height:20px;position:absolute;top:268px;left:50%;
            margin-left:-50px;overflow: hidden;}
        .mouth{width:50px;height:40px;}
        .mouth-wrap .left{border-bottom:4px solid #000;border-right: 4px solid #000;
            border-radius: 0% 40% 50% 20%;position: absolute;left: 0;bottom:0;}
        .mouth-wrap .right{border-bottom: 4px solid #000;border-left: 4px solid #000;
            border-radius: 40% 0% 20% 50%;position: absolute;right: 0;bottom:0;}


        .mustache-wrap{ height:80px;width: 380px;
            position:absolute;top:190px;left:50%;
            z-index:20;margin-left: -190px;}

        .mustache > div:first-child{
            width:30px;height: 10px;
            border-top:6px #E53941 solid;
            border-radius:30% 50% 20% 50%;
            transform: rotate(25deg);
            -ms-transform: rotate(25deg);
            -moz-transform: rotate(25deg);
            -webkit-transform: rotate(25deg);
            -o-transform: rotate(25deg);margin-left: 20px;}
        .mustache > div:nth-child(2) {
            width: 20px;
            height: 6px;
            background-color: #E53941;
            border-radius: 50% 50% 50% 50%;
            transform: rotate(25deg);
            -ms-transform: rotate(25deg);
            -moz-transform: rotate(25deg);
            -webkit-transform: rotate(25deg);
            -o-transform: rotate(25deg);
            margin-left: 20px;
        }
        .mustache > div:nth-child(3) {

            width: 32px;
            height: 10px;
            border-bottom: 4px #E53941 solid;
            border-radius: 30% 0% 50% 30%;
            transform: rotate(25deg);
            -ms-transform: rotate(25deg);
            -moz-transform: rotate(25deg);
            -webkit-transform: rotate(25deg);
            -o-transform: rotate(25deg);
            margin-left: 8px;
        }
        .mustache > div:nth-child(4) {
            margin-top: 20px;
            width: 26px;
            height: 20px;
            border-bottom: 4px #E53941 solid;
            border-radius: 30% 0% 50% 30%;
            transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -moz-transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            -o-transform: rotate(30deg);
            margin-left: 28px;
        }
        .mustache > div:last-child {
            width: 22px;
            height: 10px;
            border-bottom: 3px #E53941 solid;
            border-radius: 0% 0% 50% 50%;
            transform: rotate(-15deg);
            -ms-transform: rotate(-15deg);
            -moz-transform: rotate(-15deg);
            -webkit-transform: rotate(-15deg);
            -o-transform: rotate(-15deg);
            margin-left: 40px;
            margin-top: -8px;
        }
        .mustache-wrap .right {
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            margin-top: -85px;
        }

        .box:hover .ear_l{
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            border-radius: 4% 80% 0% 60%;
            transition: all 1s;
        }
        .box:hover .ear_r{
            transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            border-radius: 80% 4% 60% 0%;
            transition: all 1s;
        }

        .box:hover .eye-bottom {
            bottom:16px;
            transition: all 1s;
        }
        .box:hover .eye-core {
            width:40px;margin-left: -20px;
            transition: all 1s;
        }
        .box:hover .eye-red{
            opacity: 1;
            transition: all 1s;
        }
        .box:hover .mouth {
            border-radius: 50%;
            transition: all 1s;
        }

    </style>

</head>
<body>


<div class="box">

    <ul class="ears">
        <li class="ear ear_l"></li>
        <li class="ear ear_r"></li>
    </ul>

    <div class="face">

        <div class="facebox">

            <ul class="hairs">
                <li class="hair"></li>
            </ul>

            <div class="eye-wrap">
                <div class="eye eye_l">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="eye-red"></div>
                </div>
                <div class="eye eye_r">
                    <div class="eye-circle">
                        <div class="eye-core"></div>
                    </div>
                    <div class="eye-bottom"></div>
                    <div class="eye-red"></div>
                </div>
            </div>

            <div class="nose"></div>

            <div class="mouth-wrap">
                <div class="mouth left"></div>
                <div class="mouth right"></div>
            </div>

            <div class="mustache-wrap">
                <div class="mustache left">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="mustache right">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>

        </div>

    </div>

</div>


</body>
</html>

注意事项：当将style中的css样式分离到css文件中后，每次刷新页面会出现动画（元素转为设置状态的动画=》不需要）

这里写图片描述

这里写图片描述

酷jjs
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css画龙猫
Waterme_lon的博客
05-27 2976
HTML代码部分： Document <div id="baymax"> <!-- 定义头部 眼睛嘴巴 --> <div id="head"> <div id="div1"></div> <div id="div2"></div> <div id="div4"></di...
HTML5+CSS期末大作业：宠物网站设计——宠物猫(10页) DIV+CSS宠物网页设计代码
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
11-17 7503
HTML5期末大作业：宠物网站设计——宠物猫(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网
用CSS3画了一只猫
weixin_43951592的博客
03-26 2164
CSS3画了只猫
html5用圆圈画猫,css画一只猫.html
weixin_29098117的博客
06-01 442
Title.container{}.face,.ear {position: absolute;width: 400px;height: 360px;left: 50%;top: 50%;margin-left: -200px;margin-top: -180px;}.face{border: 2px solid #000;z-index: 10;border-radius: 50% 50% 34...
可爱极了，用 CSS 实现一个超可爱的猫咪！
祈澈菇凉
01-09 836
介绍本期我们通过vite+scss去完成一个橘猫心情变化的创意动画，这里的逻辑我们将不使用任何js代码，仅依靠css来完成，所以，通过本期的动画，你可以到一些css动画和绘制的一些技巧。正...
纯css画猫
【03】的博客
02-10 277
核心：定位，伪类，圆角，过渡，阴影 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>cat</title> <style type="text/css"> *{margin:0;padding:0;} #cat{width: 500px;height: 500px;margin:50px auto;position: relative;}..
纯CSS3绘制的小猫笑脸动画
08-29
"纯CSS3绘制的小猫笑脸动画"是一个利用CSS3特性来创建的交互式图形实例，它展示了CSS3在动态效果和图形设计方面的潜力。 首先，这个小猫笑脸动画的核心是CSS3的`@keyframes`规则，它允许我们定义一个动画的过程，从...
纯css3小猫摆钟动画特效.rar
最新发布
11-17
在本资源"纯css3小猫摆钟动画特效.rar"中，我们主要探讨的是如何使用纯CSS3技术来实现一个动态的小猫摆钟动画效果。这个项目包含两个关键文件：`style.css`和`index.html`。让我们逐一解析这两个文件及其相关知识点...
纯CSS3眼睛随鼠标移动小猫特效特效代码
03-20
【纯CSS3眼睛随鼠标移动小猫特效特效代码】是一个基于现代CSS3技术实现的趣味互动效果，旨在为网页增添一种生动的用户体验。这个特效主要由一个卡通小猫的形象和一双能够跟随用户鼠标移动的眼睛组成，它巧妙地利用了...
纯CSS3制作鼠标控制小猫笑脸动画特效代码
03-20
【纯CSS3制作鼠标控制小猫笑脸动画特效代码】是一个利用CSS3的强大功能来实现的交互式动画设计。CSS3是层叠样式表的第三版，它为网页设计师提供了更丰富的选择器、过渡效果、动画以及更精细的布局控制，从而能够创建...
使用CSS3代码绘制可爱的Hello Kitty猫
12-29
感觉这个 Hello Kitty 画的还不错，心血来潮也用 CSS3 画了个 Hello Kitty，现在在这里记录一下详细的绘制过程。想要源码、素材、在线演示的同学可以直接拉到最下面。我们先看下原图： 结构分解 从上图可以看出，Hello Kitty 由脸蛋、耳朵、红色蝴蝶结、眼睛、鼻子和六根胡须构成，所以 DOM 结构也相对简单： CSS Code复制内容到剪贴板 <div u00a0class=hello-kitty-div>        <!– 脸蛋 –>        <div u00a0class=face></div>        <!– 左耳 –>  
CSS3猫咪睡觉动画代码.zip
05-27
CSS3猫咪睡觉动画代码，猫咪在桌上睡觉动画。
html+css+js高仿汤姆猫
12-15
个人仿写的小游戏汤姆猫资源包括完整的HTML css js 代码和图片字体等资源，适合新手查看和仿写练习。由于自己仿写可能不够完美，所有的人问题请及时联系我也可以向我提建议。
CSS3-Tom猫动画
06-12
h5的CSS3做的tom的部分动画，请使用google浏览器或safari浏览器，不支持其他浏览器！
纯CSS3制作鼠标控制小猫笑脸动画.zip
11-25
在本项目中，“纯CSS3制作鼠标控制小猫笑脸动画.zip”是一个压缩包，其中包含了一个使用纯CSS3技术实现的交互式动画。这个动画的特点是通过鼠标的移动来控制小猫笑脸的变化，展示了CSS3的强大功能和灵活性。以下是...
使用CSS3画出一个叮当猫（超级可爱！）
LisenYang的专栏
08-21 4497
使用CSS3画出一个叮当猫（超级可爱！）
纯CSS实现猫咪
臧小川的博客
01-10 232
效果图 index import React from 'react' import styles from './style.less' const index = () => { return ( <div> <div className={styles.container} > <div className={styles.wrapper}>
纯CSS机器猫
Susanny339的博客
10-21 1516
基于网上各路大神所做的css机器猫的各种基础数据（各部位大小和颜色），自己也做了一个机器猫。这里做个总结和记录，以供参考。
css3 画动态微笑猫的最佳实践
Ying的博客
01-10 670
由于平时工作并不经常使用css,再加上很少接触css3，导致css会有一些生疏。前些天在网上看到有人使用css3画了一只动态的猫，所以自己也想尝试一下，其实很简单，但是可以熟练一下css的布局，也给繁忙的工作增加一点小乐趣。 这是我们这次要实现的效果 访问地址smile cat html lang="en"> head> meta charset="UTF-8"
纯css gallery
07-24
纯 CSS Gallery 是一种使用纯 CSS 技术实现的图库。这种图库通常用于展示图片集合或作为网页的页面背景，而不需要任何 JavaScript 或其他脚本语言的支持。 纯 CSS Gallery 的实现原理通常是使用 CSS3 的一些功能和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值