Skip to content

婚礼邀请函源码,只上传了上海版。做的比较粗糙,动画都是用css3书写的,假如有需要,可以借鉴一下,注意,视频和图片不要用我的哦!有版权,严禁用于除学习之外的其他任何用途。

Notifications You must be signed in to change notification settings

Jackllllll/invitePage

 
 

Repository files navigation

婚礼邀请函上海版源码

婚礼邀请函源码,只上传了上海版。做的比较粗糙,动画都是用css3书写的,假如有需要,可以借鉴一下,注意,视频和图片不要用我的哦!有版权,严禁用于除学习之外的其他任何用途。

perspective 动画透视效果

透视效果是近大远小,我的邀请函中,图片垂直翻转效果,用到了perspective 。让图片透视旋转。

@-webkit-keyframes rotater {
  0% {
    -webkit-transform: perspective(1200px) rotateY(-120deg);
            transform: perspective(1200px) rotateY(-120deg);
  }
100% {
    -webkit-transform:perspective(800px) rotateY(180deg);
            transform:perspective(800px) rotateY(180deg);
  }
}

@keyframes rotater {
  0% {
    -webkit-transform: perspective(1200px) rotateY(-120deg);
            transform: perspective(1200px) rotateY(-120deg);
  }
100% {
    -webkit-transform:perspective(800px) rotateY(180deg);
            transform:perspective(800px) rotateY(180deg);
  }

}

perspective()可以指定透视距离,值越小,显示越大,离你越近。

关于邀请函用到的知识点

请看文章http://www.haorooms.com/post/h5_animation_zj

有些知识点后来删掉了,例如font face特殊字体的应用

手机扫描预览

手机扫描预览

About

婚礼邀请函源码,只上传了上海版。做的比较粗糙,动画都是用css3书写的,假如有需要,可以借鉴一下,注意,视频和图片不要用我的哦!有版权,严禁用于除学习之外的其他任何用途。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 46.6%
  • CSS 35.1%
  • JavaScript 18.3%