专栏首页OECOM显示3D文字且左右摆动效果

显示3D文字且左右摆动效果

2015-04-18 08:36:11

图片的进出特效前面介绍过不少,但是没有介绍过文字的特效,今天我来给大家介绍一种特效。相信大家在大街上都看到过店铺的招牌,有的招牌的文字为3D效果,并且后面还能看到阴影效果。我今天来介绍的特效就是这个样子,它的文字为3D效果,并且有投影和左右晃动效果。闲话少说,直接来上代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>落帆亭实现3D文字特效DEMO演示</title>
    <style>
body {
  background-color: #444;
}
div {
  width: 600px;
  height: 100px;
  margin: 100px auto;
  perspective: 1000px;
  perspective-origin: 50% -200px;
}
h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 3em;
  letter-spacing: 0.1em;
  color: #EEE;
  animation: rotate 2s ease-in-out alternate infinite;/*2s为设置摆动速度,即两秒轮回*/
}
h1:before {
  content: attr(data-shadow);
  color: transparent;
  text-shadow: 0 0 15px #111;
  position: absolute;
  z-index: -1;
  margin: -0.1em 0 0 0;
  animation: skew 2s ease-in-out alternate infinite;/*2s为设置摆动速度,即两秒轮回*/
  transform-origin: bottom;
}
/*设置摆动*/
@keyframes rotate {
  from {
    transform: rotateY(-10deg);
    text-shadow:  1px -1px #CCC,
                  2px -1px #BBB,
                  3px -2px #AAA,
                  4px -2px #999,
                  5px -3px #888,
                  6px -3px #777;
  }
  to {
    transform: rotateY(10deg);
    text-shadow:  -1px -1px #CCC,
                  -2px -1px #BBB,
                  -3px -2px #AAA,
                  -4px -2px #999,
                  -5px -3px #888,
                  -6px -3px #777;
  }
}
/*阴影*/
@keyframes skew {
  from {
    transform: scaleY(0.3) skewX(-15deg);
  }
  to {
    transform: scaleY(0.3) skewX(-20deg);
  }
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div style="text-align:center;clear:both;margin:20px auto">
</div>
  <div>
  <h1 data-shadow="落帆亭"><!--设置阴影文字-->
   落帆亭<!--设置3d显示文字-->
  </h1>
</div>
</body>

</html>

里面的关键部分都有注释,不懂的朋友可以留言,有好建议的朋友欢迎前来多多指教。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 通过css设置滚动条样式

    在移动端通常情况下滚动条是不显示出来,这样会让一些不明就里的人不知道是否可以滑动查看更多的信息,通过css可以来设置滚动条的样式,并且让它一直显示出来。

    无邪Z
  • 什么是BFC

    BFC 就是块级格式上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。那么首先先来说一下常见的三种控制...

    无邪Z
  • HTML可拖动自定义弹出层

    最近在进行web项目开发过程中,遇到了一个需求,就是需要弹出层可以用鼠标拖动。之前经常做的是弹出一个弹出层来提示用户信息或者是弹出一个弹出层进行登录,缺点是不能...

    无邪Z
  • CSS3径向渐变实现优惠券波浪造型

    很多人看到左右的波浪边框,第一想法,应该是用图片实现。现在我们就打破这一想法,用CSS搞定这个效果。

    Javanx
  • 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影

    红橙黄绿青蓝紫红:颜色从 0~360 顺序,各占30度。比如红色为0,黄色为120,绿色为240。

    Daotin
  • 使用iframe实现在pc端预览移动端页面的效果

    前段时间需要做一个在PC端预览移动端的功能,由于我是前端不太好,就在网上查找资料,花了半天的时间终于有所收获,在这里把我的实现代码分享给大家。想要在PC端实现模...

    AlbertYang
  • 转一个css3绘制的iPhone6

    css3绘制的iPhone6 <!DOCTYPE html> <html> <head> <title></title> <style type...

    练小习
  • 博客园样式管理总结(个人博客园装修指南)

    参考博客:https://www.cnblogs.com/maxiaodoubao/p/9854705.html

    CherishTheYouth
  • 盒子模型超详解——大佬不用看,新手看过来

    CSS盒子模型就是在CSS技术中所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将...

    泰斗贤若如
  • 60个非常实用的CSS代码片段,千万要收藏好了!

    如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑:

    winty

扫码关注云+社区

领取腾讯云代金券