当前位置：首页 > 网页特效 > svg

HTML5 SVG超酷雷达扫描式页面切换特效

分类：svg 日期：2024-05-14 点击(1) 评论(0)

简介

##### HTML结构
该页面切换特效使用嵌套div的HTML结构，每一个div.page是一个页面，.active代表当前页面。用于制作雷达扫描效果的SVG元素是通过jQuery代码动态生成的。rt-point是页面底部的原形导航数字。footer是分页按钮。

```html
<div class="scene">
  
  <div class="page page-1 active">
    <div class="page--rotater"></div>
    <div class="page--content">
      <h1>Page 1</h1>
    </div>
  </div>
  
  ...
  <div class="rt-point">
    <span class="page-number page-number-1 active">1</span>
    <span class="page-number page-number-2">2</span>
    ...
  </div>
  
  <div class="footer">
    <div class="nav">
      <ul>
        <li class="nav--btn nav--btn-1 active" data-page="1"></li>
        <li class="nav--btn nav--btn-2" data-page="2"></li>
        ...
      </ul>
    </div>
  </div>
  
</div>     
```       
页面的基本CSS样式如下：

```html
.scene {
  position: relative;
  height: 100%;
}
 
.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 10rem);
  -webkit-transition: -webkit-transform 0.7s;
          transition: transform 0.7s;
  will-change: transform;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.page.inactive {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.page.removing h1 {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  opacity: 0;
}
.page.down {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.page.up h1 {
  -webkit-transition: all 0s !important;
          transition: all 0s !important;
}
.page--rotater {
  position: absolute;
  top: -250%;
  left: -175%;
  width: 450%;
  height: 350%;
}
.page--content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15rem;
  font-size: 3rem;
}
@media (max-width: 990px) {
  .page--content {
    padding: 10rem;
  }
}
.page--content h1 {
  color: #fff;
  font-size: 8rem;
  font-family: SouthRose;
  text-transform: uppercase;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
          transition: transform 0.3s, opacity 0.3s;
  will-change: transform, opacity;
}
.page.page-1 {
  z-index: 10;
}
.page.page-1 .page--rotater {
  background: #922D50;
}
...   
```            
特效中使用媒体查询来调整字体大小，制作响应式的效果。

#####  JAVASCRIPT
特效中使用velocity.js来驱动SVG。每一个功能都被封装为一个独立的函数，通过函数的名称你可以大概明白这个函数的作用。具体代码请参考下载文件中的main.js文件。

web299.com

HTML5 SVG超酷雷达扫描式页面切换特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果