如何使用CSS生成一个三角形?
传统的网站或者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
<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>
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;}
【如何使用CSS生成一个三角形?】相关文章
6. Bootstrap3,JQuery倒计时插件和Animate.css生成的倒计时效果
8. 如何使用jQuery或者javascript处理Cookie?
9. 如何使用javascript/jQuery预先加载图片
本文来源:https://www.51html5.com/a996.html
上一篇:用CSS3创建动画价格表
下一篇:纯CSS实现3D图像轮转
﹝如何使用CSS生成一个三角形?﹞相关内容
- 如何使用jQuery加载js脚本
- 浅谈如何使用HTML5的Canvas绘图
- 如何使用 HTML5 的 Notification API
- 移动中间件2.0时代,企业如何使用HTML5
- 使用CSS3的step()生成的动画效果
- CSS生日快乐:CSS之父Håkon Wium Lie访谈录
- Facebook联手Bango推移动支付服务,与HTML5战略成一体
- 用CSS3制作一个令人印象深刻的产品展示
- 如何建立一个样式新颖的CSS3搜索框
- Switch To HTML5:一个基础而实用的模板生成工具