Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 5: CSS3
Outline
1. Introduction
2. Selector
3. Create Rounded Corners
4. Drop Shadow
5. Create Gradient Buttons
6. Multiple background images
7. Multi-Column Layout
8. Tranform
9. Transition
10.Animation
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 5: CSS3", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
Tóm tắt nội dung tài liệu: Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 5: CSS3
![Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 5: CSS3 Bài giảng Phát triển ứng dụng Web. Web Programming - Chương 5: CSS3](https://s1.tailieubachkhoa.net/rl6k7x3q9zfh00j8/thumb/2021/11/25/bai-giang-phat-trien-ung-dung-web-web-programming-chuong-5-c_ueVdliMTF8.jpg)
1Phát triển ứng dụng Web (COMP1027) CSS3 GV: Lương Trần Hy Hiến, Khoa CNTT, ĐH Sư phạm TpHCM Outline 1. Introduction 2. Selector 3. Create Rounded Corners 4. Drop Shadow 5. Create Gradient Buttons 6. Multiple background images 7. Multi-Column Layout 8. Tranform 9. Transition 10.Animation 3HTML5/CSS3 Introduction CSS3 Cascading Style Sheets • Developed to enable the separation of document content from document presentation • Initial release in 1996 (CSS1) • CSS2 published as a recommendation in May 1998 • CSS2.1 goes to candidate recommendation status – July 19 2007 • CSS Level 3 under development since Dec 15, 2005 (W3C CSS3 Progress Report) CSS3 FYI • CSS3 is still under development • Modules: A new approach to standardization • Each browser still implementing slightly different syntax for certain properties: – moz – ; //Firefox – webkit – ; //Chrome, Safari (webkit) Opera (in most cases) uses the default with no prefix but in some cases you will see – o – ; 6HTML5/CSS3 CSS3 Selector ELEMENT SELECTORS • * • UL • UL LI • UL > LI • UL + LI • UL ~ LI • #id • UL[foo] • UL[foo="bar"] • UL[foo^="bar"] • UL[foo$="bar"] • UL[foo*="bar"] • UL[foo~="bar"] • UL[foo|="en"] • UL:not(s) • A:link • A:visited • A:active • UL:empty • UL:hover • UL:focus • UL:target • UL:enabled • UL:disabled • UL:checked • UL.warning UL:nth-child(n) UL:nth-last-child(n) UL:nth-of-type(n) UL:nth-last-of-type(n) UL:first-child UL:last-child UL:only-child UL:first-of-type UL:last-of-type UL:only-of-type UL::before UL::after UL::first-line UL::first-letter Các ký hiệu thường dùng • *: Áp dụng cho tất cả * { margin: 0; padding: 0; } • #: Áp dụng cho đối tượng có ID • .name: Áp dụng cho đối tượng có class • X Y: áp dụng cho đối tượng Y nằm trong đối tượng X • X > Y: chỉ rõ con trực tiếp 8 new selectors :root :nth-child :nth-last-child :nth-of-type :nth-last-of-type ::first-line ::first-letter :first-child :last-child :only-child :first-of-type :last-of-type :empty :not not • X:not(selector): áp dụng cho X, ngoại trừ selector div:not(#container) { color: blue; } *:not(p) { color: green; } 10 X::pseudoElement • Ví dụ: p::first-line { font-weight: bold; font-size: 1.2em; } • Áp dụng cho dòng đầu tiên • Tương tự cho ::first-letter 11 X:nth-child(n) • Ví dụ: li:nth-child(3) { color: red; } • Áp dụng cho con thẻ li thứ 3 trong danh sách. • Demo: Bảng có dòng chẵn lẻ CSS khác nhau 12 X:nth-last-child(n) • Ví dụ: li:nth-last-child(2) { color: red; } 13 X:nth-of-type(n) ul:nth-of-type(3) { border: 1px solid black; } • Áp dụng cho thẻ ul thứ 3 • Tương tự cho X:nth-last-of-type(n) 14 first-child, last-child • X:first-child ul li:first-child { border-top: none; } • X:last-child 15 X:only-child • Áp dụng cho đối tượng X có duy nhất 1 con • Ví dụ: div p:only-child { color: red; } 16 X:only-of-type • Ví dụ: li:only-of-type { font-weight: bold; } • Áp dụng cho đúng một đối tượng X duy nhất • Tương tự cho X:first-of-type 17 Vấn đề khác trong Form E[attr*=val]: áp dụng cho thẻ E thuộc tính attr bằng val form input[type="text"] { border: 1px solid #333; padding: 0.2em; width: 400px; } form .button { border: 1px solid #333; background-color: #eee; color: #000; padding: 0.1em; } 18 19 HTML5/CSS3 CSS3 Rounded Corners Create Rounded Corners x = horizontal radius [ | ] y = vertical radius [ | ] border-top-left radius: x y; border-top-right-radius: x y; border-bottom-left-radius: x y; border-bottom-right-radius: 0; border -*-*-radius: [x] [y]? Create Rounded Corners border-radius: [x] {1,4} [ / [y] {1,4} ]? border-radius: 5px 10px 10px 10px / 10px 10px 5px 5px; border-radius: 5px 10px / 10px; border radius: 10px; Create Rounded Corners W3C Specification Mozilla Implementation border-radius -moz-border-radius border-top-left-radius -moz-border-radius-topleft border-top-right-radius -moz-border-radius-topright border-bottom-right-radius -moz-border-radius-bottomright border-bottom-left-radius -moz-border-radius-bottomleft Safari and Chrome: V3.0: use -webkit- prefix CSS3 Rounded Corners - Recap • Makes creating rounded divs a breeze • No Internet Explorer support but it degrades gracefully • Markup: .div2 { width:300px; height:300px; border: 3px solid #000; background:#cc0000; border-radius:30px; -moz-border-radius:30px; //Prefix to make this work in Firefox -webkit-border-radius:30px; //Prefix to make this work in webkit browsers } 24 HTML5/CSS3 CSS3 Shadow CSS3 Shadows - Recap • Once again no IE support • Format: box-shadow: h-shadow v-shadow blur spread color inset; • h-shadow == Position of horizontal shadow • v-shadow == Position of vertical shadow • Blur == Blur distance • Spread == Size of shadow • Color == Shadow Color • Inset == Make the shadow an inner (shadow) CSS3 Shadows box-shadow: x y b color Examples: -webkit-box-shadow: -3px 3px 3px #999999; -moz-box-shadow: -3px 3px 3px #999999; text-shadow: -4px 4px 3px #999999; Text Shadow • Can be added outside the graphic • No IE support • Format: text-shadow: x y b color • x = horizontal offset x < 0: left of the text x > 0: right of the text • y = vertical offset y < 0: above the text y > 0: below the text • b = blur radius CSS3 Text Effects • text-shadow – text-shadow: x y b color – text-shadow: 5px 5px 5px #FF0000; • word-wrap: normal/break-word 28 Text Overflow • Supported in Internet Explorer (+ other browsers) • Example overflow:visible overflow:hidden Text Overflow - Recap • Format: text-overflow: clip | ellipsis | string; • Also requires the whitespace:nowrap; & overflow:hidden properties to be set. • Sample Markup: #div1 { width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } Word Wrap • Force a line break even with a long word • Format: word-wrap: break-word|normal; 32 HTML5/CSS3 CSS3 Border and Background CSS3 Border Images • You can now specify an image to be used as part of the border property. • Example CSS3 Border Images - Recap • Format: border-image: source slice width outset repeat; • Markup: border-image: url(borderbg.jpg) 30 30 repeat; -webkit-border-image: url(borderbg.jpg) 30 30 repeat; -moz-border-image: url(borderbg.jpg) 30 30 repeat; BORDERS AND BACKGROUNDS • Round Corners border-radius: 4em; border-top-left-radius: 4em; border-top-right-radius: 4em; border-bottom-right-radius: 4em; border-bottom-left-radius: 4em; • Eliptical Corners Border Image border-image: url("border.png") 27 round stretch; border-image: url(border.png) 27 27 27 27 stretch stretch; CSS3 Backgrounds • Format: background-size: length | percentage | cover | contain; • Sample Markup: background-size: 400px 500px; //width, height background-size:30% 40%; //width, height background-size:100%; //Omitting first value sets //the second to auto background-size:cover; background-size:contain; Multiple background images background: , , , ; OR background-image: , , , ; background-repeat: , , ,; background-position: , , ,; /* plus any background attachment and/or box properties as needed */ #example { width: 500px; height: 250px; background-image: url(decoration.png), url(ribbon.png), url(old_paper.jpg); background-repeat: no-repeat; background-position: left top, right bottom, left top; } 39 HTML5/CSS3 CSS3 Multi-Column Layout Multi-Column Layout #multi-column { /* For Mozilla: */ -moz-column-width: 13em; -moz-column-gap: 1em; /* For WebKit: */ -webkit-column-width: 13em; -webkit-column-gap: 1em; } Multi-Column Layout #multi-column { -moz-column-count: 3; -moz-column-gap: 1em; -moz-column-rule: 1px solid black; -webkit-column-count: 3; -webkit-column-gap: 1em; -webkit-column-rule: 1px solid black; } 42 HTML5/CSS3 CSS3 Font CSS3 Font Faces • Allows you to use non-standard fonts • Mixed support for otf, ttf, svg and eot • Internet Explorer only supports EOT • Mozilla browsers support OTF and TTF • Safari and Opera support OTF, TTF and SVG • Chrome supports TTF and SVG. CSS3 Fonts • @font-face: – hỗ trợ hầu hết các trình duyệt – Định nghĩa font mới (kèm file) • VD: – @font-face { font-family: myFirstFont; src: url(sansation_light.woff); /*định nghĩa thêm cho font nếu có*/ } div { font-family: myFirstFont; } 44 font-stretch normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded font-style normal italic oblique font-weight normal bold 100 200 300 400 500 600 700 800 900 45 HTML5/CSS3 CSS3 Gradient Buttons Create Gradient Buttons • rgba(r, g, b, opacity) • background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(255,255,255,1)),to(rgba(185,185,185,1))); • background:-moz-linear- gradient(top,rgba(255,255,255,1), rgba(185,185,185,1)); CSS3 transforms Trình duyệt hỗ trợ CSS 2D Transforms CSS 2D transforms • Có 2 thuộc tính mới: transform transform-origin • Ví dụ sử dụng thuộc tính - rotation div { width:200px; height:100px; background-color:red; transform:rotate(-15deg); -moz-transform:rotate(-15deg); /* Firefox */ -webkit-transform:rotate(-15deg); /* Chrome, Safari */ -ms-transform:rotate(-15deg); /* IE9 */ -o-transform:rotate(-15deg); /* Opera */ } Hello CSS3 Transform • transform: transform-function; • Transform-function có thể là: – Dịch chuyển vị trí (translate) – Xoay theo góc (rotate) – Bóp méo (skew) – Co giản (Chuyển đổi kích thước) theo tỉ lệ (scale) CSS 2D transformation function rotate() - specifies rotation by the angle given translateX() specifies a translation by the given amount in the X direction translateY() specifies a translation by the given amount in the Y direction translate([, ]) - specifies translation by the vector [trX,trY]; if tY is not given, zero is used scale([, ]) - specifies scaling by the [sx,sy] scaling vector; if second parameter not given, a value equal to the first is used scaleX() - specifies by the [sx,1] scaling vector scaleY() - specifies by the [1,sY] scaling vector skewX() - specifies skewing along X axis by given angle skewY() - specifies skewing along Y axis by given angle matrix(, , , , , ) - specifies application of the transformation matrix [n1,n2,n3,n4,n5,n6] Tham khảo: Ví dụ CSS 2D transformations div { width:200px; height:100px; background-color:red; transform:rotate(-15deg) translateX(300px); -moz-transform:rotate(-15deg) translateX(300px); -webkit-transform:rotate(-15deg) translateX(300px); -ms-transform:rotate(-15deg) translateX(300px); -o-transform:rotate(-15deg) translateX(300px); } Hello Ví dụ sử dụng thuộc tính transform-origin div { width:200px; height:100px; background-color:red; transform:rotate(-15deg); -moz-transform:rotate(-15deg);-webkit-transform:rotate(- 15deg); -ms-transform:rotate(-15deg);-o-transform:rotate(-15deg); } This is a paragraphHello div { width:200px; height:100px; background-color:red; transform-origin:top left; -moz-transform-origin:top left;-webkit-transform-origin:top left; -ms-transform-origin:top left; -o-transform-origin:top left; transform:rotate(-15deg); -moz-transform:rotate(-15deg);-webkit-transform:rotate(- 15deg); -ms-transform:rotate(-15deg);-o-transform:rotate(-15deg); } This is a paragraphHello Trình duyệt hỗ trợ CSS 3D Transforms • • 3D CSS transforms tương tự như 2D CSS transforms. Các thuộc tính cơ bản translate3d, scale3d, rotateX, rotateY và rotateZ. translate3d và scale3d cần 3 tham số x,y and z; còn rotate cần góc. Exercise CSS3 3D Transform • • #cube3d • CSS Transitions CSS transitions • Tạo hoạt hình cho một thuộc tính nào đó. • Cú pháp: transition: ‘transition-property’ ‘transition-duration’ ‘transition-timing-function’ ‘transition-delay’; • Dạng shorthand của các thuộc tính như: – transition-property: thuộc tính sẽ áp dụng – transition-duration: thời gian hoàn thành hiệu ứng tính bằng milliseconds – transition-timing-function: xác định kiểu thời gian thực hiện hiệu ứng bao gồm một số giá trị như linear, ease, ease-in, ease-out, ease-in-out, và cubic-bezier(n,n,n,n) kiểu thời gian tùy chỉnh với n nhận giá trị từ 0 - 1 – transition-delay: thời gian dừng trước khi bắt đầu hiệu ứng tính bằng milliseconds. Tham khảo: VD CSS phản hồi người dùng • Chuyển đổi style của khối div khi người dùng hơ chuột vào nó. div { width:200px; background-color:pink; font- size:10 } div:hover { width:400px; background-color:yellow; font-size:100 } This is a paragraph. Hello Gradual change in response to user actions (contd.) • The stylesheet below will cause a gradual transition in style for the div element when the user holds his mouse over it div { width:200px; height:180px; background-color:pink; font-size:10; transition-property: width, background-color, font-size; transition-duration: 15s, 15s, 15s; -moz-transition-property: width, font-size;-moz-transition-duration: 15s, 15s, 15s; -ms-transition-property: width, font-size;-ms-transition-duration: 15s, 15s, 15s; -webkit-transition-property: width, font-size;-webkit-transition-duration: 15s, 15s, 15s; -o-transition-property: width, font-size;-o-transition-duration: 15s, 15s, 15s; } div:hover { width:400px; background-color:yellow; font-size:100 } This is a paragraph.Hello Transition-property Property name Type background-color Color background-image only gradients background-position percentage, length border-bottom-color color border-bottom-width Length border-color Color border-left-color Color border-left-width Length border-right-color Color border-right-width Length border-spacing Length border-top-color Color border-top-width Length border-width Length Transition-property (cont) Property name Type Bottom length, percentage color Color crop rectangle font-size length, percentage font-weight number height length, percentage left length, percentage letter-spacing length line-height number, length, percentage margin-bottom, margin-left, margin-right, margin-top length max-height length, percentage max-width length, percentage Transition-property (cont) Property name Type min-height length, percentage min-width length, percentage opacity number outline-color color outline-offset integer outline-width Length padding-bottom Length padding-left Length padding-right Length padding-top Length right length, percentage text-indent length, percentage text-shadow shadow Transition-property (cont) Property name Type top length, percentage vertical-align keywords, length, percentage visibility visibility width length, percentage word-spacing length, percentage z-index integer Zoom number Varying transition speed • Normally, the speed of a transition is uniform between the start and finish of the transition • Using the transition-timing-function property, we can vary the speed • Browser implementations of this property still have vendor-specific prefixes transition-timing-function:; -moz-transition-timing-functi ... ated element is hidden, becomes visible at 1% and is hidden again at 41% @-moz-keyframes dingding { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); visibility:visible; } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); visibility:hidden; } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } Reminder: the CSS positioning properties • The position property specifies how the appropriate locations for elements should be computed. – There are five possible values • static - this is the default; a statically positioned element is placed according to its arrival in the flow of material onto the page • fixed - an element with fixed position is placed relative to the browser window; It will not move even if the window is scrolled; It is removed from the normal flow; Other elements are placed as if the fixed positioned element does not exist, so it can overlap other elements • relative - A relatively positioned element is moved relative to its normal position in the flow of material onto the page (so it can overlap other elements) but the space reserved for the element in the normal flow is still preserved • absolute - An absolutely positioned element is placed relative to the first parent element that has a position other than static; if no such element is found, the containing block is ; it is removed from the normal flow; other elements are placed as if the absolutely positioned element does not exist, so it can overlap other elements • inherit - an element whose position is inherited gets the same location as its parent • Elements are located using the top, bottom, left, and right properties, but these properties will not work unless the position property is set first and the way these properties work depends on the value of the position property • When an element is placed outside the normal flow, it can overlap other elements, in which case the z-index property can be used to specify how the overlapping elements should be stacked on the page animation-direction property • In the next few slides, we will contrast these two web- pages in a Mozilla browser (example 1) (example 2) • The default value for animation-direction is normal which means that the animation should be played as specified in the keyframes • If the value alternate is used for the property, the animation should play in reverse on alternate cycles animation-direction property, example 1 • In this page, the position, left and top properties are used to animate the location of the div element • The blue div always moves clockwise - see the 5th and 6th images here div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; } @-moz-keyframes rove {0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;} 100% {left:0px; top:0px;} } Hello animation-direction property, example 2 • In this page, the div alternates between moving clockwise in one cycle and counter-clockwise on the next cycle - see the 5th and 6th images here div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; } @-moz-keyframes rove {0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;} 100% {left:0px; top:0px;} } Hello animation-delay property • In this page, the animation of the div element will not start until 40 seconds after the page is loaded div {width:100px; height:100px; background:blue; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; -moz-animation-direction:alternate; -moz-animation-delay:40s; } @-moz-keyframes rove {0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;} 100% {left:0px; top:0px;} } Hello Animating with the z-index property • In the next few slides, we will contrast these two web- pages in a Mozilla browser (example 1) (example 2) Animating with the z-index property, example 1 • In this page, the first (blue) div is continuously animated clockwise while the second (red) div is statically located • When the blue div overlaps the red div it appears on top div { width:100px; height:100px; background:red;color:white; } div.rover {width:100px; height:100px; background:blue;color:white; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; } @-moz-keyframes rove { 0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;}100% {left:0px; top:0px;} } Hello Goodbye Animating with the z-index property, example 2 • Again, the first (blue) div is continuously animated clockwise while the second (red) div is statically located • But this time, the roving div is given a z-index of -1 to make it go behind the static div when they overlap div { width:100px; height:100px; background:red;color:white; } div.rover {width:100px; height:100px; background:blue;color:white; z-index:-1; position:relative; -moz-animation-name:rove; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; } @-moz-keyframes rove { 0% {left:0px; top:0px;} 25% {left:200px; top:0px;} 50% {left:200px; top:200px;} 75% {left:0px; top:200px;}100% {left:0px; top:0px;} } Hello Goodbye The animation property • The animation property is a shorthand for (subsets of) six of the animating properties: animation-name, animation-duration, animation-timing- function, animation-delay, animation-iteration-count, animation-direction • Example animation: rove 5s infinite; -moz-animation: rove 5s infinite; -webkit-animation: rove 5s infinite; The animation-play-state property • This property specifies whether the animation is running or paused • It is probably most useful when using JavaScript to control a CSS animation • But the next slide shows that it can also be used in other ways Using the animation-play-state property with a pseudo-class • This page is at • The normal state for the div is that it stays in the top left of the page, but – when the mouse hovers over the div, it starts to move to the left – however it only moves all the way (900 pixels) to the left if the user also moves the house to the left, to keep it hovering the div div { width:100px; height:100px; background:red; position:relative; -moz-animation:move 5s; -moz-animation-play-state:paused; } div:hover { -moz-animation-play-state:running; } @-moz-keyframes move { 0% { left:0px; } 100% { left:900px; } } Hello The animation-fill-mode property • animation-fill-mode specifies what property values are applied by an animation outside the time it is executing – By default, an animation will not affect property values between the time it is applied (when the animation-name property is set on an element) and the time it begins execution (which is determined by the animation-delay property). – Also, by default, an animation does not affect property values after the animation ends (determined by the animation-duration property). – The value of animation-fill-mode can override this behavior. • Possible values for the animation-fill-mode property • backwards - the animation will apply the property values defined in its 0% keyframe as soon as the animation is applied, during the period defined by animation-delay • forwards - the animation will apply the property values defined in its last executing keyframe after the final iteration of the animation, until the animation style is removed. The last executing keyframe is the 100% keyframe unless the animation has animation-direction set to alternate and the iteration count is a finite even number, in which case it is the 0% keyframe • both the animation will follow the rules for both ‘forwards’ and ‘backwards’. That is, it will extend the animation properties in both directions. • none - this is the default value for the property • animation-fill-mode appears to be supported only by -moz- browsers at present Nested animations • View this animation in a -moz- browser: • The bell rings as we have seen before but, at the same time, the bell and ringing text move sideways • This could be achieved in several ways – but in this implementation, we achieve it by • animating some elements • inside another element which is also being animated independently Nested animations (contd.) • The bell and ringing text are nested inside another div element • As we shall see in the stylesheet on the next slide, this envelope is animated to move horizontally – while the bell and ringing text are animated as before Ding-dong bell Watch the bell ring while moving sideways Ding dong Stylesheet for the nested animations • The bell and ringing text are nested inside another div element div.envelope { position:relative; -moz-animation: moveH 12s alternate infinite; } @-moz-keyframes moveH { 0% { left:0px; } 100% { left:900px; } } div.bell {visibility:hidden; color:blue; width:200; -moz-animation: ring2 4s ease-in-out infinite;} @-moz-keyframes ring2 { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg);visibility:visible; } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz- transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz- transform: rotate(1deg); visibility:hidden; } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } img.bell { -moz-animation: ring 4s ease-in-out 8s infinite; -moz-transform-origin: 50% 4px; } @-moz-keyframes ring { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(- 28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz- transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { - moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } Simultaneous animations • View this animation in a -moz- browser: • As before, the bell moves sideways while ringing, but • it also moves vertically • This could be achieved in several ways – but in this implementation, we achieve it by applying multiple animations to the envelop div Simultaneous animations (contd.) • The only change to the HTML page is to make it refer to a different external stylesheet Ding-dong bell Watch the bell ring while moving sideways Ding dong Stylesheet for the simultaneous animations • Two animations are applied, simultaneously, to the envelope div div.envelope { position:relative; -moz-animation: moveH 12s alternate infinite, moveH 12s alternate infinite; } @-moz-keyframes moveH { 0% { left:0px; } 100% { left:900px; } } @-moz-keyframes moveV { 0% { top:0px; } 100% { top:300px; } } div.bell {visibility:hidden; color:blue; width:200; -moz-animation: ring2 4s ease-in-out infinite;} @-moz-keyframes ring2 { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg);visibility:visible; } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz- transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz- transform: rotate(1deg); visibility:hidden; } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } img.bell { -moz-animation: ring 4s ease-in-out 8s infinite; -moz-transform-origin: 50% 4px; } @-moz-keyframes ring { 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(- 20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz- transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); } 43% { - moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } Xem thêm • • • • 104 Q & A THE END
File đính kèm:
bai_giang_phat_trien_ung_dung_web_web_programming_chuong_5_c.pdf