当前位置：首页 > 网页特效 > 其他

jQuery和CSS3超酷3D网格布局文章墙特效

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

简介

##### HTML结构
该3D网格布局文章墙特效使用嵌套div的HTML结构。每一个element是一篇文章立方体，back是立方体的背面，文章的简介放置在这个面中。立方体的上右下左四个面使用空的div来制作，face是立方体的正面。content是文章的详细内容，即点击立方体后切换到全屏页面中显示的文字。

```html
<div class="scene">
  <div class="platform">
    <div class="element">
      <div class="back">
        <p class="hover-text">...</p>
      </div>
      <div class="side top"></div>
      <div class="side right"></div>
      <div class="side bottom"></div>
      <div class="side left"></div>
      <div class="face">
        <p class="front-text">Article name</br>武林秘籍</p>
      </div>
      <div class="content">
        <h1 class="heading">第一章 №1</h1>
        <p class="content-text">... </p>
        <span class="close">+</span>
      </div>
    </div>
  </div>
</div>    
```
#####  CSS样式
在CSS代码中，.platform元素被添加了perspective属性，并设置了transform-style: preserve-3d;,用以制作3d空间，并使各个面具有立体感。同时，这里还使用了新的CSS3 will-change属性，关于这个属性可以参考CSS will-change属性介绍与注意事项。
```html

.platform {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 5;
  width: 90%;
  height: 90%;
  padding: 5vh 4.5vw;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 2000;
          perspective: 2000;
}            
```    
关于立方体的制作可以参考CSS3 3D transforms系列教程-3D长方体。

##### JAVASCRIPT
在JS代码中，鼠标滑过某个网格时文字移动的效果是使用hoverEffect()函数来完成的。

```html
function hoverEffect(px) {
    $('.element').each(function () {
        var $back = $(this).find('.back'), $text = $(this).find('.hover-text'), backH = $back.height(), textH = $text.height(), diff = 0, dur = 0, pxPerSecond = px || 100, that = this;
        $(this).unbind('mouseenter mouseleave');
        if (backH < textH) {
            diff = textH - backH + 50;
            dur = parseFloat(diff / pxPerSecond).toFixed(2);
            $text.css('transition', 'transform ' + dur + 's 0.5s linear');
            $(that).hover(function () {
                $text.css('transition', 'transform ' + dur + 's 0.5s linear');
                $text.css('transform', 'translateY(' + (0 - diff) + 'px)');
            }, function () {
                $text.css('transition', 'transform 0.5s 0.5s linear');
                $text.css('transform', 'translateY(0px)');
            });
        }
    });
};
hoverEffect();   
```

web299.com

jQuery和CSS3超酷3D网格布局文章墙特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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