css3 文字排版手机端排版底部怎样做成箭头

来源：蜘蛛抓取(WebSpider) 时间：2017-03-17 07:44 标签： css3由底部向上滑出层
这两天在学习CSS3，觉得挺好玩的。让我想起淘宝上旋转的小箭头，这里有源码，不过我看着好像挺复杂的，于是试着自己做一个。出来的效果跟原效果的差别之一是：鼠标离开后没有往回旋转的效果。不过刚开始学习，暂时先这样吧。
1 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
4 &meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
5 &title&CSS3仿淘宝旋转小箭头&/title&
6 &style type="text/css"&
font-size:12px;
10 a { color:#333; text-decoration:none; }
11 .menu {
width:80px;
line-height:25px; border:#ddd solid 1px; }
12 .menu a { position:relative; width:70px; height:25px; display:block; padding-left:10px; }
13 .menu a b {
border-width:4px 4px 0px 4px;
border-color:transparent;
border-style:solid;
border-top-color:#333;
width:0; height:0; position:absolute; top:10px;
left:63px;
20 .menu a:hover b {
-moz-animation:rotation 0.5s 1;
-webkit-animation:rotation 0.5s 1;
animation:rotation 0.5s 1;
border-width:0px 4px 4px 4px;
border-bottom-color:#333;
27 @-moz-keyframes rotation {
0% { -moz-transform:rotate(180deg); }
100%{ -moz-transform:rotate(360deg); }
31 @-webkit-keyframes rotation {
0% { -webkit-transform:rotate(180deg); }
100% { -webkit-transform:rotate(360deg); }
35 @keyframes rotation {
0% { transform:rotate(180deg); }
100% { transform:rotate(360deg); }
39 &/style&
40 &/head&
&div class="menu"&&a href="#"&我的淘宝&b&&/b&&/a&&/div&
43 &/body&
44 &/html&
阅读(...) 评论()可自定义箭头样式的CSS3气泡提示框
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
作者 红领巾 ]
一款基于纯CSS的气泡提示框，整个提示框由箭头和矩形框组成，并且气泡提示框的箭头可以有不同的方向。在线预览&&& 源码下载实现的代码。css代码：CSS Code复制内容到剪贴板 .arrow_box&{ && &&&&position:& && &&&&background:&#88b7d5; && &&&&border:&4px&solid&#c2e1f5; && } && .arrow_box:after,&.arrow_box:before&{ && &&&&bottombottom:&100%; && &&&&left:&50%; && &&&&border:&solid& && &&&&content:&&&&; && &&&&height:&0; && &&&&width:&0; && &&&&position:& && &&&&pointer-events:& && } && & && .arrow_box:after&{ && &&&&border-color:&rgba(136,&183,&213,&0);[......] && &&以上就是本文的全部内容，希望对大家的学习有所帮助。
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
CodeSecTeam微信公众号
人，永远不会珍惜三种人：一是轻易得到的；二是永远不会离开的；三是那个一直对你很好的。但是，往往这三种人一旦离开就永远不会再回来。
手机客户端

我要回帖

更多关于 css3由底部向上滑出层 的文章

 

随机推荐