巧妙使用 CSS3 的褪色和動(dòng)畫效果制作消息提醒框_html/css_WEB-ITnose
Jun 24, 2016 am 11:29 AM
現(xiàn)代Web設(shè)計(jì)技術(shù)允許開發(fā)者快速實(shí)現(xiàn)大多數(shù)瀏覽器支持的動(dòng)畫。我想警告消息是很常見的，因?yàn)槟J(rèn)的JavaScript警告框的樣式往往（與你自己設(shè)計(jì)的漂亮樣式）很不協(xié)調(diào)很囧。這使開發(fā)者步入找出哪種解決方案能更好地實(shí)現(xiàn)更友好的用戶界面的道路。
在這個(gè)教程中我想解釋一下我們?nèi)绾文馨褞讉€(gè)將要出現(xiàn)在網(wǎng)頁(yè)上方的CSS3通知框放在一起。用戶可以點(diǎn)擊這些通知框使它們逐漸淡出消失，最終將他們從DOM中移除。作為一個(gè)有趣的附加功能，我還包括了一個(gè)按鈕，你可以點(diǎn)擊它來(lái)添加一個(gè)新的警告框到頁(yè)面頂部。你可以下載查看一下我的示例演示，以對(duì)我們將做的事情有一個(gè)更好的了解。
實(shí)際演示?–?下載源代碼
建立頁(yè)面
首先, 我們需要?jiǎng)?chuàng)建兩個(gè)文件命名為“index.html” 和 “style.css”. 我將從Google CDN上調(diào)用最新的jQuery?庫(kù). HTML是非常簡(jiǎn)單的,因?yàn)槲覀冎恍枰诰婵蚶锛尤胍恍┪谋? 所有的JavaScript代碼被加在了頁(yè)面的底部,這樣可以節(jié)省HTTP請(qǐng)求時(shí)間.
1
2
3
4
5
6
7
8
9
10
??
?? CSS3 Notification Boxes Demo title >
??
??
??
?? script >
head >
頭部代碼設(shè)置了外部調(diào)用文件和 HTML5文檔規(guī)范 . 不是很復(fù)雜因?yàn)槲覀冎皇墙⒁粋€(gè)簡(jiǎn)單的示例. 對(duì)于提示窗口我定義兩個(gè)不同的樣式 – 成功的和錯(cuò)誤的. 還有一些其它風(fēng)格的例如警告框和信息框, 但是我沒有創(chuàng)建更多的,因?yàn)槲腋P(guān)注的是效果.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
??
??
???? Success! h1 >
???? span >
???? Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry. p >
?? div >
???
??
???? Warning! h1 >
???? span >
???? You did not set the proper return e-mail address. Please fill out the fields and then submit the form. p >
?? div >
???
?? Click the error boxes to dismiss with a fading effect. p >
???
?? Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize. p >
???
??
???? New Success Box a >
???? New Alert Box a >
?? div >
div >
每個(gè)圖標(biāo)文件來(lái)自?免費(fèi)的PSD?和UI作品. 這些圖標(biāo)被我調(diào)整為適當(dāng)?shù)拇笮?如何你需要警告/信息圖標(biāo)你可以變變顏色創(chuàng)建成你自己的. 這個(gè)類名?.notify?被添加到每一個(gè)消息DIV上. 它定義了DIV的陰影和字體類型.
其它的類例如?.successbox?和?.errorbox?充許我們改變顏色和alert窗口里的細(xì)節(jié). 你可以看到在我的測(cè)試頁(yè)里加載了兩個(gè)alert窗口. 每個(gè)頁(yè)面底部的按鈕點(diǎn)擊后可以在頁(yè)上下方追加一個(gè)新的alert窗口.
CSS 盒子樣式
我不會(huì)將太多 CSS 重置的細(xì)節(jié)，那些在我之前的教程中很明了了。我創(chuàng)建了一個(gè)默認(rèn)的排版，并將內(nèi)置 #content 的div居中。這樣創(chuàng)建了一個(gè)允許jQuery在頁(yè)面最上面添加新警告元素的盒子區(qū)域。
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
/** typography **/
h 1 {
?? font-family : 'Helvetica Neue' , Helvetica , Arial , sans-serif ;
?? font-size : 2.5em ;
?? line-height : 1.5em ;
?? letter-spacing : -0.05em ;
?? margin-bottom : 20px ;
?? padding : . 1em 0 ;
?? color : #444 ;
???? position : relative ;
???? overflow : hidden ;
???? white-space : nowrap ;
???? text-align : center ;
}
h 1: before,
h 1: after {
?? content : "" ;
?? position : relative ;
?? display : inline- block ;
?? width : 50% ;
?? height : 1px ;
?? vertical-align : middle ;
?? background : #f0f0f0 ;
}
h 1: before {???
?? left : -. 5em ;
?? margin : 0 0 0 -50% ;
}
h 1: after {???
?? left : . 5em ;
?? margin : 0 -50% 0 0 ;
}
h 1 > span {
?? display : inline- block ;
?? vertical-align : middle ;
?? white-space : normal ;
}
?
p {
?? display : block ;
?? font-size : 1.35em ;
?? line-height : 1.5em ;
?? margin-bottom : 22px ;
}
?
?
/** page structure **/
#w {
?? display : block ;
?? width : 750px ;
?? margin : 0 auto ;
?? padding-top : 30px ;
}
?
#content {
?? display : block ;
?? width : 100% ;
?? background : #fff ;
?? padding : 25px 20px ;
?? padding-bottom : 35px ;
?? -webkit-box-shadow: rgba( 0 , 0 , 0 , 0.1 ) 0px 1px 2px 0px ;
?? -moz-box-shadow: rgba( 0 , 0 , 0 , 0.1 ) 0px 1px 2px 0px ;
?? box-shadow: rgba( 0 , 0 , 0 , 0.1 ) 0px 1px 2px 0px ;
}
?
.flatbtn {
?? -webkit-box-sizing: border-box;
?? -moz-box-sizing: border-box;
?? box-sizing: border-box;
?? display : inline- block ;
?? outline : 0 ;
?? border : 0 ;
?? color : #f9f8ed ;
?? text-decoration : none ;
?? background-color : #b6a742 ;
?? border-color : rgba( 0 , 0 , 0 , 0.1 ) rgba( 0 , 0 , 0 , 0.1 ) rgba( 0 , 0 , 0 , 0.25 );
?? font-size : 1.2em ;
?? font-weight : bold ;
?? padding : 12px 22px 12px 22px ;
?? line-height : normal ;
?? text-align : center ;
?? vertical-align : middle ;
?? cursor : pointer ;
?? text-transform : uppercase ;
?? text-shadow : 0 1px 0 rgba( 0 , 0 , 0 , 0.3 );
?? -webkit-border-radius: 3px ;
?? -moz-border-radius: 3px ;
?? border-radius: 3px ;
?? -webkit-box-shadow: 0 1px 0 rgba( 15 , 15 , 15 , 0.3 );
?? -moz-box-shadow: 0 1px 0 rgba( 15 , 15 , 15 , 0.3 );
?? box-shadow: 0 1px 0 rgba( 15 , 15 , 15 , 0.3 );
}
.flatbtn:hover {
?? color : #fff ;
?? background-color : #c4b237 ;
}
.flatbtn:active {
?? -webkit-box-shadow: inset 0 1px 5px rgba( 0 , 0 , 0 , 0.1 );
?? -moz-box-shadow: inset 0 1px 5px rgba( 0 , 0 , 0 , 0.1 );
?? box-shadow: inset 0 1px 5px rgba( 0 , 0 , 0 , 0.1 );
}
讓效果更醒目的網(wǎng)頁(yè)布局非常簡(jiǎn)單。任何熟悉前端網(wǎng)頁(yè)開發(fā)的人都應(yīng)該能夠?qū)⑵湟浦驳阶约旱臉邮奖碇?。我在這個(gè)扁平按鈕中使用了特殊的樣好似，并生成新的警告窗口。同樣的，我更新了每個(gè) .notify類元素的內(nèi)部樣式。
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
/** notifications **/
.notify {
?? display : block ;
?? background : #fff ;
?? padding : 12px 18px ;
?? max-width : 400px ;
?? margin : 0 auto ;
?? cursor : pointer ;
?? -webkit-border-radius: 3px ;
?? -moz-border-radius: 3px ;
?? border-radius: 3px ;
?? margin-bottom : 20px ;
?? box-shadow: rgba( 0 , 0 , 0 , 0.3 ) 0px 1px 2px 0px ;
}
?
.notify h 1 { margin-bottom : 6px ; }
?
.successbox h 1 { color : #678361 ; }
.errorbox h 1 { color : #6f423b ; }
?
.successbox h 1: before, .successbox h 1: after { background : #cad8a9 ; }
.errorbox h 1: before, .errorbox h 1: after { background : #d6b8b7 ; }
?
.notify .alerticon {
?? display : block ;
?? text-align : center ;
?? margin-bottom : 10px ;
}
我設(shè)置了一些在我的布局示例中運(yùn)行良好的默認(rèn)假設(shè)。所有消息通知窗口都被限定為 400px 寬，并通過(guò)使用 margin: 0 auto 在頁(yè)面中居中。同時(shí)，我更新了鼠標(biāo)圖標(biāo)為手指指針，這樣用戶就知道該元素可點(diǎn)擊。我們需要?jiǎng)?chuàng)建一個(gè) jQuery 事件監(jiān)聽器以用于獲取用戶對(duì)取消通知窗口的點(diǎn)擊，并運(yùn)行相應(yīng)函數(shù)。
jQuery動(dòng)畫
我的JS代碼實(shí)際執(zhí)行了兩個(gè)不同的操作。我們首先檢測(cè)包含在#content DIV中的任何現(xiàn)有.notify元素。一旦用戶點(diǎn)擊這個(gè).notify框元素，我們需要淡出這個(gè)通知盒到透明度為0%（display: none），然后從DOM中移除()此元素。
1
2
3
4
5
6
$( function (){
?? $( '#content' ).on( 'click' , '.notify' , function (){
???? $( this ).fadeOut(350, function (){
?????? $( this ).remove(); // after fadeout remove from DOM
???? });
?? });
如果你熟悉jQuery，可能首先對(duì)這個(gè)選擇器感到有些奇怪。我們并不是選擇#content這個(gè)div，而是在尋找這個(gè)內(nèi)容容器里面的任何.notify通知框。如果你查看一下jQuery的?.on()?方法文檔，你會(huì)注意到我們可以傳遞另外一個(gè)選擇器來(lái)作為第二個(gè)參數(shù)，它將在頁(yè)面被渲染后更新。 這是一個(gè)Stack Overflow里出色的帖子，它非常詳細(xì)地解釋了這個(gè)概念。
我的腳本的另一部分將會(huì)檢查用戶何時(shí)點(diǎn)擊了頁(yè)面下方的兩個(gè)按鈕之一。這兩個(gè)按鈕的ID是#newSuccessBox 和 #newAlertBox。無(wú)論用戶何時(shí)點(diǎn)擊，我們會(huì)停止加載HREF值的默認(rèn)行為，代之以創(chuàng)建一個(gè)新的HTML塊并前置在頁(yè)面上。
1
2
3
4
5
6
7
8
9
10
?? // handle the additional windows
?? $( '#newSuccessBox' ).on( 'click' , function (e){
???? e.preventDefault();
???? var samplehtml = $( '
Success!
You did not set the proper return e-mail address. Please fill out the fields and then submit the form.
?? });
?? $( '#newAlertBox' ).on( 'click' , function (e){
???? e.preventDefault();
???? var samplehtml = $( '
Warning!
You did not set the proper return e-mail address. Please fill out the fields and then submit the form.
?? });
});
每個(gè)函數(shù)都有它自己的變量，來(lái)包含一個(gè)我用于警告框的HTML的復(fù)制/粘貼鏡像。這個(gè)HTML內(nèi)容存儲(chǔ)在一個(gè)字符串中用jQuery選擇器轉(zhuǎn)化為一個(gè)對(duì)象。我可以使用prependTo()方法選擇這個(gè)內(nèi)容DIV使新的警告框出現(xiàn)在頁(yè)面的最上方。所有新的盒子也可以同樣的方式被解除，因?yàn)樗鼈兊腍TML代碼和用靜態(tài)HTML硬編碼的盒子完全相同。
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Implementing Clickable Buttons Using the HTML button Element
Jul 07, 2025 am 02:31 AM
To use HTML button elements to achieve clickable buttons, you must first master its basic usage and common precautions. 1. Create buttons with tags and define behaviors through type attributes (such as button, submit, reset), which is submitted by default; 2. Add interactive functions through JavaScript, which can be written inline or bind event listeners through ID to improve maintenance; 3. Use CSS to customize styles, including background color, border, rounded corners and hover/active status effects to enhance user experience; 4. Pay attention to common problems: make sure that the disabled attribute is not enabled, JS events are correctly bound, layout occlusion, and use the help of developer tools to troubleshoot exceptions. Master this
Configuring Document Metadata Within the HTML head Element
Jul 09, 2025 am 02:30 AM
Metadata in HTMLhead is crucial for SEO, social sharing, and browser behavior. 1. Set the page title and description, use and keep it concise and unique; 2. Add OpenGraph and Twitter card information to optimize social sharing effects, pay attention to the image size and use debugging tools to test; 3. Define the character set and viewport settings to ensure multi-language support is adapted to the mobile terminal; 4. Optional tags such as author copyright, robots control and canonical prevent duplicate content should also be configured reasonably.
Best HTML tutorial for beginners in 2025
Jul 08, 2025 am 12:25 AM
TolearnHTMLin2025,chooseatutorialthatbalanceshands-onpracticewithmodernstandardsandintegratesCSSandJavaScriptbasics.1.Prioritizehands-onlearningwithstep-by-stepprojectslikebuildingapersonalprofileorbloglayout.2.EnsureitcoversmodernHTMLelementssuchas,
HTML for email templates tutorial
Jul 10, 2025 pm 02:01 PM
How to make HTML mail templates with good compatibility? First, you need to build a structure with tables to avoid using div flex or grid layout; secondly, all styles must be inlined and cannot rely on external CSS; then the picture should be added with alt description and use a public URL, and the buttons should be simulated with a table or td with background color; finally, you must test and adjust the details on multiple clients.
How to associate captions with images or media using the html figure and figcaption elements?
Jul 07, 2025 am 02:30 AM
Using HTML sums allows for intuitive and semantic clarity to add caption text to images or media. 1. Used to wrap independent media content, such as pictures, videos or code blocks; 2. It is placed as its explanatory text, and can be located above or below the media; 3. They not only improve the clarity of the page structure, but also enhance accessibility and SEO effect; 4. When using it, you should pay attention to avoid abuse, and apply to content that needs to be emphasized and accompanied by description, rather than ordinary decorative pictures; 5. The alt attribute that cannot be ignored, which is different from figcaption; 6. The figcaption is flexible and can be placed at the top or bottom of the figure as needed. Using these two tags correctly helps to build semantic and easy to understand web content.
How to handle forms submission in HTML without a server?
Jul 09, 2025 am 01:14 AM
When there is no backend server, HTML form submission can still be processed through front-end technology or third-party services. Specific methods include: 1. Use JavaScript to intercept form submissions to achieve input verification and user feedback, but the data will not be persisted; 2. Use third-party serverless form services such as Formspree to collect data and provide email notification and redirection functions; 3. Use localStorage to store temporary client data, which is suitable for saving user preferences or managing single-page application status, but is not suitable for long-term storage of sensitive information.
What are the most commonly used global attributes in html?
Jul 10, 2025 am 10:58 AM
class, id, style, data-, and title are the most commonly used global attributes in HTML. class is used to specify one or more class names to facilitate style setting and JavaScript operations; id provides unique identifiers for elements, suitable for anchor jumps and JavaScript control; style allows for inline styles to be added, suitable for temporary debugging but not recommended for large-scale use; data-properties are used to store custom data, which is convenient for front-end and back-end interaction; title is used to add mouseover prompts, but its style and behavior are limited by the browser. Reasonable selection of these attributes can improve development efficiency and user experience.
Implementing Native Lazy Loading for Images in HTML
Jul 12, 2025 am 12:48 AM
Native lazy loading is a built-in browser function that enables lazy loading of pictures by adding loading="lazy" attribute to the tag. 1. It does not require JavaScript or third-party libraries, and is used directly in HTML; 2. It is suitable for pictures that are not displayed on the first screen below the page, picture gallery scrolling add-ons and large picture resources; 3. It is not suitable for pictures with first screen or display:none; 4. When using it, a suitable placeholder should be set to avoid layout jitter; 5. It should optimize responsive image loading in combination with srcset and sizes attributes; 6. Compatibility issues need to be considered. Some old browsers do not support it. They can be used through feature detection and combined with JavaScript solutions.
