css3图片展示方式

最新推荐文章于 2024-07-26 14:13:59 发布

weixin_33836874

最新推荐文章于 2024-07-26 14:13:59 发布

阅读量194

点赞数

原文链接：http://www.cnblogs.com/FACESCORE/p/9338096.html

版权

<view class='img_block' id='mjltest'>

<view class='text_view'>

<view class='{{cell_class}}'>

<image src='http://192.168.31.193/images/img0_4_1.png'></image>

</view>

<view class='put_{{cell_class}}'>

<image src='http://192.168.31.193/images/img1_4_1.gif'></image>

</view>

</view>
.img_block {

position: absolute;
width: 590rpx;
height: 590rpx;
text-align: center;
margin: 0 auto;
left: 10%;
}

.img_block .text_view {
position: relative;
background-repeat: no-repeat;
width: 50%;
height: 50%;
}
/*LeftToRight','RightToLetf','TopToBelow','BelowToTop */
.img_block .BelowToTop,.img_block .LeftToRight,.img_block .RightToLetf,.img_block .TopToBelow {
position: absolute;
width: 10%;
height: 100%;
display: block;
}

.img_block .put_BelowToTop,.img_block .put_LeftToRight,.img_block .put_RightToLetf,.img_block .put_TopToBelow {
position: absolute;
width: 90%;
height: 100%;
display: block;
}

image {
width: 100%;
height: 100%;
}
.img_block .LeftToRight {
position: absolute;
-webkit-animation-name: LeftToRight;
animation: LeftToRight 800ms ;
animation-fill-mode:forwards;
}
.img_block .RightToLetf {
position: absolute;
-webkit-animation-name: RightToLetf;
animation: RightToLetf 800ms ;
animation-fill-mode:forwards;
}
.img_block .TopToBelow {
position: absolute;
-webkit-animation-name: TopToBelow;
animation: TopToBelow 800ms ;
animation-fill-mode:forwards;
}
.img_block .BelowToTop {
position: absolute;
-webkit-animation-name: BelowToTop;
animation: BelowToTop 800ms ;
animation-fill-mode:forwards;
}
.img_block .put_LeftToRight {
position: absolute;
-webkit-animation-name: put_LeftToRight;
animation: put_LeftToRight 800ms ;
animation-fill-mode:forwards;
}
.img_block .put_RightToLetf {
position: absolute;
-webkit-animation-name: put_RightToLetf;
animation: put_RightToLetf 800ms ;
animation-fill-mode:forwards;
}
.img_block .put_TopToBelow {
position: absolute;
-webkit-animation-name: put_TopToBelow;
animation: put_TopToBelow 800ms ;
animation-fill-mode:forwards;
}
.img_block .put_BelowToTop {
position: absolute;
-webkit-animation-name: put_BelowToTop;
animation: put_BelowToTop 800ms ;
animation-fill-mode:forwards;
}

/*从左到右显示*/

@keyframes LeftToRight {
0% {
width: 0%;
top: 0px;
}
100% {
width: 100%;
top: 0rpx;
}
}
/*从右到左显示*/
@keyframes RightToLetf {
0% {
width: 0%;
top: 0px;
left:100%;
}
100% {
width: 100%;
top: 0rpx;
left:0%;
}
}
/*从上到下显示*/
@keyframes TopToBelow{
0% {
height: 0%;
width: 100%;
top: 0%;
}
100% {
height: 100%;
width: 100%;
}
}
/*从下到上显示*/
@keyframes BelowToTop{
0% {
height:0%;
width: 100%;
bottom:0%;
}
100% {
height: 100%;
width: 100%;
bottom:0%;
}
}
/* 从左向右移动收起 */

@keyframes put_LeftToRight {
0% {
width: 100%;
top: 0px;
left:0%;
}
100% {
width: 0%;
left: 100%;
}
}

/* 从右到左显示收起*/
@keyframes put_RightToLetf {
0% {
width: 100%;
top: 0px;
right:0%;
}
100% {
width: 0%;
right: 100%;
}
}
/* 从上到下显示收起*/
@keyframes put_TopToBelow{
0% {
height: 100%;
width: 100%;
bottom:0%;
}
100% {
height: 0%;
width: 100%;
bottom:0%;
}
}
/*从下到上收起*/
@keyframes put_BelowToTop{
0% {
height:100%;
width: 100%;
top:0%;
}
100% {
height: 0%;
width: 100%;
top:0%;
}
}