css 图片慢慢缩大变小

html-css023

css 图片慢慢缩大变小,第1张

这是 图片慢慢放大和缩小

.toShop-btn{

position: fixed

top:730rpx

width: 81rpx

height:91rpx

line-height: 48px

z-index:99

right:0rpx

-moz-animation: myfirst 1s infinite

-webkit-animation: myfirst 1s infinite

-o-animation: myfirst 1s infinite

animation: myfirst 1s infinite

}

@keyframes myfirst{

0% { transform: scale(.8)}

50% { transform: scale(1)}

100% { transform: scale(.8)}

}

先将你需要组合的图片编号,如M1-M10。就按你的需要连接的动画从头到尾进行编号放到一个文件夹下,在软件中“导入到舞台”选中其中一张图片进行导入,软件会自动根据你文件编号判断该文件夹中的文件可能是序列文件并提示你是否将其全部导入,你选择“是”软件即将全部图片按顺序建立每张图片的关键帧并自动形成动画。

可以用css3中“transform: scale()”属性对图片进行缩放。

1、新建html文档,在body标签中添加一张图片,给这张图片设置css属性,添加“tansform”缩放属性,属性值为“scaleX(n)”,scaleX(n)指的是对宽度进行缩放,n指的是缩放比例:

2、将transform的属性值改为“scaleY(n)”,scaleY(n)指的是对高度进行缩放,n指的是缩放比例:

3、将transform的属性值改为“scale(n)”,scale(n)指的是对图片的宽度和高度同时进行等比例缩放,n指的是缩放比例: