我在 jsfiddle 上有以下代碼，但我希望影像從中心向外擴展，而不是從左側擴展
我需要在代碼中添加什么才能實作這一點？
提前致謝
https://jsfiddle.net/kayanna/oc9jyruq/6/
img {
width: 500px;
height: 250px;
-moz-animation: scale 0.5s; /* Firefox */
-webkit-animation: scale 0.5s; /* Safari and Chrome */
-o-animation: scale 0.5s; /* Opera */
animation: scale 0.5s;
}
@keyframes scale {
from {
width:0px;
}
to {
width:500px;
}
}
@-moz-keyframes scale { /* Firefox */
from {
width:0px;
}
to {
width:500px;
}
}
@-webkit-keyframes scale { /* Safari and Chrome */
from {
width:0px;
}
to {
width:500px;
}
}
@-o-keyframes scale { /* Opera */
from {
width:0px;
}
to {
width:500px;
}
}
}
uj5u.com熱心網友回復：
此代碼段假定您希望從一開始就為展開的影像保留空間 - 即，使其展開不會改變周圍元素的位置。
它用適當大小的 div 替換 img 元素，并將一個偽元素附加到具有所需影像作為背景并在 X 軸上從比例 0 到全尺寸影片的元素。這使得影像從中心而不是左側展開。
.expandimg {
width: 500px;
height: 250px;
position: relative;
}
div::before {
content: '';
animation: scale 0.5s;
background-image: url(https://cdn.pixabay.com/photo/2020/04/01/01/02/science-4989678_960_720.png);
background-size: cover;
background-repeat: no-repeat no-repeat;
background-position: center center;
position: absolute;
width: 100%;
height: 100%;
display: inline-block;
}
@keyframes scale {
from {
transform: scaleX(0);
}
to {
transform: scaleX(100%);
}
}<div class="expandimg"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/335517.html
上一篇：秒針的流暢影片