八种不同的滚动栏动画特效
代码语言：html
所属分类：加载滚动
代码描述：八种不同的滚动栏动画特效
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body {
margin: 0px;
padding: 0px;
}
body {
background: #323232;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
color: #eee;
padding: 20px;
margin-bottom: 40px;
}
small {
opacity: 0.6;
}
article {
display: inline-block;
margin: 10px 20px 15px 0px;
}
h2 {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
text-transform: uppercase;
}
ul {
position: relative;
width: 200px;
height: 320px;
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
margin: 0;
}
ul li {
list-style: none;
position: relative;
padding: 12px;
background: #eee;
color: #252525;
font-size: 16px;
z-index: 2;
}
ul li:nth-child(odd) {
background: #fff;
}
/**
* Flip styles
*/
.flip {
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.flip li {
-webkit-transition: all 600ms ease,
opacity 300ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease,
opacity 300ms ease;
-o-transition: all 600ms ease,
opacity 300ms ease;
transition: all 600ms ease,
opacity 300ms ease;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.flip li.past {
opacity: 0;
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transform: rotateX( 80deg );
-moz-transform: rotateX( 80deg );
-ms-transform: rotateX( 80deg );
-o-transform: rotateX( 80deg );
transform: rotateX( 80deg );
}
.flip li.future {
opacity: 0;
-webkit-transform: rotateX( -80deg );
-moz-transform: rotateX( -80deg );
-ms-transform: rotateX( -80deg );
-o-transform: rotateX( -80deg );
transform: rotateX( -80deg );
}
/**
*
*/
.skew {
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 0% 50%;
-moz-perspective-origin: 0% 50%;
-ms-perspective-origin: 0% 50%;
-o-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
.skew li {
-webkit-transition: all 600ms ease,
opacity 200ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.skew li.past {
-webkit-transform: skew( 0deg, 30deg );
-moz-transform: skew( 0deg, 30deg );
-ms-transform: skew( 0deg, 30deg );
-o-transform: skew( 0deg, 30deg );
transform: skew( 0deg, 30deg );
}
.skew li.future {
z-index: 0;
-webkit-transform: skew( 0deg, -30deg );
-moz-transform: skew( 0deg, -30deg );
-ms-transform: skew( 0deg, -30deg );
-o-transform: skew( 0deg, -30deg );
transform: skew( 0deg, -30deg );
}
/**
* Wave styles
*/
.wave li {
-webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.wave li.past {
-webkit-transform: translateX( -70% );
-moz-transform: translateX( -70% );
-ms-transform: translateX( -70% );
-o-transform: translateX( -70% );
transform: translateX( -70% );
}
.wave li.future {
-webkit-transform: translateX( -70% );
-moz-transform: translateX( -70% );
-ms-transform: translateX( -70% );
-o-transform: translateX( -70% );
transform: translateX( -70% );
}
/**
* Fan styles
*/
.fan li {
-webkit-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-moz-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-ms-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-o-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.fan li.past {
-webkit-transform: rotate( -60deg );
-moz-transform: rotate( -60deg );
-ms-transform: rotate( -60deg );
-o-transform: rotate( -60deg );
transform: rotate( -60deg );
}
.fan li.future {
-webkit-transform: rotate( 70deg );
-moz-transform: rotate( 70deg );
-ms-transform: rotate( 70deg );
-o-transform: rotate( 70deg );
transform: rotate( 70deg );
}
/**
* Tilt styles
*/
.tilt {
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
}
.tilt li {
position: relative;
-webkit-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 300ms ease;
-moz-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-ms-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 300ms ease;
-o-transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 300ms ease;
transition: all 1000ms cubic-bezier(0.260, 0.860, 0.440, 0.985),
opacity 300ms ease;
}
.tilt li.past {
opacity: 0;
-webkit-transform: translateY( 100% ) translateZ(-200px);
-moz-transform: translateY( 100% ) translateZ(-200px);
-ms-transform: translateY( 100% ) translateZ(-200px);
-o-transform: translateY( 100% ) translateZ(-200px);
transform: translateY( 100% ) translateZ(-200px);
}
.tilt li.future {
opacity: 0;
-webkit-transform: translateY( -100% ) translateZ(-200px);
-moz-transform: translateY( -100% ) translateZ(-200px);
-ms-transform: translateY( -100% ) translateZ(-200px);
-o-transform: translateY( -100% ) translateZ(-200px);
transform: translateY( -100% ) translateZ(-200px);
}
/**
* Curl styles
*/
.curl {
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 0% 50%;
-moz-perspective-origin: 0% 50%;
-ms-perspective-origin: 0% 50%;
-o-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
}
.curl li {
-webkit-transition: all 600ms ease,
opacity 200ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease,
opacity 200ms ease;
-o-transition: all 600ms ease,
opacity 200ms ease;
transition: all 600ms ease,
opacity 200ms ease;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.curl li.past {
opacity: 0;
-webkit-transform: rotateY( 90deg );
-moz-transform: rotateY( 90deg );
-ms-transform: rotateY( 90deg );
-o-transform: rotateY( 90deg );
transform: rotateY( 90deg );
}
.curl li.future {
opacity: 0;
-webkit-transform: rotateY( 90deg );
-moz-transform: rotateY( 90deg );
-ms-transform: rotateY( 90deg );
-o-transform: rotateY( 90deg );
transform: rotateY( 90deg );
}
/**
* Papercut styles
*/
/*.test li {
-webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-ms-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 600ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}*/
.papercut {
-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
-webkit-perspective-origin: 0% 0%;
-moz-perspective-origin: 0% 0%;
-ms-perspective-origin: 0% 0%;
-o-perspective-origin: 0% 0%;
perspective-origin: 0% 0%;
}
.papercut li {
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.papercut li.past {
-webkit-transform: skew( 0deg, -30deg );
-moz-transform: skew( 0deg, -30deg );
-ms-transform: skew( 0deg, -30deg );
-o-transform: skew( 0deg, -30deg );
transform: skew( 0deg, -30deg );
}
.papercut li.future {
-webkit-transform: skew( 0deg, 30deg );
-moz-transform: skew( 0deg, 30deg );
-ms-transform: skew( 0deg, 30deg );
-o-transform: skew( 0deg, 30deg );
transform: skew( 0deg, 30deg );
}
/**
* Zipper styles
*/
.zipper li {
-webkit-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-moz-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-ms-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-o-transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
transition: all 600ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.zipper li.past:nth-child(odd),
.zipper li.future:nth-child(odd) {
-webkit-transform: translateX( 80% );
-moz-transform: translateX( 80% );
-ms-transform: translateX( 80% );
-o-transform: translateX( 80% );
transform: translateX( 80% );
}
.zipper li.past:nth-child(even),
.zipper li.future:nth-child(even) {
-webkit-transform: translateX( -80% );
-moz-transform: translateX( -80% );
-ms-transform: translateX( -80% );
-o-transform: translateX( -80% );
transform: translateX( -80% );
}
</style>
</head>
<body translate="no">
<div id="main">
<article>
<h2>Curl (CSS 3D)</h2>
<ul class="curl"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysize</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0