会动的小狗纯HTML代码

最新推荐文章于 2021-06-03 04:54:18 发布

Yqi9979

最新推荐文章于 2021-06-03 04:54:18 发布

阅读量2.6k

点赞数 1

文章标签：小狗纯html Web基础小狗动画代码

本文链接：https://blog.csdn.net/qq_41418149/article/details/103070351

版权

Web基础篇

HTML-04狗子

要求：眼睛，舌头，尾巴可动

此页面重点知识：
一、子盒子在父盒子中绝对居中：
margin:auto;left:0;right:0;top:0;bottom:0;
第一步：给父级盒子设置相对定位；
第二部：给子级盒子设置绝对定位；
注意：定位的时候除了这种情况，左右不能同时设置，上下也不能同时设置；
二、盒子的层级关系：
z-index
1）默认后写的标签层级要比先写的层级高
2) 子盒子默认要比父盒子层级高；
3) z-index 的值越大层级越高，如果两个值相对，通过先后顺序比较；
三、阴影：
box-shadow:水平距离(必须) 垂直距离(必须) 模糊距离(可选) 阴影尺寸(可选) 阴影颜色(可选) inset(outset默认值)可选，内阴影或外阴影
设置多个阴影：用逗号隔开，如：
box-shadow:10px 10px blue,-10px -10px red;
四、渐变：
线性渐变：linear-gradient();径向渐变：radidl-gradient();

 默认渐变从上到下：  background:linear-gradient(red,blue); 
 向右渐变：  background:linear-gradient(to right,red,blue);  
 0-50% 纯红色，从50%到100%是红到蓝的渐变： background:linear-gradient(red 50%,blue);  // 0-50% 纯红色，从50%到100%是红到蓝的渐变
 0-50%纯红色，从50%到80%是红到蓝的渐变，从80%到100%是纯蓝色  background:linear-gradient(red 50%,blue 80%);

<style>
.head{
    width:224px;
    height:200px;
    margin:100px auto 0 auto;
    /* background-color:#12a4d3; */
    /* background:linear-gradient(-135deg,#ffffff,#12a4d3 25%); */
    background:radial-gradient(closest-side at 88% 12%,#fff,#12a4d3);
    border:2px solid #365162;
    border-radius:50%;
    position:relative;
    box-shadow:-5px 5px 10px #9ba09c;
}
.face{
    width:185px;
    height:135px;
    border:2px solid black;
    background-color:white;
    border-radius:50%;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:50px;
}
.eye{
    width:50px;
    height:58px;
    border:2px solid black;
    background-color:white;
    border-radius:23px;
    position:absolute;
    top:-30px;
    z-index:2;
}
.eyeLeft{
    left:40px;
}
.eyeRight{
    right:40px;
}
.eyeDot{
    width:10px;
    height:10px;
    background-color:black;
    border-radius:50%;
    position:absolute;
    top:28px;
}
.eyeDotLeft{
    right:6px;
}
.eyeDotRight{
    left:6px;
}
.nose{
    width:20px;
    height:20px;
    border:1px solid black;
    background-color:#c13905;
    border-radius:8px;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:22px;
    z-index:1;
}
.noseShadow{
    width:0;
    height:0;
    box-shadow:0 0 3px 3px white;
    position:absolute;
    right:5px;
    top:8px;
}
.nostrils{
    width:2px;
    height:68px;
    background-color:black;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:44px;
    z-index:1;
}
.mouth{
    width:130px;
    height:100px;
    border-bottom:2px solid black;
    border-radius:50%;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:12px;
}
.mouthSquare{
    width:130px;
    height:50px;
    background-color:white;
    position: absolute;
    margin:auto;
    left:0;
    right:0;
    top:40px;
}
.beard{
    width:160px;
    height:2px;
    background-color:black;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:66px;
}
.beard02{
    transform:rotate(15deg);
}
.beard03{
    transform:rotate(-15deg);
}
.beardSquare{
    width:76px;
    height:25px;
    background-color:#ffffff;
    position:absolute;
    margin:auto;
    left:0;
    right:0;
    top:54px;
}
</style>
<body>
    <div class="box">
        <div class="ear earLeft"></div>
        <div class="ear earRight"></div>
        <div class="body">
            <div class="eye eyeLeft"></div>
            <div class="eye eyeRight"></div>
            <div class="face">
                <div class="forehead"></div>
                <div class="mouth">
                    <div class="tongue"></div>
                </div>
                <div class="beard"></div>
            </div>
            <div class="tie">
                <div class="dot dot01"></div>
                <div class="dot dot02"></div>
                <div class="dot dot03"></div>
                <div class="dot dot04"></div>
                <div class="dot dot05"></div>
                <div class="dot dot06"></div>
                <div class="bell"></div>
                <div class="string"></div>
            </div>
            <div class="tripe"></div>
            <div class="frontClaw frontClawLeft"></div>
            <div class="frontClaw frontClawRight"></div>
        </div>
        <div class="backLog"></div>
        <div class="backClaw"></div>
        <div class="tail"></div>
    </div>
</body>
</html>

Yqi9979

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
会动的小狗纯HTML代码

Web基础篇狗子要求：眼睛，舌头，尾巴可动此页面重点知识：一、子盒子在父盒子中绝对居中：margin:auto;left:0;right:0;top:0;bottom:0;第一步：给父级盒子设置相对定位；第二部：给子级盒子设置绝对定位；注意：定位的时候除了这种情况，左右不能同时设置，上下也不能同时设置；二、盒子的层级关系：z-index1）默认后写的标签层级要比先写的层级高...
复制链接

扫一扫