HTML5+CSS3小实例：3D发光切换按钮效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公众号《编程乐学》- 小猫笑脸动画效果</title>
  
</head>

<body>
  
</body>

</html>

2.完成页面内容

  <div class="mao_box">
        <div class="mao">
            <div class="mao_head">
                <div class="huawen">
                    <div>
                        <!--头部花纹——左边橙色-->
                    </div>
                </div>
            </div>
            <div class="erduo">
                <div></div>
                <div></div>
            </div>
            <div class="yanjing">
                <div>
                    <div class="yanquan">
                        <div></div>
                    </div>
                    <div class="yanquan_hedding">

                    </div>
                    <div class="hong"></div>
                </div>
                <div class="yan_right">
                    <div class="yanquan">
                        <div></div>
                    </div>
                    <div class="yanquan_hedding">

                    </div>
                    <div class="hong"></div>
                </div>
                <div style="clear:both"></div>
            </div>
            <div class="face_huawen">
                <div class="face_huawen_huawen huawen_left">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>

                </div>
                <div class="face_huawen_huawen huawen_right">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>

                </div>
                <div style="clear:both"></div>
            </div>
            <div class="bizi">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="zuiba_box">
                <div class="zuiba">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>

3.完成css样式

这段代码是用CSS创建一个猫头鹰动画效果的样式表。代码中使用了一些关键的CSS属性和选择器来定义页面布局和元素样式。

首先，通过设置body元素的高度、对齐方式和背景颜色，创建了一个居中显示的页面布局。

接下来，定义了一个名为"mao_box"的类，用于设置猫头鹰的整体样式，包括相对定位和位置偏移。

然后，通过定义"mao"类来设置猫头鹰的宽度和居中显示。

"mao_head"类定义了猫头鹰头部的样式，包括背景颜色、边框样式和圆角效果。

"huawen"类用于设置猫头鹰头部花纹的样式，包括绝对定位和尺寸。

"erduo"类定义了猫头鹰的耳朵样式，包括宽度、高度、位置和圆角效果。

在"erduo"类中，通过选择子元素来分别定义左耳和右耳的样式，包括边框样式、背景颜色和旋转效果。

通过:hover伪类选择器来设置鼠标悬停时的耳朵样式，包括位置偏移、旋转角度和过渡效果。

接下来，定义了猫头鹰的眼睛样式，包括位置、尺寸和层级。

然后，通过定义"yanquan"类来设置眼睛的样式，包括边框样式和圆角效果。

最后，通过选择子元素来设置眼珠子的样式，包括尺寸、背景颜色和过渡效果。

  <style>
        body {
            height: 90vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0px;
            background: #F6F7A7;
        }

        .mao_box {
            position: relative;
            top: 50px;
            /*width:424px;*/
        }

        .mao {
            margin: 0 auto;
            width: 400px;
        }

        .mao_head {
            margin: 0 auto;
            width: 400px;
            height: 340px;
            background: #F6F7F2;
            position: relative;
            border-radius: 50% 50% 35% 35%;
            border: solid 2px #2e2e2e;
            overflow: hidden;
            z-index: 10;
        }

        .huawen {
            position: absolute;
            height: 160px;
            width: 180px;
        }

        .huawen>div:first-child {
            height: 160px;
            width: 90px;
            background: #F0AC6B;
        }

        /*耳朵*/
        .erduo {
            width: 374px;
            height: 120px;
            position: absolute;
            top: -6px;
            left: 50%;
            margin-left: -187px;
            border-radius: 0% 0% 0% 0%;
        }

        /*左耳*/
        .erduo>div:first-child {
            height: 200px;
            width: 160px;
            border: 2px solid #2e2e2e;
            background: #f3f3f3;
            transform: rotate(-15deg);
            -ms-transform: rotate(-15deg);
            -moz-transform: rotate(-15deg);
            -webkit-transform: rotate(-15deg);
            -o-transform: rotate(-15deg);
            border-radius: 4% 80% 0% 50%;
            position: absolute;
            left: -20px;
            top: 0px;
            transition: transform 1s, left 1s;
        }

        /*右耳*/
        .erduo>div:last-child {
            height: 180px;
            width: 160px;
            border: 2px solid #2e2e2e;
            background: #f3f3f3;        }

        /*鼠标浮动耳朵样式*/
        /*左耳*/
        .mao:hover .erduo>div:first-child {
            left: -10px;
            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;*/
            /*transition: transform 1s,left 1s;*/
        }

        .mao:hover .erduo>div:last-child {
            right: -10px;
            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: transform 1s,right 1s;*/
        }

        /*眼睛*/
        .yanjing {
            height: 60px;
            width: 300px;
            position: absolute;
            top: 200px;
            z-index: 20;
            left: 50%;
            margin-left: -150px;
            overflow: hidden;
        }

        /*左眼*/
        .yanquan {
            height: 100px;
            width: 100px;
            border: 2px solid #2e2e2e;
            border-radius: 50% 50% 50% 50%;
            overflow: hidden;
            position: absolute;
        }

        /*眼珠子 左*/
        .yanquan>div:first-child {
            height: 100px;
            width: 30px;
            background-color: #2e2e2e;
            margin-left: 35px;
            transition: all 1s;
   
        }

    </style>

五、项目总结

这个项目主要是通过HTML和CSS来实现动态小猫的效果。首先，使用HTML标签来搭建页面结构，包括小猫的头部、耳朵和眼睛等。然后，通过CSS来设置样式和动画效果，包括小猫的颜色、形状、位置和动作等。

在CSS中，使用了一些关键的属性和选择器来实现动态效果。通过设置元素的定位、大小、边框、背景等属性，可以实现小猫的外观效果。同时，通过使用过渡效果和动画效果，可以实现小猫的动态效果，如耳朵的浮动和眼珠子的移动。

六、源码获取

✨还可以关注宫纵号《编程乐学》，菜单栏有很多优质的开源项目以及更多的编程资料等你来学习。

原文地址:https://blog.csdn.net/qq_29823791/article/details/135069401 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1736998815317233664.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部