cs绘制造型创意小案例与难点解析 css实例知识

案例一

核心代码部分

 .basket span {
                position: absolute;
                 0.1em;
                height: 1.5em;
                background-color: burlywood;
                transform-origin: bottom;
                transform: rotate(calc(var(--n) * 10deg));
                left: calc((var(--r) - 1) * 0.6em);
            }

            .basket span:nth-child(1) {
                --n: -2;
                --r:1;
            }

            .basket span:nth-child(2) {
                --n: -1; 
                --r:2;
            }

            .basket span:nth-child(3) {
                --n: 1;
                --r:3;
            }

            .basket span:nth-child(4) {
                --n: 2; 
                --r:4;
            }

知识点说明

申明与引用变量

变量用两条航线--声明如 --color：red; 即声明一个名为--color 的变量他的值为red

读取变量的语法是使用var(--color) 把变量--color的值red赋予使用的部分

案例二

css动画应用实例：对打乒乓球案例

核心代码部分

.paddle,
.ball {
    animation: 1s linear infinite alternate;
}

.paddle {animation-name: moving;}
.ball {animation-name: bounce;}
.paddle.right {animation-delay: -1s;}

@keyframes moving {
    to {
        transform: translateY(9em);
    }
}

@keyframes bounce {
    to {
        transform: translateX(15em);
    }
}

知识点说明

animation-delay 使用负值表示动画被触发之前就已经开始了

目的是为了在动画开始时让元素处于运动状态而不是让用户等待动画开始

案例三

css创意造型-书签

核心代码部分

.tip{
margin:100px;
width:0;
height:12px;
background-color:hotpink;
border:12px solid transparent;
border-bottom:12px solid white;

}

知识点说明

书签图标实现原理是将三角形设置为背景色，这样空心的三角形就出现了

下载箭头实现使用border属性来制作三角形然后使用box-shadow属性来制作正方形仅仅使用width和height来制作下载箭头是无法实现的因为此时但侥幸和正方形始终是一样大的