sequence实现一个图片轮换切换自然过渡效果代码

代码语言:html

所属分类:幻灯片

代码描述:sequence实现一个图片轮换切换自然过渡效果代码

代码标签: 图片 轮换 切换 自然 过渡 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
/*
 * Styles: Body, HTML, and container
 * 1: Make the application fullscreen
 * 2: Basic reset styles
 */
body,
html,
.seq {

  /* #1 */
  width: 100%;
  height: 100%;

  /* #2 */
  margin: 0;
  padding: 0;
}

/*
 * Styles: Container
 * 1: Canvas, steps, and content should be positioned relative to the container
 * 2: Hide anything that goes beyond the boundaries of the Sequence container
 * 3: Some basic styles
 * 4: Set the initial background color
 * 5: Make the background color transition when navigating between steps
 */
.seq {

  /* #1 */
  position: relative;

  /* #2 */
  overflow: hidden;

  /* #3 */
  font-family: sans-serif;
  color: white;
  text-align: center;

  /* #4 */
  background-color: #2A93BC;

  /* #5 */
  transition-duration: .5s;
  transition-property: background-color;
}

/*
 * Styles.........完整代码请登录后点击上方下载按钮下载查看

网友评论0