絕對酷的CSS3文字陰影特效

2024-09-05 12:21:34

字體：大中小

來源：轉載

供稿：網友

非常酷的CSS文字陰影+立體文字效果，CSS3的text-shadow文字特效，代碼復雜了些，不過我沒有仔細看，或許還可以繼續優化。請在兼容CSS3/HTML5的瀏覽器上測試效果，IE8暫不支持本效果。本效果很好的支持移動設備。

<!DOCTYPE html><html><head><meta charset="gb2312"><title>CSS3文字陰影實現乳白文字效果</title><style>.milky {  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;;  text-transform: uppercase;  display: block;  font-size: 92px;  color: #f1ebe5;  text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;  font-weight: bold;  letter-spacing: -4px;  text-align: center;  background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);  position: absolute;  padding: 100px 200px;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  border-radius: 20px;}body,html {  height: 100%;}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {    display: block;}audio,canvas,video {    display: inline-block;}audio:not([controls]) {    display: none;    height: 0;}[hidden] {    display: none;}html {    font-family: sans-serif; /* 1 */    -ms-text-size-adjust: 100%; /* 2 */    -webkit-text-size-adjust: 100%; /* 2 */}body {    margin: 0;}a:focus {    outline: thin dotted;}a:active,a:hover {    outline: 0;}h1 {    font-size: 2em;    margin: 0.67em 0;}abbr[title] {    border-bottom: 1px dotted;}b,strong {    font-weight: bold;}dfn {    font-style: italic;}hr {    -moz-box-sizing: content-box;    box-sizing: content-box;    height: 0;}mark {    background: #ff0;    color: #000;}code,kbd,pre,samp {    font-family: monospace, serif;    font-size: 1em;}pre {    white-space: pre-wrap;}q {    quotes: "/201C" "/201D" "/2018" "/2019";}small {    font-size: 80%;}sub,sup {    font-size: 75%;    line-height: 0;    position: relative;    vertical-align: baseline;}sup {    top: -0.5em;}sub {    bottom: -0.25em;}img {    border: 0;}svg:not(:root) {    overflow: hidden;}figure {    margin: 0;}fieldset {    border: 1px solid #c0c0c0;    margin: 0 2px;    padding: 0.35em 0.625em 0.75em;}legend {    border: 0; /* 1 */    padding: 0; /* 2 */}button,input,select,textarea {    font-family: inherit; /* 1 */    font-size: 100%; /* 2 */    margin: 0; /* 3 */}button,input {    line-height: normal;}button,select {    text-transform: none;}button,html input[type="button"], /* 1 */input[type="reset"],input[type="submit"] {    -webkit-appearance: button; /* 2 */    cursor: pointer; /* 3 */}button[disabled],html input[disabled] {    cursor: default;}input[type="checkbox"],input[type="radio"] {    box-sizing: border-box; /* 1 */    padding: 0; /* 2 */}input[type="search"] {    -webkit-appearance: textfield; /* 1 */    -moz-box-sizing: content-box;    -webkit-box-sizing: content-box; /* 2 */    box-sizing: content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {    -webkit-appearance: none;}button::-moz-focus-inner,input::-moz-focus-inner {    border: 0;    padding: 0;}textarea {    overflow: auto; /* 1 */    vertical-align: top; /* 2 */}table {    border-collapse: collapse;    border-spacing: 0;}</style><script src="/jscss/demoimg/201404/prefixfree.min.js"></script></head><body><div   id="70qarhlowxag"   class="milky">網頁特效</div><div style="text-align:center;margin:400px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div></body></html>

上一篇：帶漸變的JS文字變換

下一篇：JQuery Shuffle Text洗牌文字特效演示實例