Table of Contents
 建立页面
 CSS 盒子样式
 jQuery动画
Success!
Warning!
Home Web Front-end HTML Tutorial 巧妙使用 CSS3 的褪色和动画效果制作消息提醒框_html/css_WEB-ITnose

巧妙使用 CSS3 的褪色和动画效果制作消息提醒框_html/css_WEB-ITnose

Jun 24, 2016 am 11:29 AM

 现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的,因为默认的JavaScript警告框的样式往往(与你自己设计的漂亮样式)很不协调很囧。这使开发者步入找出哪种解决方案能更好地实现更友好的用户界面的道路。

  在这个教程中我想解释一下我们如何能把几个将要出现在网页上方的CSS3通知框放在一起。用户可以点击这些通知框使它们逐渐淡出消失,最终将他们从DOM中移除。作为一个有趣的附加功能,我还包括了一个按钮,你可以点击它来添加一个新的警告框到页面顶部。你可以下载查看一下我的示例演示,以对我们将做的事情有一个更好的了解。

实际演示 – 下载源代码

 建立页面

  首先, 我们需要创建两个文件命名为“index.html” 和 “style.css”. 我将从Google CDN上调用最新的jQuery 库. HTML是非常简单的,因为我们只需要在警告框里加入一些文本. 所有的JavaScript代码被加在了页面的底部,这样可以节省HTTP请求时间.

1

2

3

4

5

6

7

8

9

10

  

   CSS3 Notification Boxes Demo title >

  

  

  

   script >

head >

  头部代码设置了外部调用文件和 HTML5文档规范 . 不是很复杂因为我们只是建立一个简单的示例. 对于提示窗口我定义两个不同的样式 – 成功的和错误的. 还有一些其它风格的例如警告框和信息框, 但是我没有创建更多的,因为我更关注的是效果.

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 >

  每个图标文件来自 免费的PSD 和UI作品. 这些图标被我调整为适当的大小.如何你需要警告/信息图标你可以变变颜色创建成你自己的. 这个类名 .notify 被添加到每一个消息DIV上. 它定义了DIV的阴影和字体类型.

  其它的类例如 .successbox 和 .errorbox 充许我们改变颜色和alert窗口里的细节. 你可以看到在我的测试页里加载了两个alert窗口. 每个页面底部的按钮点击后可以在页上下方追加一个新的alert窗口.

 CSS 盒子样式

  我不会将太多 CSS 重置的细节,那些在我之前的教程中很明了了。我创建了一个默认的排版,并将内置 #content 的div居中。这样创建了一个允许jQuery在页面最上面添加新警告元素的盒子区域。

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 );

}

让效果更醒目的网页布局非常简单。任何熟悉前端网页开发的人都应该能够将其移植到自己的样式表中。我在这个扁平按钮中使用了特殊的样好似,并生成新的警告窗口。同样的,我更新了每个 .notify类元素的内部样式。

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 ;

}

  我设置了一些在我的布局示例中运行良好的默认假设。所有消息通知窗口都被限定为 400px 宽,并通过使用 margin: 0 auto 在页面中居中。同时,我更新了鼠标图标为手指指针,这样用户就知道该元素可点击。我们需要创建一个 jQuery 事件监听器以用于获取用户对取消通知窗口的点击,并运行相应函数。

 jQuery动画

  我的JS代码实际执行了两个不同的操作。我们首先检测包含在#content DIV中的任何现有.notify元素。一旦用户点击这个.notify框元素,我们需要淡出这个通知盒到透明度为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,可能首先对这个选择器感到有些奇怪。我们并不是选择#content这个div,而是在寻找这个内容容器里面的任何.notify通知框。如果你查看一下jQuery的 .on() 方法文档,你会注意到我们可以传递另外一个选择器来作为第二个参数,它将在页面被渲染后更新。 这是一个Stack Overflow里出色的帖子,它非常详细地解释了这个概念。

  我的脚本的另一部分将会检查用户何时点击了页面下方的两个按钮之一。这两个按钮的ID是#newSuccessBox 和 #newAlertBox。无论用户何时点击,我们会停止加载HREF值的默认行为,代之以创建一个新的HTML块并前置在页面上。

1

2

3

4

5

6

7

8

9

10

   // handle the additional windows

   $( '#newSuccessBox' ).on( 'click' , function (e){

     e.preventDefault();

     var samplehtml = $( '

Success!

checkmark

You did not set the proper return e-mail address. Please fill out the fields and then submit the form.

' ).prependTo( '#content' );

   });

   $( '#newAlertBox' ).on( 'click' , function (e){

     e.preventDefault();

     var samplehtml = $( '

Warning!

error

You did not set the proper return e-mail address. Please fill out the fields and then submit the form.

' ).prependTo( '#content' );

   });

});

  每个函数都有它自己的变量,来包含一个我用于警告框的HTML的复制/粘贴镜像。这个HTML内容存储在一个字符串中用jQuery选择器转化为一个对象。我可以使用prependTo()方法选择这个内容DIV使新的警告框出现在页面的最上方。所有新的盒子也可以同样的方式被解除,因为它们的HTML代码和用静态HTML硬编码的盒子完全相同。

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1670
14
PHP Tutorial
1274
29
C# Tutorial
1256
24
HTML: The Structure, CSS: The Style, JavaScript: The Behavior HTML: The Structure, CSS: The Style, JavaScript: The Behavior Apr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML, CSS, and JavaScript: Web Development Trends The Future of HTML, CSS, and JavaScript: Web Development Trends Apr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

The Future of HTML: Evolution and Trends in Web Design The Future of HTML: Evolution and Trends in Web Design Apr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML: Building the Structure of Web Pages HTML: Building the Structure of Web Pages Apr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

HTML vs. CSS vs. JavaScript: A Comparative Overview HTML vs. CSS vs. JavaScript: A Comparative Overview Apr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML vs. CSS and JavaScript: Comparing Web Technologies HTML vs. CSS and JavaScript: Comparing Web Technologies Apr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML: Is It a Programming Language or Something Else? HTML: Is It a Programming Language or Something Else? Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

What is the difference between <strong>, <b> tags and <em>, <i> tags? What is the difference between <strong>, <b> tags and <em>, <i> tags? Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

See all articles