微信小程序学习用demo推荐：星战字幕：网页字幕效果

柿霖不是林

小程序demo,星战风格字幕：
偶尔来的灵感undefined
实现起来的关键代码其实只是css3的透视效果，既给父元素添加"perspective"属性。


[mw_shl_code=html,true].content{
  position: relative;
  width:500rpx;
  perspective:500rpx;
}[/mw_shl_code]

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




示例代码：
js：
[mw_shl_code=javascript,true]//index.js
Page({
    data: {
        animationRotate:{}
    }
})[/mw_shl_code]


wxss：
[mw_shl_code=css,true]/**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%;
  }
}[/mw_shl_code]


wxml：
[mw_shl_code=html,true]<!--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>[/mw_shl_code]

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

jerry369

我有流量，寻求个人游戏开发者合作，有意者联系微信号jim20180688