从0开始学web-day16

1.复习
从0开始学web-day16
2.扇形

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            width: 20px;
            height: 200px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            /* 水平垂直居中 */
            transform: translate(-50%, -50%);
           
        }
        li {
            width: 20px;
            height: 200px;
            list-style: none;
            position: absolute;
             /* 更换旋转基点 水平为center 垂直为180 */
            transform-origin: center 180px;
            transition: 1s;
        }
        li:nth-child(1) {
            background: cornflowerblue;
        }
        li:nth-child(2) {
            background: cornflowerblue;
        }
        li:nth-child(3) {
            background: cornflowerblue;
        }
        li:nth-child(4) {
            background: cornflowerblue;
        }
        li:nth-child(5) {
            background: cornflowerblue;
        }
        li:nth-child(6) {
            background: cornflowerblue;
        }
        li:nth-child(7) {
            background: cornflowerblue;
        }
        li:nth-child(8) {
            background: cornflowerblue;
        }
        li:nth-child(9) {
           background: cornflowerblue;
        }
        li:nth-child(10) {
            background: cornflowerblue;
        }
        li:nth-child(11) {
            background: rgb(2, 30, 82);
        }
        li:nth-child(12) {
            background: rgb(2, 30, 82);
        }
        li:nth-child(13) {
            background: cornflowerblue;
        }
        ul:hover li:nth-child(1){
            transform: rotate(15deg);
        }
        ul:hover li:nth-child(2){
            transform: rotate(-15deg);
        }
        ul:hover li:nth-child(3){
            transform: rotate(30deg);
        }
        ul:hover li:nth-child(4){
            transform: rotate(-30deg);
        }
        ul:hover li:nth-child(5){
            transform: rotate(45deg);
        }
        ul:hover li:nth-child(6){
            transform: rotate(-45deg);
        }
        ul:hover li:nth-child(7){
            transform: rotate(60deg);
        }
        ul:hover li:nth-child(8){
            transform: rotate(-60deg);
        }
        ul:hover li:nth-child(9){
            transform: rotate(75deg);
        }
        ul:hover li:nth-child(10){
            transform: rotate(-75deg);
        }
        ul:hover li:nth-child(11){
            transform: rotate(90deg);
        }
        ul:hover li:nth-child(12){
            transform: rotate(-90deg);
        }
        p {
            width: 10px;
            height: 10px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            left: 5px;
            bottom: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <p></p>
    </ul>
</body>
</html>

3.步骤

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
            background: red;
            margin: 0 auto;
            border-radius: 50%;
            position: relative;
        }
        p {
            width: 200px;
            height: 200px;
            background: cyan;
            border-radius: 50%;
            transition: transform 1s, left 1s 1s;
            /* 定位 */
            position: absolute;
            left: 0;
        }
        div:hover p {
            /* transform: scale(0.5) translateX(-100px); */
            
            /* 缩放 */
            transform: scale(0.5);
            /* 偏移 */
            left: -200px;
        }
    </style>
</head>
<body>
    <!-- 

     -->
     <div>
         <p></p>
     </div>
</body>
</html>

4.关键帧动画

关键帧动画
        创建关键帧动画
        @keyframes 动画名称{
            from {初始状态}
            to {结束状态}
        }
        @keyframes 动画名称{
            0% {初始状态} 可以省略
            20% {状态1}
            。
            。
            。
            100% {状态n}
        }
        引用关键帧动画 animation 值至少有两个 动画的名称 动画的执行时间
        1动画名称 创建动画时起的名字
        2动画执行时间 动画从初始状态到最终状态所用时间
        3动画的执行次数 阿拉伯数字 infinite(无限次循环)
        4运动形式 ease默认 ease-in ease-out ease-in-out linear steps()
        5动画的延迟时间
        6动画下一个周期如何执行 alternate反向 alternate-reverse一开始反向
        7动画执行完成后保留的状态 默认恢复到初始状态 forwards保留在最终状态
        8动画是否运动 默认running paused暂停
animation是一个复合属性

5.分阶段创建关键帧

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            background: crimson;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            animation: play 3s linear infinite;
        }
        /* 分阶段创建关键帧动画 */
        @keyframes play {
            0% {background: red;}
            25% {background: red;}
            26% {background: yellowgreen;}
            50% {background: yellowgreen;}
            51% {background: green;}
            100% {background: green;}
        }
    </style>
</head>
<body>
    <!-- 

     -->
     <div></div>
</body>
</html>

6.模拟轮播图

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 500px;
            height: 400px;
            border: 5px solid #000;
            margin: 0 auto;
            /* 溢出隐藏 */
            overflow: hidden;
        }
        nav {
            width: 2500px;
            height: 400px;
            background: red;
            animation: play 5s infinite linear;
        }
        p {
            width: 500px;
            height: 400px;
            float: left;
            text-align: center;
            line-height: 400px;
            font-size: 100px;

        }
        p:nth-child(1) {
            background: darkblue;
        }
        p:nth-child(2) {
            background: darkgray;
        }
        p:nth-child(3) {
            background: yellow;   
        }
        p:nth-child(4) {
            background: violet;
        }
        p:nth-child(5) {
            background: turquoise;
        }
        @keyframes play {
            0% {margin-left: 0;}
            10% {margin-left: 0;}
            20% {margin-left: -500px;}
            30% {margin-left: -500px;}
            40% {margin-left: -1000px;}
            60% {margin-left: -1000px;}
            70% {margin-left: -1500px;}
            80% {margin-left: -1500px;}
            90% {margin-left: -2000px;}
            95% {margin-left: -2000px;}
            100% {margin-left: 0;}
        }
    </style>
</head>
<body>
    <div>
        <nav>
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
        </nav>
    </div>
</body>
</html>

7.弹性父元素

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            background: red;
            display: flex;
            width: 600px;
            height: 600px;
            flex-direction: column;
            justify-content: space-around;
        }
        li {
            list-style: none;
            width: 100px;
            height: 100px;
            background: yellowgreen;
        }
        /* 水平垂直居中 */
        div {
            width: 300px;
            height: 200px;
            background: yellowgreen;
            display: flex;
            /* 主轴居中 */
            justify-content: center;
            /* 侧轴居中 */
            align-items: center;
        }
        p {
            background: violet;
        }
    </style>
</head>
<body>
    <!-- 
        弹性父元素
        1.设置为弹性盒 display:flex/inline-flex
        2.设置弹性子元素的排列方式flex-direction 默认自左向右排列 column是自上而下 row-reverse 自左向右翻转 column-reverse自上而下翻转
        3.是否允许弹性子元素换行显示 flex-wrap:nowrap 不允许(如果一排放不下也不会换行显示) wrap允许 wrap-reverse换行翻转
        4.排列方式和是否允许换行的缩写 flex--flow
        5.弹性子元素行的对齐方式 align-content(必须存在flex-wrap)flex-start flex-end center space-around中间是两端的倍数 space-between两端 space-evenly平均分配
        6.弹性子元素的对齐方式 主轴 justify-content  flex-start flex-end center space-around中间是两端的倍数 space-between两端 space-evenly平均分配
            如果弹性子元素自左向右排列 主轴是x 自上而下排列主轴是y
        7.弹性子元素的对齐方式 侧轴 align-items flex-start flex-end center stretch高度或宽度跟父元素一致 basisline基线对齐

        如果弹性子元素没有设置宽高  自左向右排列 宽度是内容的宽度 高度是父元素的宽度
                                  自上而下排列 宽度是父元素的宽度 高度是内容的宽度
        如果添加了align-items 高度或宽度就是内容的宽高
     -->
     <ul>
         aaa
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         bbb
     </ul>
     <div>
         <p>hh</p>
     </div>
</body>
</html>

8.弹性子元素
1.设置弹性子元素的宽度或高度 flext-basis ===width/height 默认auto
2.分配剩余空间(扩展)flex-grow 默认0
3.是否允许弹性子元素进行收缩 flex-shrink 默认1允许 0不允许
4.flex 写一个阿拉伯数字 代表分配父元素的总宽度或总高度 每个子元素所占的份数
flex是flex-grow flex-shrink flex-basis的缩写 默认0 1 auto
5.弹性子元素的对齐方式 align-self:flex-start flex-end center
6.弹性资源的显示顺序order 值越小越靠前显示 可以为正值也可以为负值 但必须是整数

上一篇:Day16


下一篇:day16 rbac使用文档