HTML programming Exercise 14.1 and 14.2

LWD5e_materials/ch18/figures/transitions.css

@charset "UTF-8"; /* CSS Document */ body { font-family: Tahoma, Verdana, Geneva, sans-serif; margin: 2em 6em; font-weight: bold; } h1 { font-size: 1em; text-transform:uppercase; margin: 4em 0 2em; letter-spacing: .2em; color: #ccc; border-top: 1px solid #ccc; } .figure { clear: left; } /* FIGURE 18-1 */ #fig1 a.smooth { display: block; text-decoration:none; text-align: center; padding: .5em 1em; width: 10em; border-radius: 1em; background-color: mediumblue; color: #fff; -webkit-transition-property: background-color; -moz-transition-property: background-color; -0-transition-property: background-color; -ms-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -0-transition-duration: 0.3s; -ms-transition-duration: 0.3s; transition-duration: 0.3s; } #fig1 a:hover, #fig1 a:focus { background-color: red; } /* FIGURE 18-3 */ #timing_box { width: 600px; background-color: #c6de89; padding: 0; margin: 0; } p.tf { background-color: #fff; border: 4px solid #009Ac7; margin: 1em 0; width: 120px; padding: 15px 15px; font-weight: normal; -webkit-transition-duration: 4s; -moz-transition-duration: 4s; -o-transition-duration: 4s; -ms-transition-duration: 4s; transition-duration: 4s; } #timing_box:hover .tf { width: 562px; } #ease { -webkit-transition-timing-function: ease; -moz-transition-timing-function: ease; -o-transition-timing-function: ease; -ms-transition-timing-function: ease; transition-timing-function: ease; } #linear { -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -o-transition-timing-function: linear; -ms-transition-timing-function: linear; transition-timing-function: linear; } #ease-in { -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; transition-timing-function: ease-in; } #ease-out { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; transition-timing-function: ease-out; } #ease-in-out { -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } #steps{ -webkit-transition-timing-function: steps(4,end); -moz-transition-timing-function: steps(4,end); -o-transition-timing-function: steps(4,end); -ms-transition-timing-function: steps(4,end); transition-timing-function: steps(4,end); } #step-start { -webkit-transition-timing-function: step-start; -moz-transition-timing-function: step-start; -o-transition-timing-function: step-start; -ms-transition-timing-function: step-start; transition-timing-function: step-start; } #step-end { -webkit-transition-timing-function: step-end; -moz-transition-timing-function: step-end; -o-transition-timing-function: step-end; -ms-transition-timing-function: step-end; transition-timing-function: step-end; } /* end FIGURE 18-3 */ /* FIGURE 18-4 */ #fig4 a.smooth { display: block; text-decoration:none; text-align: center; padding: .5em 1em; width: 10em; border-radius: 1em; background-color: mediumblue; color: #fff; -webkit-transition-property: background-color, color, letter-spacing; -moz-transition-property: background-color color, letter-spacing; -0-transition-property: background-color, color, letter-spacing; -ms-transition-property: background-color, color, letter-spacing; transition-property: background-color, color, letter-spacing; -webkit-transition-duration: 0.3s, 2s, 0.3s; -moz-transition-duration: 0.3s, 2s, 0.3s; -0-transition-duration: 0.3s 2s, 0.3s; -ms-transition-duration: 0.3s, 2s, 0.3s; transition-duration: 0.3s, 2s, 0.3s; -webkit-transition-timing-function: ease-out, ease-in, ease-out; -moz-transition-timing-function: ease-out, ease-in, ease-out; -0-transition-timing-function: ease-out, ease-in, ease-out; -ms-transition-timing-function: ease-out, ease-in, ease-out; transition-timing-function: ease-out, ease-in, ease-out; } #fig4 a:hover, #fig4 a:focus { background-color: red; letter-spacing: 3px; color: black; } /* end figure 18-4 */ /* FIGURE 18-5 */ #fig5 a.smooth { display: block; text-decoration:none; text-align: center; padding: .5em 1em; width: 6em; border-radius: 1em; border: 2px solid rgb(175,175,175); background-color: rgb(190, 190, 190); text-shadow: #666 .1em .1em .1em; color: #fff; position: relative; box-shadow: 0 4px 2px rgba(0,0,0,.5); -webkit-transition-property: background-color, top, box-shadow; -moz-transition-property: background-color, top, box-shadow; -0-transition-property: background-color, top, box-shadow; -ms-transition-property: background-color, top, box-shadow; transition-property: background-color, top, box-shadow; -webkit-transition-duration: 0.2s, 0.1s, 0.1s; -moz-transition-duration: 0.2s, 0.1s, 0.1s; -0-transition-duration: 0.2s, 0.1s, 0.1s; -ms-transition-duration: 0.2s, 0.1s, 0.1s; transition-duration: 0.2s, 0.1s, 0.1s; -webkit-transition-timing-function: ease, ease-in-out; -moz-transition-timing-function: ease, ease-in-out; -0-transition-timing-function: ease, ease-in-out; -ms-transition-timing-function: ease, ease-in-out; transition-timing-function: ease, ease-in-out; -webkit-transition-delay: 0, .1s, .1s; } #fig5 a:hover, #fig5 a:focus { background-color: #fdca00; border-color: #fda700; } #fig5 a:active { top: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.5); } /* end figure 18-5 */ /* FIGURE 18-7 */ #fig7 .container { position: relative; width: 600px; height: 300px; padding: 0px 20px 100px 20px; /* outline: 1px dashed #ccc; */ } #fig7 .img1, #fig7 .img2 { position: absolute; top: 0; left:0; margin: 50px; } #fig7 .img1 { opacity: .2; } #fig7 .img2 { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } /* end figure 18-7 */ /* FIGURE 18-8 */ #fig8 .container { position: relative; width: 800px; height: 300px; padding: 150px; /* outline: 1px dashed #ccc; */ } #fig8 .img1, #fig8 .img3, #fig8 .img4, #fig8 .img5 { position: absolute; top: 0; left:0; margin: 100px; } #fig8 .img1 { opacity: .2; } #fig8 .img3, #fig8 .img4, #fig8 .img5 { -webkit-transform: rotate(25deg); -moz-transform: rotate(25deg); -o-transform: rotate(25deg); -ms-transform: rotate(25deg); transform: rotate(25deg); } #fig8 .img3 { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; } #fig8 .img4 { -webkit-transform-origin: right bottom; -moz-transform-origin: right bottom; -o-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } #fig8 .img5 { -webkit-transform-origin: 400px 0; -moz-transform-origin: 400px 0; -o-transform-origin: 400px 0; -ms-transform-origin: 400px 0; transform-origin: 400px 0; } /* end figure 18-8 */ /* FIGURE 18-9 */ #fig9 .container { position: relative; width: 800px; height: 300px; padding: 100px; /* outline: 1px dashed #ccc; */ } #fig9 .img1, #fig9 .img2 { position: absolute; top: 0; left:0; margin: 50px; } #fig9 .img1 { opacity: .2; } #fig9 .img2 { -webkit-transform: translate(90px, 60px); -moz-transform: translate(90px, 60px); -o-transform: translate(90px, 60px); -ms-transform: translate(90px, 60px); transform: translate(90px, 60px); } #fig9 .img4 { -webkit-transform: translate(-5%, -25%); -moz-transform: translate(-5%, -25%); -o-transform: translate(-5%, -25%); -ms-transform: translate(-5%, -25%); transform: translate(-5%, -25%); } /* end figure 18-9 */ /* FIGURE 18-10 */ #fig10 .container { position: relative; width: 800px; height: 300px; padding: 50px 100px; /* outline: 1px dashed #ccc; */ } #fig10 .img1, #fig10 .img2, #fig10 .img3, #fig10 .img4 { position: absolute; top: 0; left:0; margin: 50px; } #fig10 .img1 { opacity: .2; } #fig10 .img2 { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); -ms-transform: scale(1.25); transform: scale(1.25); } #fig10 .img3 { -webkit-transform: scale(.75); -moz-transform: scale(.75); -o-transform: scale(.75); -ms-transform: scale(.75); transform: scale(.75); } #fig10 .img4 { -webkit-transform: scale(1.5, .5); -moz-transform: scale(1.5, .5); -o-transform: scale(1.5, .5); -ms-transform: scale(1.5, .5); transform: scale(1.5, .5); } /* end figure 18-10 */ /* FIGURE 18-11 */ #fig11 .container { position: relative; width: 800px; height: 300px; padding: 120px; /* outline: 1px dashed #ccc;*/ } #fig11 .img1, #fig11 .img2, #fig11 .img3, #fig11 .img4 { position: absolute; top: 0; left:0; margin: 150px; } #fig11 .img1, #fig11 .img2 { margin-top: 50px; margin-bottom: 50px; } #fig11 .img1 { opacity: .2; } #fig11 .img2 { -webkit-transform: skewX(15deg); -moz-transform: skewX(15deg); -o-transform: skewX(15deg); -ms-transform: skewX(15deg); transform: skewX(15deg); } #fig11 .img3 { -webkit-transform: skewY(30deg); -moz-transform: skewY(30deg); -o-transform: skewY(30deg); -ms-transform: skewY(30deg); transform: skewY(30deg); } #fig11 .img4 { -webkit-transform: skew(15deg, 30deg); -moz-transform: skew(15deg, 30deg); -o-transform: skew(15deg, 30deg); -ms-transform: skew(15deg, 30deg); transform: skew(15deg, 30deg); } /* end figure 18-11 */ /* FIGURE 18-12 */ #fig12 .container { position: relative; width: 600px; height: 200px; padding: 50px; /* outline: 1px dashed #ccc; */ } #fig12 #origimg, #tiltimg { position: absolute; top: 50px; left: 50px; } #fig12 #origimg, #tiltimg { width: 200px; height: 150px; } #fig12 #origimg { opacity: .25; } #fig12 #tiltimg:hover { -webkit-transform: scale(1.5) rotate(-5deg) translate(50px, 30px); -moz-transform: scale(1.5) rotate(-5deg) translate(50px, 30px); -o-transform: scale(1.5) rotate(-5deg) translate(50px, 30px); -ms-transform: scale(1.5) rotate(-5deg) translate(50px, 30px); transform: scale(1.5) rotate(-5deg) translate(50px, 30px); -webkit-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; } /* end figure 18-12 */ /* FIGURE 18-13 */ #fig13 ul { list-style-type: none; padding: 0; margin: 0; } #fig13 li { float: left; margin-right: 10px; } #fig13 li:last-of-type { margin-right: 0; } #fig13 a { display: block; } #fig13 img { width: 200px; height: 150px; box-shadow: 2px 2px 2px rgba(0,0,0,.4); -webkit-transition: -webkit-transform .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out; -ms-transition: -ms-transform .3s ease-in-out; transition: transform .3s ease-in-out; } #fig13 a:hover img { box-shadow: 6px 6px 6px rgba(0,0,0,.3); } #fig13 a:hover #img1, a:focus #img1 { -webkit-transform: scale(1.5) rotate(-3deg); -moz-transform: scale(1.5) rotate(-3deg); -o-transform: scale(1.5) rotate(-3deg); -ms-transform: scale(1.5) rotate(-3deg); transform: scale(1.5) rotate(-3deg); } #fig13 a:hover #img2, a:focus #img2 { -webkit-transform: scale(1.5) rotate(5deg); -moz-transform: scale(1.5) rotate(5deg); -o-transform: scale(1.5) rotate(5deg); -ms-transform: scale(1.5) rotate(5deg); transform: scale(1.5) rotate(5deg); } #fig13 a:hover #img3, a:focus #img3 { -webkit-transform: scale(1.5) rotate(-7deg); -moz-transform: scale(1.5) rotate(-7deg); -o-transform: scale(1.5) rotate(-7deg); -ms-transform: scale(1.5) rotate(-7deg); transform: scale(1.5) rotate(-7deg); } #fig13 a:hover #img4, a:focus #img4 { -webkit-transform: scale(1.5) rotate(2deg); -moz-transform: scale(1.5) rotate(2deg); -o-transform: scale(1.5) rotate(2deg); -ms-transform: scale(1.5) rotate(2deg); transform: scale(1.5) rotate(2deg); } /* end figure 18-13 */ /* FIGURE 18-15 */ #fig15 { clear: left; } #fig15 ul { width: 1000px; height: 150px; list-style-type: none; padding: 0; margin: 0; -webkit-perspective: 600; -moz-perspective: 600; perspective: 600; } #fig15 li { float: left; margin-right: 10px; -webkit-transform: rotateY(45deg); -moz-transform: rotateY(45deg); transform: rotateY(45deg); } #fig15 li img { width: 200px; height: 150px; } /* FIGURE 18-16 */ #fig16 ul { width: 1000px; height: 100px; list-style-type: none; padding: 0; margin: 0; -webkit-perspective: 600; -moz-perspective: 600; perspective: 600; } #fig16 li { float: left; margin-right: 10px; -webkit-transform: rotateX(45deg); -moz-transform: rotateX(45deg); transform: rotateX(45deg); } #fig16 li img { width: 200px; height: 150px; } /* FIGURE 18-18 */ @-webkit-keyframes colors { 0% { background-color: red; } 20% { background-color: orange; } 40% { background-color: yellow; } 60% { background-color: green; } 80% { background-color: blue; } 100% { background-color: purple; } } @-moz-keyframes colors { 0% { background-color: red; } 20% { background-color: orange; } 40% { background-color: yellow; } 60% { background-color: green; } 80% { background-color: blue; } 100% { background-color: purple; } } @-o-keyframes colors { 0% { background-color: red; } 20% { background-color: orange; } 40% { background-color: yellow; } 60% { background-color: green; } 80% { background-color: blue; } 100% { background-color: purple; } } @-ms-keyframes colors { 0% { background-color: red; } 20% { background-color: orange; } 40% { background-color: yellow; } 60% { background-color: green; } 80% { background-color: blue; } 100% { background-color: purple; } } #fig18 div { width: 10em; padding: 1em; font-size: 2em; text-align: center; color: #fff; background-color: gray; border-radius: 1em; } #fig18 #magic { -webkit-animation: colors 20s linear infinite alternate; -moz-animation: colors 20s linear infinite alternate; -o-animation: colors 20s linear infinite alternate; -ms-animation: colors 20s linear infinite alternate; animation: colors 20s linear infinite alternate; } /* end figure 18-18 */ /* 3D TRANSFORMS, FIRST TRY */ #threed { -webkit-perspective: 800; perspective: 800; -webkit-perspective-origin: center top; perspective-origin: center top; } #threed .item { display: block; float: left; margin: 5px; margin-bottom: 4em; -webkit-transform: rotateY(45deg); transform: rotateY(45deg); }