当前位置：首页 > 网站模板 > 后台模板

超酷不同风格页面布局幻灯片特效

分类：后台模板日期：2024-05-14 点击(6) 评论(0)

超酷不同风格页面布局幻灯片特效

简介

##### HTML结构
该幻灯片的基本HTML结构如下：每一个幻灯片都有各自的布局class类，和一个data-layout属性，用于制作各自的动画效果。

```html
<div class="slideshow">
  <div class="slide slide--layout-1" data-layout="layout1">
    <div class="slide-imgwrap">
      <div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/1.jpg);"></div></div>
      <div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/2.jpg);"></div></div>
      <div class="slide__img"><div class="slide__img-inner" style="background-image: url(img/3.jpg);"></div></div>
    </div>
    <div class="slide__title">
      <h3 class="slide__title-main">Now or Never</h3>
      <p class="slide__title-sub">... <a href="#">Read more</a></p>
    </div>
  </div>
  <div class="slide slide--layout-2" data-layout="layout2">
    
  </div>
  
</div>
```
#####  CSS样式
下面是其中一个布局的CSS样式：

```html
/* Layout 1: 3 grid images */
 
.slide--layout-1 .slide__img {
  position: absolute;
  width: calc(50% - 1em);
}
 
.slide--layout-1 .slide__img:first-child {
  left: 0.5em;
  height: 100%;
}
 
.slide--layout-1 .slide__img:nth-child(n+2) {
  left: calc(50% + 0.5em);
  height: calc(50% - 0.5em);
}
 
.slide--layout-1 .slide__img:nth-child(3) {
  top: calc(50% + 0.5em);
}            
```

web299.com

超酷不同风格页面布局幻灯片特效

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面