当前位置：首页 > 网页特效 > 动画效果

SVG clipPath炫酷卡片膨胀动画特效

分类：动画效果日期：2024-05-14 点击(0) 评论(0)

简介

每一个卡片有两种状态：显示和隐藏。下面是卡片的解绑HTML结构：

```html
<div class="card">
  <div class="card__container">
    <svg class="card__image">
      
    </svg>
    <div class="card__content">
      <i class="card__btn-close fa fa-times"></i>
      <div class="card__caption">
        <h2 class="card__title">Title...</h2>
        <p class="card__subtitle">Subtitle...</p>
      </div>
      <p class="card__copy">
        Lorem ipsum dolor sit amet...
      </p>
    </div>
  </div>
</div>  
```              
基本的CSS样式如下：

```html
.card {
  position: relative;
  float: left;
  width: 29%;
  height: 0;
  margin: 2%;
  padding-bottom: 20%;
}
 
.card__container {
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}           
```    
对于隐藏状态的卡片，特效中设置卡片容器的单位为绝对定位。

```html
.card__container--closed {
  position: absolute;
  overflow: hidden;
}   
```             
为了切换卡片的两种状态，特效中简单的获取卡片的位置，然后将它变为全屏，并将container中的内容放到它里面。

```html
Card.prototype._floatContainer = function(callback) {
 
    $(document.body).css('overflow', 'hidden');
 
    var TL = new TimelineLite;
 
    // Get the card position on the viewport.
    var rect = this._container.getBoundingClientRect();
    var windowW = window.innerWidth;
 
    var track = {
      width: 0,
      x: rect.left + (rect.width / 2),
      y: rect.top + (rect.height / 2),
    };
 
    // Fix the container to the card position (start point).
    TL.set(this._container, {
      width: rect.width,
      height: rect.height,
      x: rect.left,
      y: rect.top,
      position: 'fixed',
      overflow: 'hidden'
    });
 
    // Tween the container (and the track values) to full screen (end point).
    TL.to([this._container, track], 2, {
      width: windowW, // This value must be in px in order to correctly update the track width.
      height: '100%',
      x: windowW / 2,
      y: 0,
      xPercent: -50,
      ease: Expo.easeInOut,
      clearProps: 'all',
      className: '-=' + CLASSES.containerClosed,
      onUpdate: callback.bind(this, track)
    });
 
    return TL;
  };        
```

web299.com

SVG clipPath炫酷卡片膨胀动画特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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