在頁面中放置9個<div class=” circle”></div>，定義每個.circle的樣式規則，使得9個圓在頁面中顯示為半徑依次相差20px的同心圓，定義關鍵幀anim，使得9個圓各自按給定的延遲沿左下角到右上角的直線移動，形成圓與圓碰撞的效果，碰撞后改變移動方向，從而保證里面的小圓一定在其外面的大圓中移動，不會超出，
撰寫的HTML檔案如下，
<!DOCTYPE html>
<html>
<head>
<title>圓與圓的碰撞</title>
<style>
.container
{
margin: 0 auto;
width: 450px;
height: 450px;
border: 3px solid DarkCyan;
border-radius: 5px;
position: relative;
}
.circle
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #008b8b;
border-radius: 50%;
animation: anim 2.75s ease-in-out infinite;
}
.one
{
width:380px;
height:380px;
animation-delay:2s;
}
.two
{
width:340px;
height:340px;
animation-delay:1.75s;
}
.three
{
width:300px;
height:300px;
animation-delay:1.5s;
}
.four
{
width:260px;
height:260px;
animation-delay:1.25s;
}
.five
{
width:220px;
height:220px;
animation-delay:1s;
}
.six
{
width:180px;
height:180px;
animation-delay:0.75s;
}
.seven
{
width:140px;
height:140px;
animation-delay:0.5s;
}
.eight
{
width:100px;
height:100px;
animation-delay:0.25s;
}
.nine
{
width:60px;
height:60px;
animation-delay:0s;
}
@keyframes anim
{
25%
{
left: calc(50% - 25px);
top: calc(50% + 25px);
border-color: green;
border-width: 3px;
}
75%
{
left: calc(50% + 25px);
top: calc(50% - 25px);
border-width: 1px;
}
}
</style>
</head>
<body>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，可以呈現出如圖1所示的影片效果，
圖1 圓與圓的碰撞
上面檔案中，表示9個同心圓的每個<div>指定了兩個選擇器，一個.circle用于定義圓的共同屬性設定，另外一個選擇器（one、two、…或nine）用于表示各自不同的屬性設定，當然也可以只定義選擇器circle，各自不同屬性的設定用選擇器: :nth-child()來設定，可改寫上面的HTML檔案如下，但本質上沒多大不同，
<!DOCTYPE html>
<html>
<head>
<title>圓與圓的碰撞</title>
<style>
.container
{
margin: 0 auto;
width: 450px;
height: 450px;
border: 3px solid DarkCyan;
border-radius: 5px;
position: relative;
}
.circle
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #008b8b;
border-radius: 50%;
animation: anim 2.75s ease-in-out infinite;
}
.circle:nth-child(1)
{
width:380px;
height:380px;
animation-delay:2s;
}
.circle:nth-child(2)
{
width:340px;
height:340px;
animation-delay:1.75s;
}
.circle:nth-child(3)
{
width:300px;
height:300px;
animation-delay:1.5s;
}
.circle:nth-child(4)
{
width:260px;
height:260px;
animation-delay:1.25s;
}
.circle:nth-child(5)
{
width:220px;
height:220px;
animation-delay:1s;
}
.circle:nth-child(6)
{
width:180px;
height:180px;
animation-delay:0.75s;
}
.circle:nth-child(7)
{
width:140px;
height:140px;
animation-delay:0.5s;
}
.circle:nth-child(8)
{
width:100px;
height:100px;
animation-delay:0.25s;
}
.circle:nth-child(9)
{
width:60px;
height:60px;
animation-delay:0s;
}
@keyframes anim
{
25%
{
left: calc(50% - 25px);
top: calc(50% + 25px);
border-color: green;
border-width: 3px;
}
75%
{
left: calc(50% + 25px);
top: calc(50% - 25px);
border-width: 1px;
}
}
</style>
</head>
<body>
<div >
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，同樣可以呈現出如圖1所示的影片效果，
在上面給出的HTML檔案中，我們會發現.circle:nth-child(1)~ .circle:nth-child(9)的樣式規則定義中，都涉及width、height和animation-delay這3個屬性，只是3個屬性的屬性值設定不同而已，雖然在撰寫檔案時，采用簡單的復制粘貼后略作修改即可，但檔案的代碼畢竟產生了冗余，導致檔案大小變大，
能否將它們統一書寫呢？采用CSS中的自定義變數可以實作這一要求，
自定義變數也稱為自定義屬性，在CSS3中采用“--*”的方式定義，其中“*”表示變數名稱，例如，定義：--example-variable：20px; 是一個CSS宣告，使用自定義“--*”屬性將CSS變數--example-variable的值設定為20px，
定義了自定義變數后，在CSS3中可以采用函式var()參考這個自定義變數的值，
var() 函式用于插入自定義變數的值，其呼叫格式為：
var(custom-property-name, value)
其中，引數custom-property-name必需，表示自定義變數的名稱，必需以 -- 開頭，引數value可選，備用值，在自定義變數的值不存在的時候使用，
這樣，在上面圓與圓碰撞的HTML檔案中，我們可以將width、height和animation-delay這3個屬性的設定用自定義變數的方式來完成，width和height的屬性值取值相同，值為圓外接正方形的邊長，可用自定義變數—length表示，animation-delay屬性表示各個圓的影片執行延遲時間，可用自定義變數—delay表示，由此，改寫上面的HTML檔案如下，
<!DOCTYPE html>
<html>
<head>
<title>圓與圓的碰撞</title>
<style>
.container
{
margin: 0 auto;
width: 450px;
height: 450px;
border: 3px solid DarkCyan;
border-radius: 5px;
position: relative;
}
.circle
{
position: absolute;
top: 50%;
left: 50%;
width:var(--length);
height:var(--length);
transform: translate(-50%, -50%);
border: 1px solid #008b8b;
border-radius: 50%;
animation: anim 2.75s var(--delay) ease-in-out infinite;
}
@keyframes anim
{
25%
{
left: calc(50% - 25px);
top: calc(50% + 25px);
border-color: green;
border-width: 3px;
}
75%
{
left: calc(50% + 25px);
top: calc(50% - 25px);
border-width: 1px;
}
}
</style>
</head>
<body>
<div >
<div style="--length:380px;--delay:2s;"></div>
<div style="--length:340px;--delay:1.75s;"></div>
<div style="--length:300px;--delay:1.5s;"></div>
<div style="--length:260px;--delay:1.25s;"></div>
<div style="--length:220px;--delay:1s;"></div>
<div style="--length:180px;--delay:0.75s;"></div>
<div style="--length:140px;--delay:0.5s;"></div>
<div style="--length:100px;--delay:0.25s;"></div>
<div style="--length:60px;--delay:0s;"></div>
</div>
</body>
</html>
在瀏覽器中打開包含這段HTML代碼的html檔案，同樣可以呈現出如圖1所示的影片效果，
通過這個實體，大家可以體會自定義變數在CSS3中的使用方法，關于自定義變數的更多知識，比如呼叫calc() 函式讓自定義變數的值參與運算，就不展開了，大家可以在網上搜索相關的資料學習，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/894.html
標籤：Html/Css
下一篇：CSS影片實體：食豆人