从0开始学web-day16

2023-10-20 12:20:28

1.复习

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 值越小越靠前显示可以为正值也可以为负值但必须是整数

码农公寓

相关文章