用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-1-17 12:52:48 柿霖不是林 咫尺尊享 楼主 01622
    小程序demo,星战风格字幕:
    偶尔来的灵感
    undefined
    实现起来的关键代码其实只是css3的透视效果,既给父元素添加"perspective"属性。


    [HTML] 纯文本查看 复制代码
    .content{
      position: relative;
      width:500rpx;
      perspective:500rpx;
    }


    下面图片是在android真机上测试的效果,在ios中位置有所偏移我还没有细细调整。




    示例代码:
    js:
    [JavaScript] 纯文本查看 复制代码
    //index.js
    Page({
        data: {
            animationRotate:{}
        }
    })



    wxss:
    [CSS] 纯文本查看 复制代码
    /**index.wxss**/
    .container{
      position: relative;
      background-color: #000;
    }
    .content{
      position: relative;
      width:500rpx;
      perspective:500rpx;
    }
    .content-word{
      position: absolute;
      width:280rpx;
      height:420rpx;
      color: #ff9800;
      transform-origin: center top;-webkit-transform-origin:center top;
      transform: rotateX(60deg);
    -webkit-transform:rotateX(60deg);
      left:50%;
      margin-left:-140rpx;
      text-align: center;
      font-size:20rpx;
      overflow: hidden;
    }
    .content-move{
      top:100%;
      position: absolute;
      -webkit-animation:wordMove 50s both;
      -o-animation:wordMove 50s both;
      animation:wordMove 50s both;
    }
    @keyframes wordMove {
      0%{
        top:100%;
      }
      100%{
        top:-100%;
      }
    }
    @-webkit-keyframes wordMove {
      0%{
        top:100%;
      }
      100%{
        top:-100%;
      }
    }



    wxml:
    [HTML] 纯文本查看 复制代码
    <!--index.wxml-->
    <view class="container">
        <view class="content">
            <view class="content-word">
                <view class="content-move">
                    <view class="world">《星球大战》系列电影是由卢卡斯电影公司出品的科幻电影。</view>
                    <view class="world">卢卡斯电影公司首先于1977年推出了《星球大战》,</view>
                    <view class="world">之后又分别在1980年和1983年推出了《星球大战2》和《星球大战3》。/view>
                        <view class="world">之后又推出了《星球大战前》传系列,1、2、3分别于1999年、2002年和2005年上映。</view>
                        <view class="world">迪士尼收购卢卡斯影业之后正式迈入“快餐时代”。</view>
                        <view class="world">将从2015年开始,每年夏季推出一部《星球大战》题材电影</view>
                        <view class="world">预计《星球大战》的第八和第九部作品将分别于2017年和2019年上映。</view>
                        <view class="world">实际上“星球大战计划”真正的名字是“战略防御倡议”,</view>
                        <view class="world">该计划之所以被冠以“星球大战”之名是因为汉斯·贝特的一句话“如果这个计划(战略防御倡议)不幸成功了的话,</view>
                        <view class="world">简直就是一场‘星球大战’了!”</view>
                        <view class="world">后被一些媒体所接受,遂将其称之为“星球大战计划”,误导了不少人。</view>
                        <view class="world">这种叫法让一些人对星球大战电影产生了不太好的印象,</view>
                        <view class="world">个别人甚至认为星球大战电影应该为苏联的解体负责。</view>
                    </view>
                </view>
            </view>
        </view>





    游客,如果您要查看本帖隐藏内容请回复

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略