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++ 值传递、指针传递、引用传递
    typedef与#define的区别
    const与#define的区别
    头文件重复引用
    多态
    ng双向数据绑定
    angular响应式编程
    angular的一些问题
    npm install 权限的问题
    typescript的入门
  • 原文地址:https://www.cnblogs.com/FACESCORE/p/9338096.html
Copyright © 2011-2022 走看看