以下是 CSS3页面元素倾斜效果 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Slopy Elements with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Slopy Elements with CSS3" />
<meta name="keywords" content="inclined, skew, sloping, html5, slopy, css3, web design, elements, div, section, background, rotate, transform" />
<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/style.css" />
<script src="js/modernizr.custom.34978.js"></script>
</head>
<body>
<div class="container">
<div class="codrops-top">
<a href="http://tympanus.net/Development/ImageTransitions/">
<strong>« Previous Demo: </strong>Experimental CSS3 Animations for Image Transitions
</a>
<span class="right">
<a href="http://slipsum.com" target="_blank">Placeholder text by SAMUEL L. IPSUM</a>
<a href="http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div>
<header>
<h1>Slopy Elements with <span>with CSS3</span></h1>
<h2>Inclining & skewing "background elements" with CSS3</h2>
<p class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
</p>
</header>
<section class="se-container">
<div class="se-slope">
<article class="se-content">
<h3>Are you ready?</h3>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
</article>
</div>
<div class="se-slope">
<article class="se-content">
<h3>Oh... what I'm gon' do?</h3>
<p>Yeah, I like animals better than people sometimes... Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people. Like pit bulls. The dog of dogs. Pit bull can be the right man's best friend... or the wrong man's worst enemy. You going to give me a dog for a pet, give me a pit bull. Give me... Raoul. Right, Omar? Give me Raoul. </p>
</article>
</div>
<div class="se-slope">
<article class="se-content">
<h3>We happy?</h3>
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>
</article>
</div>
<div class="se-slope">
<article class="se-content">
<h3>No man, I don't eat pork</h3>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
</article>
</div>
<div class="se-slope">
<article class="se-content">
<h3>Are you ready?</h3>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee. </p>
</article>
</div>
<div class="se-slope">
<article class="se-content">
<h3>Oh... what I'm gon' do?</h3>
<p>Yeah, I like animals better than people sometimes... Especially dogs. Dogs are the best. Every time you come home, they act like they haven't seen you in a year. And the good thing about dogs... is they got different dogs for different people. Like pit bulls. The dog of dogs. Pit bull can be the right man's best friend... or the wrong man's worst enemy. You going to give me a dog for a pet, give me a pit bull. Give me... Raoul. Right, Omar? Give me Raoul. </p>
</article>
</div>
<div class="se-slope">
<article class="se-content">
<h3>We happy?</h3>
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>
</article>
</div>
<div class="se-slope">
<article class="se-content">
<h3>No man, I don't eat pork</h3>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
</article>
</div>
</section>
</div>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Slopy Elements with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Slopy Elements with CSS3" />
<meta name="keywords" content="inclined, skew, html5, sloping, slopy, css3, web design, elements, div, section, background, rotate, transform" />
<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" />
<script src="js/modernizr.custom.34978.js"></script>
</head>
<body>
<div class="container">
<div class="codrops-top">
<a href="http://tympanus.net/Development/ImageTransitions/">
<strong>« Previous Demo: </strong>Experimental CSS3 Animations for Image Transitions
</a>
<span class="right">
<a href="http://slipsum.com" target="_blank">Placeholder text by SAMUEL L. IPSUM</a>
<a href="http://tympanus.net/codrops/2011/12/21/slopy-elements-with-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div>
<header>
<h1>Slopy Elements with <span>with CSS3</span></h1>
<h2>Inclined and skewed "Background shapes"</h2>
<p class="codrops-demos">
<a href="index.html">Demo 1</a>
<a class="current-demo" href="index2.html">Demo 2</a>
</p>
</header>
<section class="se-container">
<div class="se-slope se-slope-black">
<article class="se-content">
<h3>Are you ready?</h3>
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
</article>
</div>
<div class="se-slope se-slope-pink">
<article class="se-content">
<h3>Let's roll?</h3>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
</article>
</div>
<div class="se-slope se-slope-pink">
<article class="se-content">
<h3>We happy?</h3>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</article>
</div>
<div class="se-slope se-slope-black">
<article class="se-content">
<h3>No pork!</h3>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
</article>
</div>
<div class="se-slope se-slope-black">
<article class="se-content">
<h3>Filthy?</h3>
<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?</p>
</article>
</div>
<div class="se-slope se-slope-pink">
<article class="se-content">
<h3>Oh, yes?</h3>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
</article>
</div>
<div class="se-slope se-slope-pink">
<article class="se-content">
<h3>No, thanks.</h3>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
</article>
</div>
<div class="se-slope se-slope-black">
<article class="se-content">
<h3>Man, let's go!</h3>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
</article>
</div>
<div class="se-slope se-slope-black">
<article class="se-content">
<h3>Hold on!</h3>
<p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
</article>
</div>
<div class="se-slope se-slope-pink">
<article class="se-content">
<h3>What else?</h3>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
</article>
</div>
<div class="se-slope se-slope-pink">
<article class="se-content">
<h3>Bring it on!</h3>
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>
</article>
</div>
<div class="se-slope se-slope-black">
<article class="se-content">
<h3>You're nuts...</h3>
<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
</article>
</div>
</section>
</div>
</body>
</html>
JS代码(modernizr.custom.34978.js):
/* Modernizr 2.0.6 (Custom Build) | MIT & BSD * Build:http://www.modernizr.com/download/#-iepp-cssclasses-load */
;
window.Modernizr=function(a,b,c){
function x(a,b){
return!!~(""+a).indexOf(b)}
function w(a,b){
return typeof a===b}
function v(a,b){
return u(prefixes.join(a+";
")+(b||""))}
function u(a){
k.cssText=a}
var d="2.0.6",e={
}
,f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n={
}
,o={
}
,p={
}
,q=[],r,s={
}
.hasOwnProperty,t;
!w(s,c)&&!w(s.call,c)?t=function(a,b){
return s.call(a,b)}
:t=function(a,b){
return b in a&&w(a.constructor.prototype[b],c)}
;
for(var y in n)t(n,y)&&(r=y.toLowerCase(),e[r]=n[y](),q.push((e[r]?"":"no-")+r));
u(""),j=l=null,a.attachEvent&&function(){
var a=b.createElement("div");
a.innerHTML="<elem></elem>";
return a.childNodes.length!==1}
()&&function(a,b){
function s(a){
var b=-1;
while(++b<g)a.createElement(f[b])}
a.iepp=a.iepp||{
}
;
var d=a.iepp,e=d.html5elements||"abbr|article|aside|audio|canvas|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",f=e.split("|"),g=f.length,h=new RegExp("(^|\\s)("+e+")","gi"),i=new RegExp("<(/*)("+e+")","gi"),j=/^\s*[\{
\}
]\s*$/,k=new RegExp("(^|[^\\n]*?\\s)("+e+")([^\\n]*)({
[\\n\\w\\W]*?}
)","gi"),l=b.createDocumentFragment(),m=b.documentElement,n=m.firstChild,o=b.createElement("body"),p=b.createElement("style"),q=/print|all/,r;
d.getCSS=function(a,b){
if(a+""===c)return"";
var e=-1,f=a.length,g,h=[];
while(++e<f){
g=a[e];
if(g.disabled)continue;
b=g.media||b,q.test(b)&&h.push(d.getCSS(g.imports,b),g.cssText),b="all"}
return h.join("")}
,d.parseCSS=function(a){
var b=[],c;
while((c=k.exec(a))!=null)b.push(((j.exec(c[1])?"\n":c[1])+c[2]+c[3]).replace(h,"$1.iepp_$2")+c[4]);
return b.join("\n")}
,d.writeHTML=function(){
var a=-1;
r=r||b.body;
while(++a<g){
var c=b.getElementsByTagName(f[a]),d=c.length,e=-1;
while(++e<d)c[e].className.indexOf("iepp_")<0&&(c[e].className+=" iepp_"+f[a])}
l.appendChild(r),m.appendChild(o),o.className=r.className,o.id=r.id,o.innerHTML=r.innerHTML.replace(i,"<$1font")}
,d._beforePrint=function(){
p.styleSheet.cssText=d.parseCSS(d.getCSS(b.styleSheets,"all")),d.writeHTML()}
,d.restoreHTML=function(){
o.innerHTML="",m.removeChild(o),m.appendChild(r)}
,d._afterPrint=function(){
d.restoreHTML(),p.styleSheet.cssText=""}
,s(b),s(l);
d.disablePP||(n.insertBefore(p,n.firstChild),p.media="print",p.className="iepp-printshim",a.attachEvent("onbeforeprint",d._beforePrint),a.attachEvent("onafterprint",d._afterPrint))}
(a,b),e._version=d,g.className=g.className.replace(/\bno-js\b/,"")+(f?" js "+q.join(" "):"");
return e}
(this,this.document),function(a,b,c){
function k(a){
return!a||a=="loaded"||a=="complete"}
function j(){
var a=1,b=-1;
while(p.length- ++b)if(p[b].s&&!(a=p[b].r))break;
a&&g()}
function i(a){
var c=b.createElement("script"),d;
c.src=a.s,c.onreadystatechange=c.onload=function(){
!d&&k(c.readyState)&&(d=1,j(),c.onload=c.onreadystatechange=null)}
,m(function(){
d||(d=1,j())}
,H.errorTimeout),a.e?c.onload():n.parentNode.insertBefore(c,n)}
function h(a){
var c=b.createElement("link"),d;
c.href=a.s,c.rel="stylesheet",c.type="text/css";
if(!a.e&&(w||r)){
var e=function(a){
m(function(){
if(!d)try{
a.sheet.cssRules.length?(d=1,j()):e(a)}
catch(b){
b.code==1e3||b.message=="security"||b.message=="denied"?(d=1,m(function(){
j()}
,0)):e(a)}
}
,0)}
;
e(c)}
else c.onload=function(){
d||(d=1,m(function(){
j()}
,0))}
,a.e&&c.onload();
m(function(){
d||(d=1,j())}
,H.errorTimeout),!a.e&&n.parentNode.insertBefore(c,n)}
function g(){
var a=p.shift();
q=1,a?a.t?m(function(){
a.t=="c"?h(a):i(a)}
,0):(a(),j()):q=0}
function f(a,c,d,e,f,h){
function i(){
!o&&k(l.readyState)&&(r.r=o=1,!q&&j(),l.onload=l.onreadystatechange=null,m(function(){
u.removeChild(l)}
,0))}
var l=b.createElement(a),o=0,r={
t:d,s:c,e:h}
;
l.src=l.data=c,!s&&(l.style.display="none"),l.width=l.height="0",a!="object"&&(l.type=d),l.onload=l.onreadystatechange=i,a=="img"?l.onerror=i:a=="script"&&(l.onerror=function(){
r.e=r.r=1,g()}
),p.splice(e,0,r),u.insertBefore(l,s?null:n),m(function(){
o||(u.removeChild(l),r.r=r.e=o=1,j())}
,H.errorTimeout)}
function e(a,b,c){
var d=b=="c"?z:y;
q=0,b=b||"j",C(a)?f(d,a,b,this.i++,l,c):(p.splice(this.i++,0,a),p.length==1&&g());
return this}
function d(){
var a=H;
a.loader={
load:e,i:0}
;
return a}
var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={
}
.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=r&&!s,u=s?l:n.parentNode,v=a.opera&&o.call(a.opera)=="[object Opera]",w="webkitAppearance"in l.style,x=w&&"async"in b.createElement("script"),y=r?"object":v||x?"img":"script",z=w?"img":y,A=Array.isArray||function(a){
return o.call(a)=="[object Array]"}
,B=function(a){
return Object(a)===a}
,C=function(a){
return typeof a=="string"}
,D=function(a){
return o.call(a)=="[object Function]"}
,E=[],F={
}
,G,H;
H=function(a){
function f(a){
var b=a.split("!"),c=E.length,d=b.pop(),e=b.length,f={
url:d,origUrl:d,prefixes:b}
,g,h;
for(h=0;
h<e;
h++)g=F[b[h]],g&&(f=g(f));
for(h=0;
h<c;
h++)f=E[h](f);
return f}
function e(a,b,e,g,h){
var i=f(a),j=i.autoCallback;
if(!i.bypass){
b&&(b=D(b)?b:b[a]||b[g]||b[a.split("/").pop().split("?")[0]]);
if(i.instead)return i.instead(a,b,e,g,h);
e.load(i.url,i.forceCSS||!i.forceJS&&/css$/.test(i.url)?"c":c,i.noexec),(D(b)||D(j))&&e.load(function(){
d(),b&&b(i.origUrl,h,g),j&&j(i.origUrl,h,g)}
)}
}
function b(a,b){
function c(a){
if(C(a))e(a,h,b,0,d);
else if(B(a))for(i in a)a.hasOwnProperty(i)&&e(a[i],h,b,i,d)}
var d=!!a.test,f=d?a.yep:a.nope,g=a.load||a.both,h=a.callback,i;
c(f),c(g),a.complete&&b.load(a.complete)}
var g,h,i=this.yepnope.loader;
if(C(a))e(a,0,i,0);
else if(A(a))for(g=0;
g<a.length;
g++)h=a[g],C(h)?e(h,0,i,0):A(h)?H(h):B(h)&&b(h,i);
else B(a)&&b(a,i)}
,H.addPrefix=function(a,b){
F[a]=b}
,H.addFilter=function(a){
E.push(a)}
,H.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",G=function(){
b.removeEventListener("DOMContentLoaded",G,0),b.readyState="complete"}
,0)),a.yepnope=d()}
(this,this.document),Modernizr.load=function(){
yepnope.apply(window,[].slice.call(arguments,0))}
;
CSS代码(demo.css):
/* 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{font-family:Constantia,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:#e90089;font-weight:400;font-size:15px;color:#fff;}
a{color:#333;text-decoration:none;}
.container{width:100%;position:relative;text-align:center;}
.clr{clear:both;}
.container > header{padding:30px 30px 10px 30px;margin:0px 20px 10px 20px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:right;}
.container > header h1{font-family:'Bitter',Arial,sans-serif;font-size:30px;line-height:40px;position:relative;font-weight:400;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.3);padding:0px 0px 5px 0px;}
.container > header h1 span{color:#000;text-shadow:0px 1px 1px rgba(0,0,0,0.3);}
.container > header h2{font-size:16px;font-style:italic;padding:0px 0px 15px 0px;}
/* Header Style */
.codrops-top{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;}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#ddd;display:block;float:left;}
.codrops-top a:hover{color:#fff;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:none;display:inline;}
p.codrops-demos{text-align:center;display:block;line-height:30px;padding:20px 0px;position:absolute;top:15px;left:20px;}
p.codrops-demos a{display:inline-block;width:60px;height:60px;background:#000;margin:0px 4px;color:#fff;line-height:60px;font-style:italic;font-weight:bold;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:50%;font-size:13px;-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.codrops-demos a:hover{background:#444;}
p.codrops-demos a.current-demo,p.codrops-demos a.current-demo:hover{background:#950158;}
/* Media Queries */
@media screen and (max-width:767px){.container > header{text-align:center;}
p.codrops-demos{position:relative;top:auto;left:auto;}
}
CSS代码(style.css):
.se-container{display:block;width:100%;overflow:hidden;padding-top:150px;}
.se-slope{margin:0 -50px;-webkit-transform-origin:left center;-moz-transform-origin:left center;-o-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;}
.se-slope:nth-child(odd){background:#000;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);margin-top:-200px;box-shadow:0px -1px 3px rgba(0,0,0,0.4);}
.se-slope:nth-child(even){background:#e90089;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);box-shadow:0px 2px 3px rgba(0,0,0,0.4) inset;}
.se-content{margin:0 auto;}
.se-content h3{font-size:60px;position:relative;display:inline-block;padding:10px 30px 8px 30px;height:80px;background:#000;line-height:80px;margin-bottom:20px;font-family:'Bitter','Trebuchet MS',Arial;text-shadow:1px 1px 1px rgba(0,0,0,0.9);}
.se-content h3:before{content:'';width:0;height:0;border-top:38px solid transparent;border-bottom:60px solid transparent;border-right:60px solid black;position:absolute;left:-59px;top:0px;}
.se-content h3:after{content:'';width:0;height:0;border-top:38px solid transparent;border-bottom:60px solid transparent;border-left:60px solid black;position:absolute;right:-59px;top:0px;}
.se-slope:nth-child(odd) .se-content h3:before,.se-slope:nth-child(odd) .se-content h3:after{border-right-color:#e90089;border-left-color:#e90089;}
.se-content p{width:75%;max-width:500px;margin:0 auto;font-style:italic;font-size:18px;line-height:24px;padding-top:10px;}
.se-content p:first-letter{font-size:40px;font-family:'Adobe Garamond Pro',Garamond,Palatino,'Palatino Linotype',Times,'Times New Roman',Georgia,serif;}
.se-slope:nth-child(odd) .se-content{-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);color:#e90089;padding:130px 100px 250px 100px;}
.se-slope:nth-child(even) .se-content{-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-o-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);color:#000;padding:150px 100px 250px 100px;}
.se-slope:nth-child(odd) .se-content h3{background:#e90089;color:#000;}
.se-slope:nth-child(even) .se-content h3{background:#000;color:#e90089;}
/* Media Queries */
@media screen and (max-width:1010px){.se-content h3{font-size:40px;}
}
@media screen and (max-width:767px){.se-content h3{font-size:20px;}
}
@media screen and (max-width:400px){.se-content h3{font-size:20px;line-height:20px;padding-top:30px;height:60px;}
.se-content p{width:95%;}
.se-slope:nth-child(odd) .se-content,.se-slope:nth-child(even) .se-content{padding-left:60px;padding-right:60px;}
}
CSS代码(style2.css):
.se-container{display:block;width:100%;overflow:hidden;box-shadow:0px 0px 10px #000;}
.se-slope{width:50%;height:300px;position:relative;float:left;overflow:hidden;}
.se-slope .se-content{margin:50px 100px 0px 100px;}
.se-slope-black{background:#000;}
.se-slope-pink{background:#e90089;}
.se-slope-black:nth-child(odd):after,.se-slope-black:nth-child(even):after{content:'';position:absolute;display:block;bottom:0px;width:0px;height:0px;border-top:150px solid transparent;border-bottom:150px solid transparent;}
.se-slope-black:nth-child(odd):after{border-right:60px solid #e90089;right:0px;}
.se-slope-black:nth-child(even):after{border-left:60px solid #e90089;left:0px;}
.se-content h3{z-index:10;font-size:30px;margin-top:60px;position:relative;display:inline-block;padding:15px 20px;line-height:40px;height:40px;font-family:'Bitter','Trebuchet MS',Arial;text-shadow:1px 1px 1px rgba(0,0,0,0.9);}
.se-slope.se-slope-black h3{background:#e90089;}
.se-slope.se-slope-pink h3{background:#000;}
.se-slope.se-slope-black h3:after,.se-slope.se-slope-black h3:before,.se-slope.se-slope-pink h3:after,.se-slope.se-slope-pink h3:before{content:'';width:0px;height:0px;top:0px;position:absolute;}
.se-slope.se-slope-black h3:after{border-top:70px solid transparent;border-left:30px solid #e90089;right:-30px;}
.se-slope.se-slope-black h3:before{border-bottom:70px solid transparent;border-right:30px solid #e90089;left:-30px;}
.se-slope.se-slope-pink h3:after{border-top:70px solid transparent;border-right:30px solid #000;left:-30px;}
.se-slope.se-slope-pink h3:before{border-bottom:70px solid transparent;border-left:30px solid #000;right:-30px;}
.se-content p{position:absolute;z-index:9;opacity:0.3;font-size:50px;text-align:left;-webkit-transform-origin:top center;-moz-transform-origin:top center;-o-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;}
.se-slope:nth-child(even) .se-content p{-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-o-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform:rotate(-15deg);top:-100px;right:-50px;text-align:left;width:95%;}
.se-slope:nth-child(odd) .se-content p{-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);-o-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg);top:-100px;left:-50px;text-align:right;width:90%;}
.se-slope.sl-slope-pink .se-content p{color:#000;}
/* Media Queries */
@media screen and (max-width:767px){.se-slope{float:none;width:100%;}
.se-slope .se-content{margin:50px 0px 0px 0px;}
.se-slope-black:nth-child(odd):after,.se-slope-black:nth-child(even):after{display:none;}
}
@media screen and (max-width:959px){.se-content h3{font-size:20px;}
}
分享到QQ
分享到微博
微信扫一扫
