每天進(jìn)步一點，其實是很了不起的事情了。

廢話不多說，直接看圖！

效果2

效果2

第一步(可以先把背景圖搞出來，當(dāng)然你也可以先畫主體，最后在搞背景，看自己心情嘛)

html body {margin: 0;padding: 0;}

body {

/*no-repeat 是背景圖片，且只顯示一次*/

background: url(img/img.jpg) no-repeat;

/*背景圖片完全覆蓋背景區(qū)域*/

background-size: cover;

}

上面代碼寫完，就會出現(xiàn)這個效果了

背景圖片

現(xiàn)在呢，畫主體，(先畫一個框，并且在屏幕中間)

主體

視覺上的效果？用到了什么技術(shù)呢？

(1)背景顏色(透明)

(2)四個角都有弧度

(3)有陰影效果(鼠標(biāo)放在這個盒子上面，出現(xiàn)陰影)

(4)居中顯示，

那么好，知道了這些，開始寫代碼

//頁面

//css部分

.head {

margin: 50px auto;/*高度50px,居中*/

width: 400px;/*盒子長*/

height: 350px;/*盒子寬*/

border: 1px solid #999999;/*顏色為灰色的1px寬度的實線邊框(顯示盒子)*/

background-color: #333333;/*盒子的背景顏色*/

opacity: 0.5;/*透明度0為完全透明，1是不透明，*/

border-radius: 10%;/*設(shè)置圓形(4個角的弧度)*/

}

/*hover 鼠標(biāo)移動到div上時*/

div:hover {

-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;

/*鼠標(biāo)移動是過渡*/

box-shadow: 0px 0px 100px #FFFFFF/*四邊出現(xiàn)陰影，效果發(fā)光*/

}

//強(qiáng)制轉(zhuǎn)換字體顏色

::-webkit-input-placeholder {

color: #fff;

}

:-moz-placeholder {

color: #fff;

}

::-moz-placeholder {

color: #fff;

}

:-ms-input-placeholder {

color: #fff;

}

然后呢！里面有3個輸入框和一個按鈕

//頁面

//required必須填寫的字段，placeholder 默認(rèn)提示信息

登錄

效果

上面的問題

(1)不是一個標(biāo)簽占一行

(2)主要問題不美觀(賊難看)

(3)怎么讓它變的美觀一些呢，看下面代碼

input {

width: 300px;

display: block;/*設(shè)置成塊級元素，獨占一行*/

margin: 30px auto;/*外邊距30px，輸入框居中*/

padding: 10px;/*設(shè)置內(nèi)邊距*/

text-align: center;/*文字居中*/

border: 1px solid #EBEBEB;/*把輸入框包起來，變成長方形*/

border-radius: 10px;/*讓長方形的4個小彎一點，*/

font-family: 'Source Sans Pro', sans-serif;/*字體類型*/

font-size: 18px;/*字體大小*/

//你點擊輸入框，會出現(xiàn)一個邊框，下面代碼是去掉原來邊框

outline: none;

background-color: #5E5E5E;/*輸入框的背景顏色*/

}

button {

width: 100px;/*設(shè)置按鈕的長度*/

margin: 10px;/*外邊距*/

padding: 10px;/*內(nèi)邊距*/

border-radius: 10px;/*設(shè)置圓形*/

text-align: center;/*文字居中*/

font-family: 'Source Sans Pro', sans-serif;/*字體類型*/

font-size: 18px;/*字體大小*/

float: right;/*向右浮動*/

border: 1px solid #269ABC;/*把輸入框包起來，變成長方形*/

outline: none;/*和上面一樣*/

color: #fff;/*字體的顏色*/

background-color: #269ABC;/*背景顏色*/

}

效果

下面還是寫特效的代碼

hover 鼠標(biāo)移動到目標(biāo)上觸發(fā)

focus 鼠標(biāo)點擊，獲取焦點時觸發(fā)

input:focus {

border: 2px solid #269ABC;/*4邊更換顏色*/

box-shadow: 0px 0px 10px #ADADAD;/*4邊出現(xiàn)陰影*/

background-color: #333333;/*更換背景顏色，看出效果*/

}

button:hover{

border-left: 20px solid #E8E8E8 ;/*目標(biāo)左側(cè)變寬*/

border-right: 20px solid #E8E8E8 ;/*目標(biāo)右側(cè)變寬，*/

background-color: #5E5E5E;/*更換顏色*/

}

完畢

總結(jié)

以上是生活随笔為你收集整理的html阴影特效作品及代码,纯CSS做特效网页(阴影,透明,画圆圈等等)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。