html与css(2) | 青训营笔记

html与css(2) | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天

1. css 3d动画

通过css实现一个如图的3d动画效果。 正方形的6个面，即6个div块。通过外面relative里面absolute，设置left,top为50%，再设置margin-left,margin-top为div块宽高的一半实现6个div块重合居中。

正前与正后的div块设置transform: translateZ(+？)， transform: translateZ(-？);注意+，-绝对值相加为div块的边长。

左右的div块设置transform: translateX(-？) rotateY(-90deg);transform: translateX(+？) rotateY(90deg);

上下的div块设置transform: translateY(-？) rotateX(90deg);transform: translateY(+？) rotateX(90deg);

这样就实现了一个正方体，再将其设置一个旋转动画，方便观察。

@keyframes run {
            0%{
                transform: rotateY(30deg) rotateX(30deg);
            }
            50%{
                transform: rotateY(300deg) rotateX(300deg);
            }
            100%{
                transform: rotateY(30deg) rotateX(30deg);
            }
        }

2. 瀑布流

实现如图效果。

最外面的盒子设置一个column-count: 5;即可。
里面的图片与文本盒子设置下break-inside: avoid;禁止盒子内部折行。
也可以根据需要设置其它属性：

            column-count: 5;
            column-gap: 100px;
            column-rule: 2px solid palegreen;
            column-fill: balance;
            column-width: 500px;

3. 通过渐变实现太极图

1.设置background: linear-gradient(white 50%,black 50%);

2.在伪类after,before中添加属性

.box5::before{
        content: "";
        display: block;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(white 25%,black 25%);
    }
    .box5::after{
        content: "";
        display: block;
        width: 250px;
        height: 250px;
        border-radius: 50%;
        background: radial-gradient(black 25%,white 25%);
    }

4. 网格布局

display:grid块级网格
display:inline-grid;行内块级
不同的列数即宽设置方法：

            /* 固定值 */
            /* grid-template-rows: 200px 200px 200px;
            grid-template-columns: 200px 200px 200px; */
            /* 百分比 */
            /* grid-template-rows: 25% 25% 25% 25%;
            grid-template-columns: 25% 25% 25% 25%; */
            /* repeat */
            /* grid-template-rows: repeat(3,33.33%);
            grid-template-columns: repeat(3,33.33%); */
            /* grid-template-rows: repeat(auto-fill,33.33%);
            grid-template-columns: repeat(auto-fill,33.33%); */
            /* fr片段 */
            grid-template-rows: 1fr 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;

网格：
grid-template-areas:
'a a c'
'd e e'
'g h i';
在子div中分配空间： grid-area: a;
或者直接： grid-column: 2/4; grid-row: 1/3;