CSS3 名片效果程式碼例項

admin發表於2017-02-20
CSSS3

本章節分享一段程式碼例項，它使用css3實現了美觀的名片效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  height: 800px;
  font-size: 62.5%;
  background-color: #eee;
}
 
html,body,h1,h2,p {
  margin: 0;
  padding: 0;
}
 
footer {
  position: absolute;
  bottom: 0;
}
 
#inner-wrapper {
  width: 85.6mm;
  height: 53.98mm;
  margin: 120px auto;
  margin: 12rem auto;
  position: relative;
   
  -webkit-transition: 1.5s all;
  -moz-transition: 1.5s all;
  -o-transition: 1.5s all;
  transition: 1.5s all;
   
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
 
#front, #back {
  position: absolute;
  top: 0;
  left: 0;
  width: 75.6mm;
  height: 43.98mm;
  padding: 5mm;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.7);
  background: #FF3500;
   
  background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -webkit-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
  background: -moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -moz-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
  background: -o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.6)), -o-linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
  background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.6)), linear-gradient(45deg,#FF3500 37.7mm,#FF7600 37.8mm,#FF7600 59.7mm,#FF3500 59.8mm);
}
 
#front {
  z-index: 2; 
}
      
/*文字排版樣式*/
 
h1, h2 {
  font-family: DeutschGothicNormal, sans-serif;
}
 
h1 {
  position: relative;
  font-size: 30px;
  font-size: 3rem;
  z-index: 3;
}
 
h2 {
  position: relative;
  top: 2mm;
  font-size: 15px;
  font-size: 1.5rem;
  text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
}
 
p, li {
  font-family: SFArcheryBlackSCRegular;
  font-size: 11px;
  font-size: 1.1rem;
  margin-top: 5px;
  margin-top: 0.5rem;
}
 
li {
  position: relative;
  top: 8mm;  
}        
</style>
</head>
<body>
<div id="wrapper" tabindex="0">
  <div id="inner-wrapper">
    <div id="front">
      <hgroup>
        <h1>Chris Mills</h1>
        <h2>Heavy metal web designer</h2>
      </hgroup>
      <p>螞蟻部落</p>
    </div>
    <div id="back">
      <ul>
        <li><strong>Email:</strong> <a href="mailto:cmills@opera.com">cmills@opera.com</a></li>
        <li><strong>Phone:</strong> +44 123 456 7890</li>
        <li><strong>Twitter:</strong> @chrisdavidmills</li>
      </ul>
    </div>
  </div>
</div>        
</body>
</html>

相關文章