|
[tr][td]
图片：111520xl5plab3ct4127br.jpg  传统的网站或者web应用中，如果我们需要创建一个提示的话，通常使用图片来生成小三角，今天这里我们分享一个动画小教程，帮助你快速学习如何使用纯CSS来生成一个三角形。 提示：请使用Firefox或者Chrome查看下面在线调试演示 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); HTML 超短小教程：如何生成一个CSS的三角形？ Imagine a box（假设这里有一个盒模型） The box has a border-top（这个盒模型拥有一个上边框） It also has the other borders（当然，同时包含其它边框） Notice how the borders meet each other at angles.（注意一下边框连接处的角度） The background of the box is transparent.（盒模型的背景是透明的） The box is actually zero width and zero height.（盒模型的宽度和高度设置为0） Three of the borders are actually transparent in color.（其它3个边框颜色透明） That's how a CSS triangle is made!（看到了一个CSS的三角形如何生成了吧！） 再运行一次 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; } [/td][/tr] |
|
