hfszy0 2013-11-01
文章源自:http://www.gbtags.com/gb/share/2094.htm
直接运行代码,查看制作效果。
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>小三角</title> <style type="text/css"> @import url(http://fonts.googleapis.com/css?family=Andika); .triangle-demo { width: 100px; height: 100px; margin: 0 auto; background: tan; border-top: 0 solid #EE7C31; border-left: 0 solid #F5D97B; border-bottom: 0 solid #D94948; border-right: 0 solid #8DB434; transition: 0.8s 0.2s; } .step-1 .triangle-demo { border-top-width: 10px; } .step-2 .triangle-demo { border-left-width: 10px; } .step-3 .triangle-demo { border-right-width: 10px; } .step-4 .triangle-demo { border-bottom-width: 10px; } .step-6 .triangle-demo { background: transparent; } .step-7 .triangle-demo { width: 0; height: 0; } .step-8 .triangle-demo { border-left-color: transparent; } .step-9 .triangle-demo { border-right-color: transparent; } .step-10 .triangle-demo { border-top-color: transparent; } .triangle-title { width: 300px; padding: 1rem; color: white; background: #D94948; border-radius: 20px; margin: auto; opacity: 0; transition: 0.8s 0.2s; } .step-11 .triangle-title { opacity: 1; } body { background: #333; font-family: 'Andika', sans-serif; color: white; text-align: center; font-size: large; transform: translateZ(0); } .steps { position: relative; height: 45px; margin-bottom: 20px; } .steps>div { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; background: #333; transition: 0.3s; } .steps .step-0 { opacity: 1; } .step-1 .steps .step-1 { opacity: 1; } .step-2 .steps .step-2 { opacity: 1; } .step-5 .steps .step-5 { opacity: 1; } .step-6 .steps .step-6 { opacity: 1; } .step-7 .steps .step-7 { opacity: 1; } .step-8 .steps .step-8 { opacity: 1; } .step-11 .steps .step-11 { opacity: 1; } h1 { text-transform: uppercase; letter-spacing: 1px; font-size: 14px; border-bottom: 1px solid #555; color: #999; padding-bottom: 10px; font-family: Arial; font-weight: normal; } </style> </head> <script src="js/jquery-1.8.2.js"></script> <body> <h1>超短小教程:如何生成一个CSS的三角形?</h1> <div id="whole-thing"> <div class="steps"> <div class="step-0">Imagine a box(假设这里有一个盒模型)</div> <div class="step-1">The box has a border-top(这个盒模型拥有一个上边框)</div> <div class="step-2">It also has the other borders(当然,同时包含其它边框)</div> <div class="step-5">Notice how the borders meet each other at angles.(注意一下边框连接处的角度)</div> <div class="step-6">The background of the box is transparent.(盒模型的背景是透明的)</div> <div class="step-7">The box is actually zero width and zero height.(盒模型的宽度和高度设置为0)</div> <div class="step-8">Three of the borders are actually transparent in color.(其它3个边框颜色透明)</div> <div class="step-11">That's how a CSS triangle is made!(看到了一个CSS的三角形如何生成了吧!)</div> </div> <div class="triangle-demo"></div> <div class="triangle-title"> <button id="re-run">再运行一次</button> </div> </div> </body> <script type="text/javascript"> (function() { var demo, run; demo = $("#whole-thing"); run = function() { setTimeout(function() { return demo.addClass("step-1"); }, 2500); setTimeout(function() { return demo.addClass("step-2"); }, 5000); setTimeout(function() { return demo.addClass("step-3"); }, 5500); setTimeout(function() { return demo.addClass("step-4"); }, 6000); setTimeout(function() { return demo.addClass("step-5"); }, 7500); setTimeout(function() { return demo.addClass("step-6"); }, 10000); setTimeout(function() { return demo.addClass("step-7"); }, 12000); setTimeout(function() { return demo.addClass("step-8"); }, 14000); setTimeout(function() { return demo.addClass("step-9"); }, 14500); setTimeout(function() { return demo.addClass("step-10"); }, 15000); return setTimeout(function() { return demo.addClass("step-11"); }, 18000); }; run(); $("#re-run").on('click', function() { $("#whole-thing").removeClass(); return run(); }); }).call(this); </script> </html>
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT