整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
除的元素
1、能用css代替的元素
basefont、big、center、font、s、strike、tt、u。這些元素純粹是為畫面展示服務(wù)的，HTML5中提倡把畫面展示性功能放在css中統(tǒng)一編輯。
2、不再使用frame框架。
frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服務(wù)器方創(chuàng)建的由多個頁面組成的符合頁面的形式，
刪除以上這三個標簽。
3、只有部分瀏覽器支持的元素
applet、bgsound、blink、marquee等標簽。
4、其他被廢除的元素
廢除rb, 使用ruby替代。
廢除acronym使用abbr替代。
廢除dir使用ul替代。
廢除isindex使用form與input相結(jié)合的方式替代
廢除listing使用pre替代
廢除xmp使用code替代
廢除nextid使用guids
廢除plaintex使用“text/plian”（無格式正文）MIME類型替代。
SS偽元素主要是指HTML中沒有定義、存在的元素，偽元素本身不是真正的頁面元素，但是偽元素在使用過程中，其用法與效果與其他真正頁面元素是一樣的。偽元素只能在定義基礎(chǔ)上動態(tài)顯示其運行效果，在HTML源文件中并沒有該元素的真正代碼。CSS3中所定義的所有偽元素與偽類描述如下圖所示：
CSS偽元素與偽類
ripple波紋
按鈕的波紋效果主要是指按鈕在點擊時展示出的動態(tài)效果。在實現(xiàn)效果過程中可行的方法方式較多，例如可以使用JavaScript、CSS動畫、JQuery等。網(wǎng)上目前按鈕波紋實現(xiàn)效果較多，部分樣式效果展示如下：
波紋效果展示
CSS偽類波紋效果主要借助于before、after偽類與hover懸停選擇器等實現(xiàn)類似波紋效果，本文主要借助after及hover等實現(xiàn)按鈕的波紋效果，本例設(shè)計兩種類似波紋效果，最終實現(xiàn)效果展示如下圖所示：
設(shè)計樣式1
設(shè)計樣式2
本文設(shè)計實現(xiàn)的兩類波紋效果樣式描述如上圖gif所示，其實現(xiàn)過程描述如下：
1、按鈕基本樣式設(shè)計
本例按鈕基本樣式主要包括寬度、高度、背景顏色等。使用元素選擇器與類選擇器定義了按鈕元素的基本樣式，其樣式實現(xiàn)代碼描述如下：
button,.button2,.button{width: 200px; height: 50px; background-color: green;border: 0; cursor: pointer;color: #FFF; font-size: 16px; position: relative;}
.button類主要用以實現(xiàn)設(shè)計樣式1，.button2類主要用于實現(xiàn)設(shè)計效果2，兩類按鈕定義描述如下：
<button type="button" class="button">Ripple1</button> <button type="button" class="button2">Ripple2</button>
2、after偽元素使用
after偽元素主要用于實現(xiàn)在指定元素的后面添加新的內(nèi)容。本例提供的兩種設(shè)計方式都是在button元素的后面添加新的類似div的新元素，其中樣式1，新添加的元素與button本身重合，尺寸也一致。設(shè)計樣式2中after元素位于button的底部位置，寬度與button相同，高度為指定尺寸5px。兩個設(shè)計中after元素樣式為實現(xiàn)動態(tài)展開效果都涉及寬度width為0。after元素的樣式定義如下：
.button::after{content: " "; width: 0; height: 50px; position: absolute; left:50%;top: 0%;background-color: red;opacity: 0; transition: all .4s; }
.button2::after{content: " "; width: 0; height: 5px; position: absolute; left:50%;top: 100%;background-color: red;transition: all .4s; }
after元素CSS樣式定義中使用了transition屬性實現(xiàn)動畫效果，即在0.4s內(nèi)實現(xiàn)寬度從0改變?yōu)?00%。
3、hover選擇器的使用
hover選擇器為懸停選擇器，主要對鼠標在HTML元素懸停時樣式進行設(shè)置。本例兩個涉及效果都是借助hover懸停選擇器對after樣式進行設(shè)置，在初始化設(shè)置寬度為0的基礎(chǔ)上寬度改變?yōu)?00%，最終實現(xiàn)兩端伸展的效果。hover選擇器定義after元素樣式描述如下所示：
.button:hover::after{left:0%; width: 100%; opacity: 0.6;}
.button2:hover::after{left:0%; width: 100%;}
以上給出了CSS偽元素實現(xiàn)波紋效果，主要借助了after、before偽元素與hover懸停選擇器等。設(shè)計實現(xiàn)效果完整源文件截圖如下：
案例完整代碼
以上給出了JavaScript中的事件基本概念及案例分析，如有問題可在評論區(qū)討論。本頭條號長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！相關(guān)文章鏈接如下：
前端開發(fā)-JavaScript中的事件（Event）及事件處理總結(jié)
前端開發(fā)-CSS3動畫實現(xiàn)焦點(圖文輪播)圖效果
前端開發(fā)-JavaScript DOM動態(tài)生成文本框
前端設(shè)計-教你如何快速繪制HTML5動畫
前端設(shè)計-響應(yīng)式頁面開發(fā)基礎(chǔ)
前端設(shè)計-Ajax技術(shù)及實例展示
TML5本身并不支持倒影效果，但可以通過CSS3中的屬性來實現(xiàn)。具體步驟如下：
以下是示例代碼：
<div class="container">
<img src="image.jpg" alt="Image">
</div>.container {
position: relative;
width: 500px;
height: 300px;
}
.container img {
position: absolute;
bottom: 0;
transform: scaleY(-1);
opacity: 0.5;
}
.container img:before {
content: "";
position: absolute;
z-index: -1;
bottom: 100%;
left: 0;
right: 0;
height: 100px;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
}在上面的示例代碼中，使用了:before偽元素來創(chuàng)建漸變效果，從而實現(xiàn)倒影效果。其中l(wèi)inear-gradient屬性用于創(chuàng)建漸變，rgba(255, 255, 255, 0)表示透明的白色，rgba(255, 255, 255, 0.5)表示半透明的白色。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
