按钮图标

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

创客主机

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织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

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