zoukankan      html  css  js  c++  java
  • 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;
    590rpx;
    height: 590rpx;
    text-align: center;
    margin: 0 auto;
    left: 10%;
    }

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

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

    image {
    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% {
    0%;
    top: 0px;
    }
    100% {
    100%;
    top: 0rpx;
    }
    }
    /*从右到左显示*/
    @keyframes RightToLetf {
    0% {
    0%;
    top: 0px;
    left:100%;
    }
    100% {
    100%;
    top: 0rpx;
    left:0%;
    }
    }
    /*从上到下显示*/
    @keyframes TopToBelow{
    0% {
    height: 0%;
    100%;
    top: 0%;
    }
    100% {
    height: 100%;
    100%;
    }
    }
    /*从下到上显示*/
    @keyframes BelowToTop{
    0% {
    height:0%;
    100%;
    bottom:0%;
    }
    100% {
    height: 100%;
    100%;
    bottom:0%;
    }
    }
    /* 从左向右移动收起 */

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

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

  • 相关阅读:
    C++中 destory() 和deallocate()以及delete函数的相关性和区别性
    由STL所想到的 C++显示调用析构函数
    MINIX3 内核整体架构回顾及内核定 性分析
    有一个无效 SelectedValue,因为它不在项目列表中
    SqlParameter.Value = NULL 引发的数据库异常
    前端解决跨域问题的8种方案(最新最全)
    SQL语句优化技术分析 整理他人的
    暂时未整理 已打印
    .Net_把文件数据添加到数据库中(面试题)
    ASP.NET中application对象的用法(面试题)
  • 原文地址:https://www.cnblogs.com/FACESCORE/p/9338096.html
Copyright © 2011-2022 走看看