捉蟲放大鏡

公告

四、用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>

posted on 2021-03-11 17:08 捉蟲放大鏡閱讀(167) 評論(0) 收藏舉報

刷新頁面返回頂部