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

发布时间:2023年12月18日

目录

?一、运行效果

图片效果

二、项目概述

三、开发环境

四、实现步骤及代码

1.创建空文件夹

2.完成页面内容

3.完成css样式

五、项目总结? ?

六、源码获取


?一、运行效果

图片效果

二、项目概述

????????该项目是一个基于HTML和CSS的动态小猫动画。通过使用CSS样式和动画效果,实现了一个可爱小猫的动态效果,包括耳朵的浮动、眼珠子的移动等。


三、开发环境

开发环境:VsCode
编程语言:HTML5+CSS3
操作系统:Windows


四、实现步骤及代码

1.创建空文件夹

<!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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。