Html5 css3 左箭头,利用CSS3特性巧妙实现漂亮的DIV箭头
DIV箭头用于表现DIV内容的指向,是使用非常普遍的一种表现形式,例如新浪微博的消息转发:
![](https://box.kancloud.cn/2016-08-02_57a05bce5c7df.gif)
还有傲游网站的导航条:
![](https://box.kancloud.cn/2016-08-02_57a05bce74be8.gif)
像傲游账户上方这种箭头更需要多幅图片以表现箭头和hover的效果。
![](https://box.kancloud.cn/2016-08-02_57a05bce880ed.gif)
传统的实现方式都需要一副表示箭头的图片放在DIV上方来实现,例如新浪微博的相关CSS如下:
![](https://box.kancloud.cn/2016-08-02_57a05bce994d4.gif)
而使用CSS3的特性,我们不需要图片就可以实现更加华丽的效果,这样做的好处还包括减少本地文件系统的读取、节省服务器带宽和连接数、避免文件下载失败带来的错误等等。
实现的原理是:我们可以将箭头看作是一个矩形或者菱形的一个角,使用CSS3的属性transform来实现矩形的旋转。
朝上的箭头需要将矩形旋转45度,我们使用transform: rotate(45deg)来实现,另外针对不同的浏览器还需要添加不同的hack,例如Opera的-o-transform、Firefox的-moz-transform,下面以Chrome浏览器为例实现一个样例。
定义一个arrow-shadow样式,内容如下:
~~~
.arrow-shadow {
-webkit-transform:rotate(45deg);
border:1px solid #AAAAAA;
height:40px;
position:absolute;
width:40px;
}
~~~
实现的效果如下所示:
![](https://box.kancloud.cn/2016-08-02_57a05bceafc2b.gif)
为了更加饱满,我们加上CSS3的盒阴影,
~~~
.arrow-shadow {
-webkit-transform:rotate(45deg);
-webkit-box-shadow:0 0 10px 0 #aaa;
height:40px;
position:absolute;
width:40px;
}
~~~
现在效果如下:
![](https://box.kancloud.cn/2016-08-02_57a05bcec17e7.gif)
在外面加一层DIV控制它的高度和宽度。
~~~
.arrow-outer {
height:24px;
overflow:hidden;
position:absolute;
width:60px;
}
~~~
效果如下:
![](https://box.kancloud.cn/2016-08-02_57a05bced2f20.gif)
现在我们已经有了一个漂亮的箭头,但是这还不够,为了表现得更加出色,我们再加一层内部的箭头。
![](https://box.kancloud.cn/2016-08-02_57a05bcee5d2d.gif)
关键代码和结构如下:
~~~
.arrow-outer {
position:absolute;
height:24px;
width:60px;
overflow:hidden;
}
.arrow-shadow {
-webkit-box-shadow:0 0 10px 0 #AAAAAA;
-webkit-transform:rotate(45deg);
background:none repeat scroll 0 0 #FFFFFF;
height:40px;
left:15px;
position:absolute;
top:16px;
width:40px;
}
.arrow-inner {
position:relative;
left:10px;
top:20px;
height:40px;
width:40px;
background:#fff;
border:5px solid #ededed;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
~~~
在外面加上一层容器,就可以看到箭头了。
![](https://box.kancloud.cn/2016-08-02_57a05bcf06925.gif)
最后完整的效果图如下所示:
![](https://box.kancloud.cn/2016-08-02_57a05bcf1fdfc.gif)
CSS3、HTML5的发展和完善让我们编写代码更加简便和快捷,实现的效果也更加漂亮,例如背景的渐变不再需要背景图片的平铺就可以通过CSS代码直接实现,但是有时候需要经过一些转换,才能将这些新技术应用到我们常见的功能中去,这需要我们多加思考和保持思维的灵感。
Html5 css3 左箭头,利用CSS3特性巧妙实现漂亮的DIV箭头相关推荐
- css3制作正方体,利用CSS3的3D效果制作正方体
学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解.下面的动态图就是利用3d旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
- css3立体三角,利用CSS3新特性创建透明边框三角
先来看一下效果,这在CSS3之前,完全是不可想象的,只有图片才能做的到,但在HTML5和CSS3大行其道的今天,实现这种效果,那都不是事啊. 看一下实现的代码: /* 上三角 */ .arrow-up ...
- css3暗黑主题,利用CSS3自定义属性来为网站添加“暗黑模式”(暗色模式/DarkMode)...
究竟什么是暗黑模式?这个概念起初来源于macOS系统,该系统的mojave版本为用户提供两个主题皮肤,即浅色和深色的皮肤.自从有了这个概念之后,很多网站和系统都会用户提供了相应的两套肤色,便于用户根据 ...
- CSS3技巧:利用css3径向渐变做一张优惠券(转)
在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...
- 【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果(不含背景移动)
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理 奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...
- css3三角形兼容_利用css3特性写出三角形(兼容IE浏览器)
利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
- css3运动后留下轨迹尾巴_巧妙利用CSS3实现太阳系行星公转运动轨迹
巧妙利用CSS3实现太阳系行星公转运动轨迹 前段时间在博客园看到一篇很不错的文章,就是介绍如何用CSS3来实现太阳系中行星的运动.本小姐处于好奇心从头到完整的看完了.突然发现好奇不仅仅害死猫,也可以增 ...
- 巧妙利用CSS3实现太阳系行星公转运动轨迹
前段时间在博客园看到一篇很不错的文章,就是介绍如何用CSS3来实现太阳系中行星的运动.本×××处于好奇心从头到完整的看完了.突然发现好奇不仅仅害死猫,也可以增长知识嘛(你这是什么谬论!!!).也许有的 ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
最新文章
- 记一次Spring boot 和Vue的前后端分离的入门培训
- mysql之 double write 浅析
- python列表推导式格式_Python列表推导式(for表达式)及用法
- 继承Thread 创建多线程的简单实现
- novell.directory.ldap获取邮箱活动目录
- powerdesigner安装之后会自动加载到word中怎么去除??
- io 流 txt本地生成
- HM67主板开启ACHI
- Aircrack-ng套件_无线网卡破解
- 老Java程序员花两天做了个消消乐(天天爱消除)
- Ecshop模板开发(二十三):手机版显示商城
- pandas操作excel 笔记
- 论文 PPT 画图导出 PDF 注意事项
- Mac 有Alt 键吗?Alt 或 Option 键在 Mac 键盘上的作用是什么
- spring-mybatis.xml 里mapperLocations 配置多路径
- 微信小程序使用weapp-qrcode生成二维码
- register int 的作用
- 《不可思议的年代》读书笔记
- 使用matlab对记录数据进行傅里叶分析
- JAVA实现RS-485串口编程