找回密码
 立即注册

扫一扫,访问微社区

查看: 4359|回复: 1

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

[复制链接]
发表于 2017-1-17 12:52:48 | 显示全部楼层 |阅读模式
小程序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]




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

本帖子中包含更多资源

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

×

0

主题

222

回帖

509

金钱

新人求带

积分
0
发表于 2020-4-25 14:23:51 | 显示全部楼层
我有流量,寻求个人游戏开发者合作,有意者联系微信号jim20180688
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-3-29 05:49 , Processed in 0.109657 second(s), 28 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表