|
在頁(yè)面中放置9個(gè)<div class=” circle”></div>，定義每個(gè).circle的樣式規(guī)則，使得9個(gè)圓在頁(yè)面中顯示為半徑依次相差20px的同心圓。定義關(guān)鍵幀anim，使得9個(gè)圓各自按給定的延遲沿左下角到右上角的直線移動(dòng)，形成圓與圓碰撞的效果，碰撞后改變移動(dòng)方向，從而保證里面的小圓一定在其外面的大圓中移動(dòng)，不會(huì)超出。 編寫的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 class="container"> <div class="circle one"></div> <div class="circle two"></div> <div class="circle three"></div> <div class="circle four"></div> <div class="circle five"></div> <div class="circle six"></div> <div class="circle seven"></div> <div class="circle eight"></div> <div class="circle nine"></div> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，可以呈現(xiàn)出如圖1所示的動(dòng)畫效果。 圖1 圓與圓的碰撞 上面文件中，表示9個(gè)同心圓的每個(gè)<div>指定了兩個(gè)選擇器，一個(gè).circle用于定義圓的共同屬性設(shè)置，另外一個(gè)選擇器（one、two、…或nine）用于表示各自不同的屬性設(shè)定。當(dāng)然也可以只定義選擇器circle，各自不同屬性的設(shè)置用選擇器: :nth-child()來設(shè)定?？筛膶懮厦娴腍TML文件如下，但本質(zhì)上沒多大不同。 <!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 class="container"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，同樣可以呈現(xiàn)出如圖1所示的動(dòng)畫效果。 在上面給出的HTML文件中，我們會(huì)發(fā)現(xiàn).circle:nth-child(1)~ .circle:nth-child(9)的樣式規(guī)則定義中，都涉及width、height和animation-delay這3個(gè)屬性，只是3個(gè)屬性的屬性值設(shè)定不同而已。雖然在編寫文件時(shí)，采用簡(jiǎn)單的復(fù)制粘貼后略作修改即可。但文件的代碼畢竟產(chǎn)生了冗余，導(dǎo)致文件大小變大。 能否將它們統(tǒng)一書寫呢？采用CSS中的自定義變量可以實(shí)現(xiàn)這一要求。 自定義變量也稱為自定義屬性，在CSS3中采用“--*”的方式定義，其中“*”表示變量名稱。例如，定義：--example-variable：20px; 是一個(gè)CSS聲明，使用自定義“--*”屬性將CSS變量--example-variable的值設(shè)置為20px。 定義了自定義變量后，在CSS3中可以采用函數(shù)var()引用這個(gè)自定義變量的值。 var() 函數(shù)用于插入自定義變量的值，其調(diào)用格式為： var(custom-property-name, value) 其中，參數(shù)custom-property-name必需，表示自定義變量的名稱，必需以 -- 開頭。參數(shù)value可選，備用值，在自定義變量的值不存在的時(shí)候使用。 這樣，在上面圓與圓碰撞的HTML文件中，我們可以將width、height和animation-delay這3個(gè)屬性的設(shè)置用自定義變量的方式來完成。width和height的屬性值取值相同，值為圓外接正方形的邊長(zhǎng)，可用自定義變量—length表示，animation-delay屬性表示各個(gè)圓的動(dòng)畫執(zhí)行延遲時(shí)間，可用自定義變量—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 class="container"> <div class="circle" style="--length:380px;--delay:2s;"></div> <div class="circle" style="--length:340px;--delay:1.75s;"></div> <div class="circle" style="--length:300px;--delay:1.5s;"></div> <div class="circle" style="--length:260px;--delay:1.25s;"></div> <div class="circle" style="--length:220px;--delay:1s;"></div> <div class="circle" style="--length:180px;--delay:0.75s;"></div> <div class="circle" style="--length:140px;--delay:0.5s;"></div> <div class="circle" style="--length:100px;--delay:0.25s;"></div> <div class="circle" style="--length:60px;--delay:0s;"></div> </div> </body> </html> 在瀏覽器中打開包含這段HTML代碼的html文件，同樣可以呈現(xiàn)出如圖1所示的動(dòng)畫效果。 通過這個(gè)實(shí)例，大家可以體會(huì)自定義變量在CSS3中的使用方法。關(guān)于自定義變量的更多知識(shí)，比如調(diào)用calc() 函數(shù)讓自定義變量的值參與運(yùn)算，就不展開了，大家可以在網(wǎng)上搜索相關(guān)的資料學(xué)習(xí)。 |
|
|
