以下是 jquery背景图片过渡特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Experiments with background-clip: text</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Experiments with background-clip: text - Background Image for Text" />
<meta name="keywords" content="typography, text, css3, background-clip, image, web design, gradient, transition" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="css/styleIE.css" />
<![endif]-->
</head>
<body>
<div class="container">
<p class="demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</p>
<div class="it-wrapper">
<h3 id="it-text">Andreas</h3>
</div>
<!-- adds class it-animate to h3 -->
<a id="it-toggle-button" class="it-toggle-button" href="#">Animate!</a>
</div>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('#it-toggle-button').on( 'click', function() {
$('#it-text').toggleClass('it-animate');
return false;
});
});
</script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Experiments with background-clip: text</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Experiments with background-clip: text - Background Image for Text" />
<meta name="keywords" content="typography, text, css3, background-clip, image, web design, gradient, transition" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<link href='http://fonts.googleapis.com/css?family=Fascinate' rel='stylesheet' type='text/css' />
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="css/styleIE.css" />
<![endif]-->
</head>
<body>
<div class="container">
<h1></h1>
<p class="demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</p>
<div class="it-wrapper">
<h3 id="it-text">Grande</h3>
</div>
<a id="it-toggle-button" class="it-toggle-button" href="#">Animate!</a>
</div>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function() {
$('#it-toggle-button').on( 'click', function() {
$('#it-text').toggleClass('it-animate');
return false;
});
});
</script>
</body>
</html>
CSS代码(demo.css):
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 4,2011 11:00:46 AM America/New_York */
@font-face{font-family:'BebasNeueRegular';src:url('fonts/BebasNeue-webfont.eot');src:url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/BebasNeue-webfont.woff') format('woff'),url('fonts/BebasNeue-webfont.ttf') format('truetype'),url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight:normal;font-style:normal;}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/* General Demo Style */
body{background:#ddd url(../images/bg.png) repeat top left;font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;text-transform:uppercase;font-weight:400;font-size:15px;color:#333;}
a{color:#333;text-decoration:none;}
.container{width:100%;position:relative;text-align:center;}
.clr{clear:both;}
h1{font-size:50px;line-height:50px;position:relative;font-weight:400;color:#111;text-shadow:0px 0px 1px rgba(0,0,0,0.7);padding:30px 30px 5px 30px;margin:0px 20px;text-align:center;}
h1 span{color:#444;}
h2{font-size:16px;font-family:Constantia,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;text-transform:none;font-style:italic;padding:0px 0px 15px 0px;}
/* Header Style */
.header{font-family:'Arial Narrow',Arial,sans-serif;line-height:24px;font-size:11px;background:#000;opacity:0.9;text-transform:uppercase;z-index:9999;position:relative;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.header a{padding:0px 10px;letter-spacing:1px;color:#ddd;display:block;float:left;}
.header a:hover{color:#fff;}
.header span.right{float:right;}
.header span.right a{float:none;display:inline;}
p.demos{text-align:center;display:block;line-height:30px;padding:20px 0px;margin:0px 30px 20px 30px;border-top:1px dashed rgba(0,0,0,0.1);border-bottom:1px dashed rgba(0,0,0,0.1);}
p.demos a{display:inline-block;width:60px;height:60px;background:#222;margin:0px 4px;color:#fff;line-height:60px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:50%;font-size:16px;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;-webkit-box-shadow:0px 0px 0px 10px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 0px 10px rgba(0,0,0,0.2);box-shadow:0px 0px 0px 10px rgba(0,0,0,0.2);}
p.demos a:hover{opacity:0.7;}
p.demos a.current-demo,p.demos a.current-demo:hover{background:#666;color:#fff;}
.it-toggle-button{text-align:center;padding:5px 40px;display:inline-block;background:rgba(200,37,41,0.8);margin:0px 4px;color:#fff;font-size:20px;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}
.it-toggle-button:hover{background:rgba(242,208,20,0.8);}
CSS代码(style1.css):
.it-wrapper{padding:30px;text-align:center;max-width:1140px;margin:0 auto;}
.it-wrapper h3{font-size:320px;line-height:188px;padding:60px 30px 30px;color:rgba(67,201,117,0.9);font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;text-shadow:10px 10px 2px rgba(0,0,0,0.2);-webkit-text-stroke:10px rgba(255,255,255,0.6);background-color:#fff;background-repeat:no-repeat;background-image:url(../images/2.jpg),url(../images/1.jpg);background-position:50% 50%;-moz-background-size:100%;background-size:100%;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;-webkit-transition:all 0.5s linear;-moz-transition:all 0.5s linear;-o-transition:all 0.5s linear;-ms-transition:all 0.5s linear;transition:all 0.5s linear;-moz-border-radius:30px;-moz-box-shadow:0px 0px 1px 8px rgba(67,201,117,0.2);}
.it-wrapper h3.it-animate{background-size:50%;background-position:0% 50%,130% 50%;color:rgba(242,208,20,0.4);-moz-box-shadow:0px 0px 1px 8px rgba(242,208,20,0.4);}
分享到QQ
分享到微博
微信扫一扫
