css 图片变大缩小,css3实现图片的变大变小

主要是使用 css3的animation，scale等于1是原图大小，大于1是把图片放大，小于1 是把图片缩小。animation-delay用来延迟5秒触发这个动画

Document

* {

margin: 0;

padding: 0;

}

body {

width: 100%;

height: 100%;

overflow: hidden;

}

.outBox,

.innerBox {

width: 100%;

height: 100%;

}

.outBox {

overflow: hidden;

}

.innerBox {

width: 100%;

height: 100%;

animation: changeBiger 4s linear forwards;

animation-delay: 5s;

-webkit-animation-delay: 5s;

transform: scale(1.08);

}

@keyframes changeBiger {

0% {

transform: scale(1.08);

}

100% {

transform: scale(1);

}

}

.innerBox {

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

background-image: url(https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D220/sign=627199341fce36d3bd0484320af13a24/ae51f3deb48f8c54ad2aa0c130292df5e1fe7f66.jpg);

}