令人驚歎的純CSS3絢麗修飾效果
阿新 • • 發佈：2019-02-06
自從W3C陸續釋出CSS3.0標準已經過去了幾年的時間，在這幾年的時間裡CSS3越發成長為一個漂亮的大姑娘，被越來越多的人所接受，並被越來越多的人所“喜歡”，喜歡“她”的理由在於她“絢麗的外表”和“強大的內在”，這邊文章我們將通過幾個直觀的CSS3示例來領略她的美！
【一】CSS3立體文字效果
你可以通過以下簡單程式碼來實現這一效果,首先新增一段簡單文字：
?| 1 |
<div contenteditable="true"
class="text effect01">前端開發whqet</div>
|
其次，在CSS檔案中新增全域性效果
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 |
body{
background-color: #666;
}
@import
url(http://fonts.googleapis.com/css?family=Dosis:500,800);
.text {
font-family:"微軟雅黑",
"Dosis", sans-serif;
font-size: 80px;
text-align: center;
font-weight: bold;
line-height:200px;
text-transform:uppercase;
position: relative;
}
|
| 1 2 3 4 5 6 7 8 9 10 |
.effect01{
background-color: #333;
color:#fefefe;
text-shadow:
0px 1px 0px #c0c0c0,
0px 2px 0px #b0b0b0,
0px 3px 0px #a0a0a0,
0px 4px 0px #909090,
0px 5px 10px rgba(0,
0, 0,
0.6);
}
|
【二】CSS3+JavaScript妨Android時鐘的效果
下面這段程式碼你可以複製到本地的html執行即可
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
<!DOCTYPE html>
<html lang="en-US">
<head><meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>CSS3製作時鐘</title>
<style type="text/css">
body,ul,li{
padding:
0;
margin:0;
}
a {
color: rgb(1,
124, 185);
text-decoration: none;
}
body{
font-size:16px;
color: #5a5d63;
background: #d6d7d9;
background: -webkit-radial-gradient(#eeefef, #d6d7d9);
background: -moz-radial-gradient(#eeefef, #d6d7d9);
background: -o-radial-gradient(#eeefef, #d6d7d9);
background: -ms-radial-gradient(#eeefef, #d6d7d9);
background: radial-gradient(#eeefef, #d6d7d9);
padding: 50px;
}
.box{
width: 540px;
height: 200px;
margin: 50px auto;
}
.box li{
position: relative;
text-align: center;
list-style-type: none;
display: inline-block;
width: 150px;
height:160px;
text-shadow:0
2px 1px #f4f4f4;
border:1px solid #9fa2ad;
border-radius: 5px;
margin-right:10px;
background: -webkit-gradient(linear,0
0, 0
100%,
color-stop(.2,rgba(248,248,248,.3)),
color-stop(.5,rgba(168,173,190,.5)),
color-stop(.51,rgba(168,173,190,.3)),
color-stop(.9,rgba(248,248,248,.2)));
background: -webkit-linear-gradient(top,rgba(248,248,248,.3)
20%,rgba(168,173,190,.5)
50%, rgba(168,173,190,.3)
51%, rgba(248,248,248,.2)
90%);
background: -moz-linear-gradient(top, rgba(248,248,248,.3)
20%, rgba(168,173,190,.5)
50%, rgba(168,173,190,.3)
51%, rgba(248,248,248,.2)
90%);
background: -o-linear-gradient(top, rgba(248,248,248,.3)
20%, rgba(168,173,190,.5)
50%, rgba(168,173,190,.3)
51%, rgba(248,248,248,.2)
90%);
background: -ms-linear-gradient(top, rgba(248,248,248,.3)
20%, rgba(168,173,190,.5)
50%, rgba(168,173,190,.3)
51%, rgba(248,248,248,.2)
90%);
background: linear-gradient(top, rgba(248,248,248,.3)
20%, rgba(168,173,190,.5)
50%, rgba(168,173,190,.3)
51%, rgba(248,248,248,.2)
90%);
box-shadow:inset
0 -2px 0
#f1f1f1,0
1px 0 #f1f1f1,0
2px 0
#9fa2ad,0 3px
0 #f1f1f1,0
4px 0
#9fa2ad;
}
.box li:before,
.box li:after{
display: block;
content:
"";
position: absolute;
width: 150px;
}
.box li:before{
top:50%;
height: 1px;
box-shadow:
0 1px 0
#868995,0
2px 1px #fff;
}
.box li:after{
bottom: -65px;
height: 60px;
border-radius:0
0 5px 5px;
background: -webkit-gradient(linear,0
0,0
100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));
background: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
background: -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
background: -o-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
background: -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
background: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
z-index:
1
}
.box li span:first-child{
font:120px
'BitstreamVeraSansMonoBold';
color: #52555a;
display: block;
height: 130px;
line-height: 150px;
}
@font-face {
font-family:
'BitstreamVeraSansMonoBold';
src: url('VeraMono-Bold-webfont.eot');
src: url('VeraMono-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('VeraMono-Bold-webfont.woff') format('woff'),
url('VeraMono-Bold-webfont.ttf') format('truetype'),
url('VeraMono-Bold-webfont.svg#BitstreamVeraSansMonoBold') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><span id="hour"></span><span>Hours</span></li>
<li><span id="minute"></span><span>Minutes</span></li>
<li><span id="second"></span><span>Seconds</span></li>
</ul>
</div>
<script>
var hour=document.getElementById('hour');
var minute=document.getElementById('minute');
var second=document.getElementById('second');
function showTime(){
var oDate=new
Date();
var iHours=oDate.getHours();
var iMinute=oDate.getMinutes();
var iSecond=oDate.getSeconds();
hour.innerHTML=AddZero(iHours);
minute.innerHTML=AddZero(iMinute);
second.innerHTML=AddZero(iSecond);
}
showTime();
setInterval(showTime,1000);
function AddZero(n){
if(n<10){
return
'0'+n;
}
return
''+n;
}
</script>
</body>
</html>
|
漸變可以建立類似於彩虹的效果，低版本的瀏覽器不的不使開發者用圖片來實現，CSS3將會輕鬆實現網頁漸變效果。
要得上面的線性漸變效果，我們這樣去定義CSS3樣式：
?| 1 2 3 |
background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa);
/* Firefox */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); /* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c6ff00', endColorstr='#538300', GradientType='0'); /* IE*/
|
-moz-linear-gradient有三個引數。第一個引數表示線性漸變的方向，top是從上到下、left是從左到右，如果定義成left top，那就是從左上角到右下角。第二個和第三個引數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的引數，表示多種顏色的漸變。