用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

3

主题

27

帖子

290

积分

架构狮

Rank: 3Rank: 3

积分
290
QQ
2016-12-26 15:36:08 adam806514395开发者认证 架构狮 楼主 1916772
本帖最后由 adam806514395 于 2016-12-27 14:06 编辑

小程序demo,星战风格字幕:
偶尔来的灵感

实现起来的关键代码其实只是css3的透视效果,既给父元素添加"perspective"属性。
[AppleScript] 纯文本查看 复制代码
.content{
  position: relative;
  width:500rpx;
  perspective:500rpx;
}

下面图片是在android真机上测试的效果,在ios中位置有所偏移我还没有细细调整。
starwars.jpg
2.gif
示例代码:
js:
[AppleScript] 纯文本查看 复制代码
//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>


项目下载:
starwars.7z (5.76 KB, 下载次数: 262)

评分

参与人数 1原创 +1 浮云 +20 收起 理由
天下雪 + 1 + 20 赞一个!

查看全部评分

占据有利位置,先下载试用一下再说
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
js的animation在这段效果里没有什么用,忘了删了
ios中的兼容性已经调好
wxss竟然支持css动画,等回头试一下
2016-12-30 14:16:05 3wxt 架构狮
6#
123123
2017-1-3 19:43:44 swhz 架构狮
7#
做的不错
你不是在骗我吧
微信小程序学习用demo推荐:星战字幕:网页字幕效果
2017-1-11 14:35:04 cxb 诠释者
10#
星战字幕:网页字幕效果
借鉴一下 谢谢
2017-1-17 12:50:11 zcwl 架构狮
12#
这个不错的
下载过来看看呢
2017-2-7 00:38:58 fishing161 来自手机 架构狮
14#
看看
网页字幕效果
老司机开车 没有驾照 快让让路 我要开始装逼
12下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册