四、用CSS制作图形以及简单动画

一、利用阴影画一个月亮

说明：画月亮，需要先画一个圆，然后利用box-shadow属性，生成阴影，再将圆的颜色变为透明即可。

<html>

<head></head>

<body>

<style>

.moon {

    margin: auto;

    margin-top: 100px;

    width: 100px;

    height: 100px;

    /* transparent 当前背景色 */

    background-color: yellow;

    /* 圆角边框，设定大于等于50%时，正方形会变成圆 */

    border-radius: 70%;

    /* box-shadow参数：水平位移/垂直位移/模糊距离（可选）/颜色 */

    box-shadow: 50px 0px 0px orange;

}

</style>

<div class="moon"></div>

</body>

<foot></foot>

</html>

二、画一颗爱心

说明：利用before,after伪类在菱形（正方形旋转45度）两侧伸出，并设定圆形边框。

<html>

<head></head>

<body>

<style>

.heart {

    margin: auto;

    margin-top: 100px;

    width: 100px;

    height: 100px;

    transform: rotate(-45deg);

    background-color: pink;

}

/* 伪类before,after,在元素前后插入 */

.heart:before {

    /* 定位要取absolute,即相对heart类的盒子位置调整 */

    position: absolute;

    /* content 为必填字段 */

    content: "";

    width: 100px;

    height: 100px;

    /* 向上延伸 */

    top: -50px;

    left: 0px;

    border-radius: 50%;

    background-color: pink;

}

.heart:after {

    position: absolute;

    content: "";

    width: 100px;

    height: 100px;

    top: 0px;

    /* 向右延伸 */

    left: 50px;

    border-radius: 50%;

    background-color: pink;

}

</style>

<div class="heart"></div>

</body>

<foot></foot>

</html>

三、使爱心跳动起来

说明：应用了动画属性animation-name, animation-duration, animation-iteration-count, @keyframes等，让爱心间接性变大缩小。

<html>

<head></head>

<body>

<style>

.heart {

    margin: auto;

    margin-top: 100px;

    width: 100px;

    height: 100px;

    transform: rotate(-45deg);

    background-color: pink;

    /* 对应的动作名 */

    animation-name: beat;

    /* 动作持续的时间 */

    animation-duration: 1s;

    /* 动作循环的次数，infinite表示无限次 */

    animation-iteration-count: infinite;

}

/* 帧动作 在持续时间里对应百分比 css属性的变化 */

@keyframes beat {

    0% {

        /* scale 放大倍数 */

        transform: scale(0.8) rotate(-45deg);

    }

    50% {

        transform: scale(1.1) rotate(-45deg);

    }

}

/* 伪类before,after,在元素前后插入 */

.heart:before {

    /* 定位要取absolute,即相对heart类的盒子位置调整 */

    position: absolute;

    /* content 为必填字段 */

    content: "";

    width: 100px;

    height: 100px;

    /* 向上延伸 */

    top: -50px;

    left: 0px;

    border-radius: 50%;

    background-color: pink;

}

.heart:after {

    position: absolute;

    content: "";

    width: 100px;

    height: 100px;

    top: 0px;

    /* 向右延伸 */

    left: 50px;

    border-radius: 50%;

    background-color: pink;

}

</style>

<div class="heart"></div>

</body>

<foot></foot>

</html>

四、彩色弹跳球

<html>

<head></head>

<body>

<style>

.colorful-ball {

    position: absolute;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: linear-gradient(90deg, blue, white, yellow, orange);

    top: 50px;

    left: 300px;

    animation-name: fall-down;

    animation-duration: 1s;

    animation-iteration-count: infinite;

    /* 表示动作播放速度 ease-in:先慢后快; ease-out:先快后慢; ease-in-out：先慢后快再慢; cubic-bezier(n,n,n,n):自定义速度曲线 */

    animation-timing-function: ease-in;

}

@keyframes fall-down {

    50% {

        top: 200px;

    }

    100% {

        top: 50px;

    }

}

</style>

<div class="colorful-ball"></div>

</body>

<foot></foot>

巴特西

四、用CSS制作图形以及简单动画

最新文章

热门文章