CSS3中實(shí)現(xiàn)從外往內(nèi)縮放(Scale)的動(dòng)畫效果,可以通過使用transform
屬性和scale()
函數(shù)來實(shí)現(xiàn),以下是一個(gè)簡單的示例,展示如何實(shí)現(xiàn)從外往內(nèi)的縮放效果:
1、HTML結(jié)構(gòu):
<div class="container"> <div class="inner-box"> <p>我是從外往內(nèi)縮放的文字</p> </div> </div>
2、CSS樣式:
.container { position: relative; width: 200px; height: 200px; border: 1px solid #000; } .inner-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f00; transform: scale(1); /* 初始狀態(tài) */ transition: transform 2s; /* 縮放動(dòng)畫時(shí)間 */ } .container:hover .inner-box { transform: scale(0.5); /* 縮放***一半大小 */ }
在這個(gè)示例中,當(dāng)鼠標(biāo)懸停在容器上時(shí),內(nèi)部的inner-box
元素會(huì)進(jìn)行從外往內(nèi)的縮放動(dòng)畫,通過transform: scale(1)
設(shè)置初始狀態(tài),然后通過transform: scale(0.5)
設(shè)置縮放***一半大小的狀態(tài)。transition: transform 2s
屬性用于設(shè)置縮放動(dòng)畫的時(shí)間為2秒。