html阴影特效作品及代码,纯CSS做特效网页(阴影,透明,画圆圈等等)
每天進(jìn)步一點(diǎn)，其實(shí)是很了不起的事情了。
廢話不多說，直接看圖！
效果2
效果2
第一步(可以先把背景圖搞出來，當(dāng)然你也可以先畫主體，最后在搞背景，看自己心情嘛)
html body {margin: 0;padding: 0;}
body {
/*no-repeat 是背景圖片，且只顯示一次*/
background: url(img/img.jpg) no-repeat;
/*背景圖片完全覆蓋背景區(qū)域*/
background-size: cover;
}
上面代碼寫完，就會(huì)出現(xiàn)這個(gè)效果了
背景圖片
現(xiàn)在呢，畫主體，(先畫一個(gè)框，并且在屏幕中間)
主體
視覺上的效果？用到了什么技術(shù)呢？
(1)背景顏色(透明)
(2)四個(gè)角都有弧度
(3)有陰影效果(鼠標(biāo)放在這個(gè)盒子上面，出現(xiàn)陰影)
(4)居中顯示，
那么好，知道了這些，開始寫代碼
//頁面
//css部分
.head {
margin: 50px auto;/*高度50px,居中*/
width: 400px;/*盒子長*/
height: 350px;/*盒子寬*/
border: 1px solid #999999;/*顏色為灰色的1px寬度的實(shí)線邊框(顯示盒子)*/
background-color: #333333;/*盒子的背景顏色*/
opacity: 0.5;/*透明度0為完全透明，1是不透明，*/
border-radius: 10%;/*設(shè)置圓形(4個(gè)角的弧度)*/
}
/*hover 鼠標(biāo)移動(dòng)到div上時(shí)*/
div:hover {
-webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
/*鼠標(biāo)移動(dòng)是過渡*/
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個(gè)輸入框和一個(gè)按鈕
//頁面
//required必須填寫的字段，placeholder 默認(rèn)提示信息
登錄
效果
上面的問題
(1)不是一個(gè)標(biāo)簽占一行
(2)主要問題不美觀(賊難看)
(3)怎么讓它變的美觀一些呢，看下面代碼
input {
width: 300px;
display: block;/*設(shè)置成塊級(jí)元素，獨(dú)占一行*/
margin: 30px auto;/*外邊距30px，輸入框居中*/
padding: 10px;/*設(shè)置內(nèi)邊距*/
text-align: center;/*文字居中*/
border: 1px solid #EBEBEB;/*把輸入框包起來，變成長方形*/
border-radius: 10px;/*讓長方形的4個(gè)小彎一點(diǎn)，*/
font-family: 'Source Sans Pro', sans-serif;/*字體類型*/
font-size: 18px;/*字體大小*/
//你點(diǎn)擊輸入框，會(huì)出現(xiàn)一個(gè)邊框，下面代碼是去掉原來邊框
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;/*向右浮動(dòng)*/
border: 1px solid #269ABC;/*把輸入框包起來，變成長方形*/
outline: none;/*和上面一樣*/
color: #fff;/*字體的顏色*/
background-color: #269ABC;/*背景顏色*/
}
效果
下面還是寫特效的代碼
hover 鼠標(biāo)移動(dòng)到目標(biāo)上觸發(fā)
focus 鼠標(biāo)點(diǎn)擊，獲取焦點(diǎn)時(shí)觸發(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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 人工智能的炒作_为什么人工智能被过度炒作
- 下一篇： java后台解析json并保存到数据库_