有趣的css3實戰案例剖析——（水紋波動）

時間 2019-11-21

標籤有趣 css3 css 實戰案例剖析水紋波動欄目 CSS 简体版

原文原文鏈接

對於css3的學習，更多的是在於對新特性和基礎理論的熟悉，css

這篇文章經過一個案例帶領你們瞭解css3裏一些理論知識，也將一些技巧加以總結，從而提升你們的開發效率；html

本次案例爲（水紋波動），不用js寫動畫，只要善於運用css3就能實現水紋層層擴散的效果。css3

<<!DOCTYPE html>
<html>
<head>
<style> 
.wave { 
    margin-left: auto; margin-right: auto; 
    width: 100px; height: 100px;
    border-radius: 100px; 
    border: 2px solid #fff; 
    line-height: 100px; 
    background: #06c  no-repeat center center; 
    background-size: 100%; 
    animation: wave 4s linear infinite; 
    } 
@keyframes wave { 
        0% { box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1);
         } 
        50% { box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 10px rgba(250, 189, 189, 1);
         }
        100% { box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0); }
         } 
</style>
    <title>水紋波動特效</title>
</head>
<body>
 <div class="wave"></div>
</body>
</html>

主要重難點：

1. border-radius ( 給div元素添加圓角的邊框 )學習

屬性：能夠設置四個角的「圓潤」程度，四個值的順序是：左上角，右上角，右下角，左下角。；動畫

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

也能夠簡寫以左上，右上，右下，左下爲順序，省略的和它的對角相同；spa

2. animation （動畫屬性）3d

有六個屬性，案例中按順序簡寫。code

案例中用到的屬性：htm

animation-name：keyframename ；（規定須要綁定到選擇器的 keyframe 的名稱）blog

animation-duration: time; （規定動畫播放時間）

animation-timing-function：linear；（動畫從頭至尾的速度是相同的）

animation-iteration-count: infinite;（規定動畫應該無限次播放）

@keyframes （以百分比來規定改變發生的時間，或者經過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。 0% 是動畫的開始時間，100% 動畫的結束時間）

3. box-shadow （向框添加一個或多個陰影）

box-shadow: h-shadow v-shadow blur spread color inset;

（中間利用「，」製造兩個陰影，再運用0% 50% 100%的動畫使陰影擴散變大顏色變淺，從而模仿水波擴散的效果）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。