按钮图标

8种炫酷网页介绍标题文字动画特效

也想出现在这里?联系我们
创客主机


这是一组效果非常炫酷的网页介绍标题文字动画特效。这组文字动画效果共有 8 种效果,分别为弹性效果,文字剪裁效果,文字遮罩效果,视觉差效果,反转效果,文字缩放效果和全屏视频背景效果。

HTML 结构

所有文字动画效果的 HTML 结构都非常简单:使用一个 section.cd-intro 作为容器,里面的 div.cd-intro-content 是用于制作标题文字动画效果的内容。在第一种 bouncy 效果中,使用<h1>元素作为页面标题,<p>元素是一些标语,div.action-wrapper 是一些按钮元素。

  1. <section class="cd-intro">
  2.  <div class="cd-intro-content bouncy">
  3.  <h1>Animated Intro Section</h1>
  4.  <p>A collection of text effects for the intro section of your website</p>
  5.  <div class="action-wrapper">
  6.  <a href="#0" class="cd-btn main-action">Get started</a>
  7.  <a href="#0" class="cd-btn">Learn More</a>
  8.  </div>
  9.  </div>
  10. </section>

添加到.cd-into-content 中的.bouncy class 用于触发文字动画效果。

CSS 样式

默认情况下,标题文本的内容是隐藏的,它通过设置 opacity 属性为 0 实现,然后会使用 CSS3 Animation 来使其产生动画效果。对于 bouncy 效果,这里为<h1>,<p>和.cd-btn 创建了 3 个不同的 animations 动画。

  1. .cd-intro-content h1,
  2. .cd-intro-content p,
  3. .cd-intro-content .cd-btn {
  4.  opacity: 0;
  5.  animation-delay: 0.3s;
  6.  animation-fill-mode: forwards;
  7. }
  8.  
  9. .bouncy.cd-intro-content h1 {
  10.  animation-name: cd-bounce-right;
  11. }
  12.  
  13. .bouncy.cd-intro-content p {
  14.  animation-name: cd-bounce-left;
  15. }
  16.  
  17. .bouncy.cd-intro-content h1,
  18. .bouncy.cd-intro-content p {
  19.  animation-duration: 0.6s;
  20. }
  21.  
  22. .bouncy.cd-intro-content .cd-btn {
  23.  animation-name: cd-bounce-rotate;
  24.  animation-duration: 0.5s;
  25. }
  26.  
  27. .bouncy.cd-intro-content .cd-btn.main-action {
  28.  animation-delay: 0.4s;
  29. }
  30.  
  31. @keyframes cd-bounce-right {
  32.  0% {
  33.  opacity: .2;
  34.  transform: translateX(-200px);
  35.  }
  36.  60% {
  37.  opacity: .7;
  38.  transform: translateX(15px);
  39.  }
  40.  100% {
  41.  opacity: 1;
  42.  transform: translateX(0);
  43.  }
  44. }
  45.  
  46. @keyframes cd-bounce-left {
  47.  0% {
  48.  opacity: .2;
  49.  transform: translateX(200px);
  50.  }
  51.  60% {
  52.  opacity: .7;
  53.  transform: translateX(-15px);
  54.  }
  55.  100% {
  56.  opacity: 1;
  57.  transform: translateX(0);
  58.  }
  59. }
  60.  
  61. @keyframes cd-bounce-rotate {
  62.  0% {
  63.  opacity: .2;
  64.  transform: perspective(800px) rotateX(-80deg);
  65.  }
  66.  20% {
  67.  opacity: 1;
  68.  }
  69.  60% {
  70.  transform: perspective(800px) rotateX(20deg);
  71.  }
  72.  100% {
  73.  opacity: 1;
  74.  transform: perspective(800px) rotateX(0);
  75.  }
  76. }

对于视频背景效果,在 HTML 标签中有一个 div.cd-bg-video-wrapper 元素,它用于包裹背景视频(视频是通过 Javascript 动态加载的)。另外,在<h1>元素中还插入了两个 SVG 元素:.svg-mask 和.svg-mask-mobile。这两个 svg 用于创建标题透明效果(第一个是在大屏幕上使用,第二个是在小屏幕中使用的)。

  1. .cd-bg-video-wrapper {
  2.  /* background cover video */
  3.  position: absolute;
  4.  z-index: 1;
  5.  top: 0;
  6.  left: 0;
  7.  width: 100%;
  8.  height: 100%;
  9.  overflow: hidden;
  10.  background: url(../assets/bg-img.jpg) no-repeat center center;
  11.  background-size: cover;
  12. }
  13. .cd-bg-video-wrapper video {
  14.  /* you won't see this element in the html, but it will be injected using js */
  15.  display: block;
  16.  position: absolute;
  17.  left: 50%;
  18.  top: 50%;
  19.  bottom: auto;
  20.  right: auto;
  21.  transform: translateX(-50%) translateY(-50%);
  22.  min-height: 100%;
  23.  min-width: 100%;
  24.  max-width: none;
  25.  height: auto;
  26.  width: auto;
  27. }
  28.  
  29. .video.cd-intro-content svg {
  30.  position: absolute;
  31.  z-index: 2;
  32.  /* center the svg inside its parent */
  33.  left: 50%;
  34.  top: 50%;
  35.  bottom: auto;
  36.  right: auto;
  37.  transform: translateX(-50%) translateY(-50%);
  38.  opacity: 0.8;
  39. }
  40. .video.cd-intro-content svg.svg-mask {
  41.  /* this is the svg mask used on desktop version */
  42.  display: none;
  43. }
  44. @media only screen and (min-width: 768px) {
  45.  .video.cd-intro-content svg.svg-mask-mobile {
  46.  display: none;
  47.  }
  48.  .video.cd-intro-content svg.svg-mask {
  49.  display: block;
  50.  }
  51. }

JavaScript

这个网页介绍标题文字动画特效是完全使用 CSS 来制作的。jQuery 代码仅仅是为了加载最后一种效果中的视频文件,它仅会在屏幕宽度大于 768 像素的时候加载全屏的背景视频。它通过在 div.cd-bg-video-wrapper 元素上的 data-video 来查找视频文件。

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!