jquery+css实现字母文字隔断翻转动画效果代码
代码语言：html
所属分类：动画
代码描述：jquery+css实现字母文字隔断翻转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:100,600);
* {
margin: 0;
padding: 0;
}
body {
display: table-cell;
vertical-align: middle;
background-color: cornflowerblue;
}
h1 {
font: 100% "Roboto", sans-serif;
line-height: normal;
color: #aadff9;
font-size: 50px;
font-weight: 100;
}
.content {
position: absolute;
top: 50%;
left: 40%;
margin: -32px 0 0 -145px;
}
.content::after, .content::before {
color: #000;
font-size: 42px;
-o-animation: 2s ease-out 0s normal none infinite opacity;
-moz-animation: 2s ease-out 0s normal none infinite opacity;
-webkit-animation: 2s ease-out 0s normal none infinite opacity;
animation: 2s ease-out 0s normal none infinite opacity;
}
#word {
margin-top: 0;
padding-left: 110px;
text-align: left;
list-style: none;
-o-animation: 6s linear 0s normal none infinite change;
-moz-animation: 6s linear 0s normal none infinite change;
-webkit-animation: 6s linear 0s normal none infinite change;
animation: 6s linear 0s normal none infinite change;
}
#word li {
line-height: 40px;
margin: 0;
}
@-webkit-keyframes opacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes opacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-ms-keyframes opacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes opacity {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes change {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
}
25% {
margin-top: -40px;
}
40% {
margin-top: -40px;
}
50% {
margin-top: -80px;
}
65% {
margin-top: -80px;
}
75% {
margin-top: -40px;
}
85% {
margin-top: -40px;
}
100% {
margin-top: 0;
}
}
@-moz-keyframes change {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
}
25% {
margin-top: -40px;
}
40% {
margin-top: -40px;
}
50% {
margin-top: -80px;
}
65% {
margin-top: -80px;
}
75% {
margin-top: -40px;
}
85% {
margin-top: -40px;
}
100% {
margin-top: 0;
}
}
@-ms-keyframes change {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
}
25% {
margin-top: -40px;
}
40% {
margin-top: -40px;
}
50% {
margin-top: -80px;
}
65% {
margin-top: -80px;
}
75% {
margin-top: -40px;
}
85% {
margin-top: -40px;
}
100% {
margin-top: 0;
}
}
@keyframes change {
0% {
margin-top: 0;
}
15% {
margin-top: 0;
}
25% {
margin-top: -40px;
}
40% {
margin-top: -40px;
}
50% {
margin-top: -80px;
}
65% {
margin-top: -80px;
}
75% {
margin-top: -40px;
}
85% {
margin-top: -40px;
}
100% {
margin-top: 0;
}
}
#word-switcher {
position: relative;
display: inline-block;
vertical-align: top;
transition: width 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
white-space: nowrap;
margin-right: -5px;
margin-top: 0;
font-weight: bold;
}
#word-switcher.in p {
-webkit-animation: leave-word 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
-moz-animation: leave-word 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform-origin: center 35px;
transform-origin: center 35px;
}
#word-switcher.in p.active {
-webkit-animation: enter-word 300ms 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
animation: enter-word 300ms 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
#word-switcher p {
visibility: hidden;
position: absolute;
left: 0;
}
#word-switcher p.active {
visibility: visible;
}
@-webkit-keyframes leave-word {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
visibility: visible;
opacity: 0;
}
}
@-moz-keyframes leave-word {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
visibility: visible;
opacity: 0;
}
}
@-ms-keyframes leave-word {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
visibility: visible;
opacity: 0;
}
}
@keyframes leave-word {
0% {
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
opacity: 1;
}
100% {
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
visibility: visible;
opacity: 0;
}
}
@-webkit-keyframes enter-word {
0% {
-webkit-transform: rotateX(90deg);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg);
}
}
@-moz-keyframes enter-word {
0% {
-webkit-transform: rotateX(90deg);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg);
}
}
@-ms-keyframes enter-word {
0% {
-webkit-transform: rotateX(90deg);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg);
}
}
@keyframes enter-word {
0% {
-webkit-transform: rotateX(90deg);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: rotateX(0deg);
}
}
.glitch {
color: white;
position: absolute;
}
.glitch:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
background: cornflowerblue;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
-o-animation: glitch 2s 0 linear alternate-reverse;
-moz-animation: glitch 2s 0 linear alternate-reverse;
-webkit-animation: glitch 2s 0 linear alternate-reverse;
animation: glitch 2s 0 linear alternate-reverse;
}
.glitch:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
background: cornflowerblue;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
-o-animation: glitch-2 3s 0 linear alternate-reverse;
-moz-animation: glitch-2 3s 0 linear alternate-reverse;
-webkit-animation: glitch-2 3s 0 linear alternate-reverse;
animation: glitch-2 3s 0 linear alternate-reverse;
}
@-webkit-keyframes glitch {
0% {
clip: rect(23px, 9999px, 17px, 0);
}
5% {
clip: rect(34px, 9999px, 24px, 0);
}
10% {
clip: rect(34px, 9999px, 9px, 0);
}
15.0% {
clip: rect(20px, 9999px, 22px, 0);
}
20% {
clip: rect(5px, 9999px, 18px, 0);
}
25% {
clip: rect(15px, 9999px, 35px, 0);
}
30.0% {
clip: rect(26px, 9999px, 36px, 0);
}
35% {
clip: rect(26px, 9999px, 33px, 0);
}
40% {
clip: rect(26px, 9999px, 5px, 0);
}
45% {
clip: rect(13px, 9999px, 28px, 0);
}
50% {
clip: rect(29px, 9999px, 38px, 0);
}
55.0% {
clip: rect(30px, 9999px, 13px, 0);
}
60.0% {
clip: rect(7px, 9999px, 36px, 0);
}
65% {
clip: rect(28px, 9999px, 14px, 0);
}
70% {
clip: rect(15px, 9999px, 16px, 0);
}
75% {
clip: rect(8px, 9999px, 8px, 0);
}
80% {
clip: rect(39px, 9999px, 2px, 0);
}
85.0% {
clip: rect(20px, 9999px, 18px, 0);
}
90% {
clip: rect(27px, 9999px, 8px, 0);
}
95% {
clip: rect(33px, 9999px, 14px, 0);
}
100% {
clip: rect(23px, 9999px, 25px, 0);
}
}
@-moz-keyframes glitch {
0% {
clip: rect(23px, 9999px, 17px, 0);
}
5% {
clip: rect(34px, 9999px, 24px, 0);
}
10% {
clip: rect(34px, 9999px, 9px, 0);
}
15.0% {
clip: rect(20px, 9999px, 22px, 0);
}
20% {
clip: rect(5px, 9999px, 18px, 0);
}
25% {
clip: rect(15px, 9999px, 35px, 0);
}
30.0% {
clip: rect(26px, 9999px, 36px, 0);
}
35% {
clip: rect(26px, 9999px, 33px, 0);
}
40% {
clip: rect(26px, 9999px, 5px, 0);
}
45% {
clip: rect(13px, 9999px, 28px, 0);
}
50% {
clip: rect(29px, 9999px, 38px, 0);
}
55.0% {
clip: rect(30px, 9999px, 13px, 0);
}
60.0% {
clip: rect(7px, 9999px, 36px, 0);
}
65% {
clip: rect(28px, 9999px, 14px, 0);
}
70% {
clip: rect(15px, 9999px, 16px, 0);
}
75% {
clip: rect(8px, 9999px, 8px, 0);
}
80% {
clip: rect(39px, 9999px, 2px, 0);
}
85.0% {
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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