<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta content = "Lwolf" name = "author"> <Link rel = "stylesheet" href = "http://www.phphubei.com/layout/css/css/animate.css"> <Style> * {Margin: 0; padding: 0;} html, body {_ height: 100%; _ overflow: hidden;} body {_ overflow: auto; font-family: Arial, sans-serif; font-size: 14px; background: # f4f4f4; color: #333; text-shadow: 1px 1px 1px # fff ;}# header {position: fixed; _ position: absolute; left: 0px; text-align: center; display: block; height: 35px; clear: both; background: #000; margin-bottom: 30px; border-bottom: 7px solid # ccc; font-size: 14px; line-height: 35px; text-align: right; font-style: italic; width: 100% ;} # header a {color: # aaa; text-shadow: 1px 1px 1px #000; padding: 0px 20px; outline: none ;}# header a: hover {color: # fff ;}# header. back {color: #1B80B5; font-weight: bold; display: block; float: right;} # header. back: hover {color: # fff ;}. left {float: left ;}. right {float: right;} h1 {font-size: 42px; font-family: 'cantarel'; font-weight: 100; letter-spacing:-1px ;} h2 {font-size: 20px; text-indent: 4px; font-weight: normal; font-style: italic; color: # a1a1a1; padding: 5px 0px 20px 0px ;} h2 span {color: #444;} a {color: #777; text-decoration: none;} a: hover {color: #222;} p {padding: 5px 0px ;}. content {padding: 70px; width: 80%; margin: 0 auto;} # footer {position: fixed; _ position: absolute; background: # eee; left: 0px; width: 100%; height: 50px; line-height: 50px; bottom: 0; background: # f0f0f0; border-top: 7px solid # ccc; text-align: center; text-shadow: 1px 1px 1px #000; color: # fff; background: #000 ;}# footer a {color: # aaa; padding: 0px 10px; text-shadow: 1px 1px 1px #000 ;}# footer a: hover {color: # fff; text-shadow: 0px 0px 1px # fff ;}# header {top: 0 ;} # AnimateTest {text-align: center; background: # 39c; padding: 10px; width: 180px; color: # fff; margin: 0 auto; text-shadow: 0 1px 0 rgba (0, 0, 0 ,. 3); background-image:-webkit-linear-gradient (-45deg, rgba (255,255,255, 0), rgba (255,255,255 ,. 1) 60%, rgba (255,255,255, 0) 60%); background-image:-moz-linear-gradient (-45deg, rgba (255,255,255, 0), rgba (255,255,255 ,. 1) 60%, rgba (255,255,255, 0) 60%); background-image: linear-gradient (-45deg, rgba (255,255,255, 0), rgba (255,255,255 ,. 1) 60%, rgba (255,255,255, 0) 60%); border-radius: 5px; border: 1px solid # 17a; box-shadow: inset 0 0 0 1px rgba (255,255,255 ,. 3); font-weight: bold;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden; backface-visibility: hidden;-webkit-animation-duration: 1 s;-webkit-animation-delay :. 2 s;-webkit-animation-timing-function: fill;-webkit-animation-fill-mode: both;-moz-animation-duration: 1 s; -moz-animation-delay :. 2 s;-moz-animation-timing-function: fill;-moz-animation-fill-mode: both;-ms-animation-duration: 1 s; -ms-animation-delay :. 2 s;-ms-animation-timing-function: fill;-ms-animation-fill-mode: both; animation-duration: 1 s; animation-delay :. 2 s; animation-timing-function: animation; animation-fill-mode: both;} # animateTest p {margin: 0 ;}. butt-small {font-size: 0.75em ;}. butt {background-color: # EEEEEE; background-image:-moz-linear-gradient (0% 100% 90deg, # CCCCCC, # EEEEEE); border: 1px solid # AAAAAA; border-radius: 5px 5px 5px; box-shadow: 0 1px 0 rgba (255,255,255, 0.4) inset; color: #333333; cursor: pointer; display: inline-block; font-weight: 700; line-height: 1.2em; margin: 0.75em 0; padding: 0.6em 12px; text-decoration: none; text-shadow: 0 1px 0 rgba (255,255,255, 0.3); width: auto ;} </Style> </Head> <Body> <Div class = "content"> <H2> <B> pure CSS animation effects animate.css </B> <Span> This is a series of animated effects implemented using CSS. Click the following button to view the effects ~~ </Span> <H3> Attention seekers <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('Flash'); "> flash </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('Bounce '); "> bounce </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('Shake '); "> shake </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('tada '); "> tada </a> <H3> fade-in effect <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadin'); "> fadeIn </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadup up'); "> fadeInUp </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('faddown low'); "> fadeInDown </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadleft left'); "> fadeInLeft </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadright right'); "> fadeInRight </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeinupbig '); "> fadeInUpBig </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeindownbig '); "> fadeInDownBig </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadleleftbig '); "> fadeInLeftBig </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeinrightbig '); "> fadeInRightBig </a> <H3> fade-out effect <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeout'); "> fadeOut </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeoutup'); "> fadeOutUp </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeoutlow'); "> fadeOutDown </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeoutleft'); "> fadeOutLeft </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeoutright'); "> fadeOutRight </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeoutupbig '); "> fadeOutUpBig </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeoutdownbig '); "> fadeOutDownBig </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeoutleftbig '); "> fadeOutLeftBig </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('fadeoutrightbig '); "> fadeOutRightBig </a> <Br/> <Div class = "flash" id = "animateTest"> <P> Hubei index </p> </Div> <H3> vibration effect <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bouncein'); "> bounceIn </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bounceinlow'); "> bounceInDown </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bounceinup'); "> bounceInUp </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bounceinleft'); "> bounceInLeft </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bounceinright'); "> bounceInRight </a> <Br/> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bounceout'); "> bounceOut </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bounceoutlow'); "> bounceOutDown </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bounceoutup'); "> bounceOutUp </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bounceoutleft'); "> bounceOutLeft </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('bounceoutright'); "> bounceOutRight </a> <H3> rotation effect <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotatin'); "> rotateIn </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotatdowndownleft'); "> rotateInDownLeft </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotatdowndownright'); "> rotateInDownRight </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotatupupleft'); "> rotateInUpLeft </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotateinupright'); "> rotateInUpRight </a> <Br/> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotateout'); "> rotateOut </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotateoutdownleft'); "> rotateOutDownLeft </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotateoutdownright'); "> rotateOutDownRight </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotateoutupleft'); "> rotateOutUpLeft </a> <A href = "#" class = "butt-small" onclick = "$ ('# animateTest '). removeClass (). addClass ('rotateoutupright'); "> rotateOutUpRight </a> <Br/> </Div> <Script src = "/js/jquery-1.7.1.min.js"> </script> </Body> </Html>
|