splitting实现带文字入场动画的图文幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:splitting实现带文字入场动画的图文幻灯片效果代码
代码标签: splitting 文字 入场 动画 图文 幻灯片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/splitting.css"> <style> /* 12columns.css | Created by Katherine Kato | Released under the MIT license */ /* GitHub: https://kathykato.github.io/12columns/ */ @import url("https://fonts.googleapis.com/css?family=Spectral:700|Rubik:400,500"); .container { margin: auto; padding: 0 1rem; max-width: 71.25rem; width: 100%; } .grid { display: flex; flex-direction: column; flex-flow: row wrap; } .grid > [class*=column-] { display: block; } .first { order: -1; } .last { order: 12; } .align-top { align-items: start; } .align-center { align-items: center; } .align-bottom { align-items: end; } .column-xs-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .column-xs-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .column-xs-3 { flex-basis: 25%; max-width: 25%; } .column-xs-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .column-xs-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .column-xs-6 { flex-basis: 50%; max-width: 50%; } .column-xs-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .column-xs-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .column-xs-9 { flex-basis: 75%; max-width: 75%; } .column-xs-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .column-xs-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .column-xs-12 { flex-basis: 100%; max-width: 100%; } @media (min-width: 48rem) { .column-sm-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .column-sm-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .column-sm-3 { flex-basis: 25%; max-width: 25%; } .column-sm-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .column-sm-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .column-sm-6 { flex-basis: 50%; max-width: 50%; } .column-sm-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .column-sm-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .column-sm-9 { flex-basis: 75%; max-width: 75%; } .column-sm-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .column-sm-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .column-sm-12 { flex-basis: 100%; max-width: 100%; } } @media (min-width: 62rem) { .column-md-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .column-md-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .column-md-3 { flex-basis: 25%; max-width: 25%; } .column-md-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .column-md-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .column-md-6 { flex-basis: 50%; max-width: 50%; } .column-md-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .column-md-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .column-md-9 { flex-basis: 75%; max-width: 75%; } .column-md-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .column-md-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .column-md-12 { flex-basis: 100%; max-width: 100%; } } @media (min-width: 75rem) { .column-lg-1 { flex-basis: 8.3333333333%; max-width: 8.3333333333%; } .column-lg-2 { flex-basis: 16.6666666667%; max-width: 16.6666666667%; } .column-lg-3 { flex-basis: 25%; max-width: 25%; } .column-lg-4 { flex-basis: 33.3333333333%; max-width: 33.3333333333%; } .column-lg-5 { flex-basis: 41.6666666667%; max-width: 41.6666666667%; } .column-lg-6 { flex-basis: 50%; max-width: 50%; } .column-lg-7 { flex-basis: 58.3333333333%; max-width: 58.3333333333%; } .column-lg-8 { flex-basis: 66.6666666667%; max-width: 66.6666666667%; } .column-lg-9 { flex-basis: 75%; max-width: 75%; } .column-lg-10 { flex-basis: 83.3333333333%; max-width: 83.3333333333%; } .column-lg-11 { flex-basis: 91.6666666667%; max-width: 91.6666666667%; } .column-lg-12 { flex-basis: 100%; max-width: 100%; } } @supports (display: grid) { .grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; } .grid > [class*=column-] { margin: 0; max-width: 100%; } .column-xs-1 { grid-column-start: span 1; grid-column-end: span 1; } .column-xs-2 { grid-column-start: span 2; grid-column-end: span 2; } .column-xs-3 { grid-column-start: span 3; grid-column-end: span 3; } .column-xs-4 { grid-column-start: span 4; grid-column-end: span 4; } .column-xs-5 { grid-column-start: span 5; grid-column-end: span 5; } .column-xs-6 { grid-column-start: span 6; grid-column-end: span 6; } .column-xs-7 { grid-column-start: span 7; grid-column-end: span 7; } .column-xs-8 { grid-column-start: span 8; grid-column-end: span 8; } .column-xs-9 { grid-column-start: span 9; grid-column-end: span 9; } .column-xs-10 { grid-column-start: span 10; grid-column-end: span 10; } .column-xs-11 { grid-column-start: span 11; grid-column-end: span 11; } .column-xs-12 { grid-column-start: span 12; grid-column-end: span 12; } @media (min-width: 48rem) { .column-sm-1 { grid-column-start: span 1; grid-column-end: span 1; } .column-sm-2 { grid-column-start: span 2; grid-column-end: span 2; } .column-sm-3 { grid-column-start: span 3; grid-column-end: span 3; } .column-sm-4 { grid-column-start: span 4; grid-column-end: span 4; } .column-sm-5 { grid-column-start: span 5; grid-column-end: span 5; } .column-sm-6 { grid-column-start: span 6; grid-column-end: span 6; } .column-sm-7 { grid-column-start: span 7; grid-column-end: span 7; } .column-sm-8 { grid-column-start: span 8; grid-column-end: span 8; } .column-sm-9 { grid-column-start: span 9; grid-column-end: span 9; } .column-sm-10 { grid-column-start: span 10; grid-column-end: span 10; } .column-sm-11 { grid-column-start: span 11; grid-column-end: span 11; } .column-sm-12 { grid-column-start: span 12; grid-column-end: span 12; } } @media (min-width: 62rem) { .column-md-1 { grid-column-start: span 1; grid-column-end: span 1; } .column-md-2 { grid-column-start: span 2; grid-column-end: span 2; } .column-md-3 { grid-column-start: span 3; grid-column-end: span 3; } .column-md-4 { grid-column-start: span 4; grid-column-end: span 4; } .column-md-5 { grid-column-start: span 5; grid-column-end: span 5; } .column-md-6 { grid-column-start: span 6; grid-column-end: span 6; } .column-md-7 { grid-column-start: span 7; grid-column-end: span 7; } .column-md-8 { grid-column-start: span 8; grid-column-end: span 8; } .column-md-9 { grid-column-start: span 9; grid-column-end: span 9; } .column-md-10 { grid-column-start: span 10; grid-column-end: span 10; } .column-md-11 { grid-column-start: span 11; grid-column-end: span 11; } .column-md-12 { grid-column-start: span 12; grid-column-end: span 12; } } @media (min-width: 75rem) { .column-lg-1 { grid-column-start: span 1; grid-column-end: span 1; } .column-lg-2 { grid-column-start: span 2; grid-column-end: span 2; } .column-lg-3 { grid-column-start: span 3; grid-column-end: span 3; } .column-lg-4 { grid-column-start: span 4; grid-column-end: span 4; } .column-lg-5 { grid-column-start: span 5; grid-column-end: span 5; } .column-lg-6 { grid-column-start: span 6; grid-column-end: span 6; } .column-lg-7 { grid-column-start: span 7; grid-column-end: span 7; } .column-lg-8 { grid-column-start: span 8; grid-column-end: span 8; } .column-lg-9 { grid-column-start: span 9; grid-column-end: span 9; } .column-lg-10 { grid-column-start: span 10; grid-column-end: span.........完整代码请登录后点击上方下载按钮下载查看
网友评论0