动画的调用方式、图片加阴影的设定、半圆角的设定、父相子绝的示例

最新推荐文章于 2024-09-21 20:10:00 发布

琴～～

最新推荐文章于 2024-09-21 20:10:00 发布

阅读量126

点赞数

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/yangyanqin2545/article/details/109273640

版权

一、动画的调用：

调用动画用animition
格式 animition : 动话的名字动画的持续时间动画类型 infinite;
```
animation:rt 3s linear infinite;
```

其中linear是匀速；

infinite无线循环；

s是秒的意思；

例1 太极运动示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .waikuang {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
            border-radius: 50%;
            overflow: hidden;
            margin-right: auto;
            margin-left: auto;
            margin-top: 100px;
            animation: rt 2s linear infinite;
        }
        .zuobian {
            width: 150px;
            height: 300px;
            background: white;
            float: left;
        }
        .youbian {
            width: 150px;
            height: 300px;
            background: black;
            float: left;
        }
        .shangmianyuan {
            width: 150px;
            height: 150px;
            background-color: white;
            position: absolute;
            top: 0px;
            left: 50%;
            margin-left: -75px;
            border-radius: 50%;
        }
        .xiamianyuan {
            width: 150px;
            height: 150px;
            background-color: black;
            position: absolute;
            bottom: 0px;
            left: 50%;
            margin-left: -75px;
            border-radius: 50%;
        }
        .smallshangmianyuan {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 55px;
            left: 50%;
            margin-left: -20px;
            background-color: black;
            border-radius: 50%;
        }
        .smallxiamianyuan {
            width: 40px;
            height: 40px;
            position: absolute;
            bottom: 55px;
            left: 50%;
            margin-left: -20px;
            background-color: white;
            border-radius: 50%;
        }
        @keyframes rt {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="waikuang">
        <div class="zuobian"></div>
        <div class="youbian"></div>
        <div class="shangmianyuan"></div>
        <div class="xiamianyuan"></div>
        <div class="smallshangmianyuan"></div>
        <div class="smallxiamianyuan"></div>
    </div>
</body>
</html>

二、position父相子绝

父类相对定位；

子类绝对定位；

（父元素是绝对定位也是可以的）；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color:lightblue;
        }
        .waikuang{
            width:200px;
            height:200px;
            border-radius:50%;
            float:hidden;
            background-color: white;
            float:hidden;
            margin-top:200px;
            /* 左右居中的设置 */
            margin-left:auto;
            margin-right:auto;
            /* 相对定位----参照物 */
            position:relative;
        }
        .box{
            width:68px;
            height:68px;
            /* 绝对定位---要移动的元素 */
            position:absolute;
            top:50%;
            margin-top:-34px;
            left:50%;
            margin-left:-34px;
            /* 调动动画 */
            animation:tiaodong 1s linear infinite;

        }
        .zhengfangxing{
            width:68px;
            height:68px;
            /* 相对定位 */
            position:relative;
            margin-top:-14px;
            transform:rotate(-45deg);
         }
         .zhengfangxing1{
             width:45px;
             height:45px;
             background-color:red;
             position:absolute;
             left:0px;
             bottom:0px;
              
         }
         .zhengfangxing2{
            width:45px;
            height:45px;
            background-color:red;
            position:absolute;
            left:0px;
            top:0px;
            border-radius:50%;
            overflow:hidden;

         }
         .zhengfangxing3{
            width:45px;
            height:45px;
            background-color:red;
            position:absolute;
            right:0px;
            bottom:0px;
            border-radius:50%;
            overflow:hidden;
            }
            @keyframes tiaodong{
                0%{
                    transform:scale(1);
                }
                50%{
                    transform:scale(1.2);
                }
                100%{
                    transform:scale(1);
                }
            }

    </style>
</head>
<body>
    <div class="waikuang">
    <div class="box">
     <div class="zhengfangxing">
         <div class="zhengfangxing1"></div>
         <div class="zhengfangxing2"></div>
         <div class="zhengfangxing3"></div>
     </div>
     </div>
</div>
</body>
</html>

三、图片加阴影

投影: 阴影水平位置阴影的垂直位置阴影的模糊值阴影的颜色内阴影；

加inset是内阴影，不加就是外阴影；

代码演示：

box-shadow: -20px -15px 0 #e3d275 inset;

四、圆的设置方法

border-radius:50%;

五、已知宽高的定位元素居中

left:50%;

top:50%;

margin-top:负盒子高度的一半；

margin-left:负盒子宽度的一半；

六、半圆的设定

四个值：左上角右上角右下角左下角 ——顺时针

border-radius:0 0 102px 102px;

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .face {
            width: 300px;
            height: 300px;
            background-color: #efdd7b;
            border-radius: 50%;
            position: relative;
            /* 投影: 阴影水平位置 阴影的垂直位置 阴影的模糊值  阴影的颜色 内阴影*/
            /* 加inset是内阴影，不加就是外阴影 */
            box-shadow: -20px -15px 0 #e3d275 inset;
            float:left;
            margin-left:20px;
        }
        .eyes01 {
            width: 33px;
            height: 33px;
            background-color: #8f5a24;
            position: absolute;
            left: 48px;
            top: 96px;
            border-radius: 50%;
        }
        .eyes02 {
            width: 33px;
            height: 33px;
            background-color: #8f5a24;
            position: absolute;
            right: 48px;
            top: 96px;
            border-radius: 50%;
        }
        .mouthbox {
            width: 206px;
            height: 102px;
            background-color:#8f5a24;
            position: absolute;
            left: 50%;
            margin-left: -103px;
            bottom:34px;
            border-radius: 0 0 103px 103px;
            overflow:hidden;
            border-top:9px white solid;
        }
        .toug{
            width:100px;
            height:100px;
            position:absolute;
            left:50px;
            top:44px;
            background-color:#ceab45;
            border-radius:50px 50px   0px 0px;;
            overflow:hidden;
        }
</style>
</head>
<body>
    <div class="face">
        <div class="eyes01"></div>
        <div class="eyes02"></div>
         <div class="mouthbox">
             <div class="toug"></div>
             </div>
    </div>
     
</body>
</html>