秒速赛车打不开

您的位置:首頁> 實例代碼> CSS3實例

CSS鼠標懸浮圖片模糊切換效果

2018-4-25 09:20|作者: antzone|查看: 15611|評論: 0|來自: 螞蟻部落

FENXIANGYIDUANDAIMASHILI,TASHIXIANLETUPIANDEMOHUXIAOGUO。

MORENZHUANGTAIXIA,TUPIANSHIMOHUDE,DANGSHUBIAOXUANFUNEIMETUPIANHUIHUIFUZHENGCHANGZHUANGTAI。

DAIMASHILIRUXIA:

[HTML] 純文本查看 復制代碼运行代码
<!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://glbcf.cn/" /><title>螞蟻部落</title><style type="text/css">body, html {  margin: 0;  padding: 0;  width: 100%;  height: 100%;}.container {  padding: 20px;  position: relative;  overflow: hidden;}img {  height: 200px;  transition: .5s ease-in-out;}.container div {  width: 300px;  overflow: hidden;  float: left;  margin-left: 40px;}.blur img {  filter: blur(5px);  -webkit-filter: blur(5px);}.blur img:hover {  filter: blur(0);  -webkit-filter: blur(0);}</style></head><body><div class="blur container">  <div>    <img src="demo/CSS/img/gamesky.jpg" />  </div></div></body></html>

秒速赛车打不开SHANGMIANDEDAIMASHIXIANLEWOMENDEYAOQIU,GENGDUONEIRONGKEYICANYUEXIANGGUANYUEDU。

相關閱讀:

(1).transition可以參閱CSS3 transition一章節。

(2).filter可以參閱css3 filter屬性一章節。


鮮花
1

握手

雷人

路過

雞蛋

剛表態過的朋友 (1 人)

最新評論

返回頂部