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

案例一

css变量与表达式应用实例  用css绘制一个人热气球

 

核心代码部分

 .basket span {
                position: absolute;
                width: 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来制作下载箭头是无法实现的  因为此时但侥幸和正方形始终是一样大的