css3图片展示方式
<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%;
}
}
最新文章
- Github上传代码菜鸟超详细教程
- Java数据类型转换
- Elaticsearch REST API常用技巧
- sn 密钥注册
- AlwaysOn可用性组测试环境安装与配置（一）--SQL群集环境搭建
- windows远程连接Linux(Ubuntu)的方法
- sublime快捷键－for mac
- HTML5离线应用无法更新的定位与解决
- 【前端JS、后台C#】编码解码。
- 24篇HTTP博客
- HTML解析原理概括（转载）
- 修改 bug 总结
- 20个可用于商业用途的免费 CC0 授权的高分辨率图库
- jabRef里引用的相邻同名作者变横线
- javascript 实现数据结构 - 队列
- (转)用stunnel给普通http通信加密
- java 多线程 30: 多线程组件之 CyclicBarrier
- UVA 10700 Camel trading 无括号的表达式 贪心
- Linux下的ip命令
- dojo学习教程