CSS3 制作向左、向右及关闭图标的效果 (另一种思路)
最终效果
制作步骤
1.边框
CSS及Html代码
显示效果
2.向左的标志
CSS及Html代码,增加的代码在黄色范围内
显示效果
方向不对了,马上修改一下方向,逆时针旋转45度调整一下
CSS及Html代码
这回再看看效果
这样就对了
3.用类似的方法做出向右和关闭的效果,大功告成。
完整代码:
<style> .displayInlineBlock{
display: inline-block;
} .circle{
margin: 0px 10px 0px 10px;
width: 20px;
height: 20px;
border: 2px solid #87CEFF;
border-radius: 20px;
background: #BFEFFF;
cursor: pointer;
} .circle:hover {
background: #87CEFF;
} .arrow{
width: 7px;
height: 7px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
} .arrowLeftDiv{
margin: 5.5px 0px 0px 7px;
} .arrowRightDiv{
margin: 5.5px 0px 0px 4px;
} .closeDiv{
margin: 4px 0px 0px 2.5px;
} .closeArrowLeft{
width: 6px;
height: 6px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
} .closeArrowRight{
margin: -2px 0px 0px 6px;
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
} .rotate45{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
} .rotate135{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
} .rotate315{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
} </style> <div class="circle displayInlineBlock">
<div class="arrow arrowLeftDiv rotate315"></div>
</div> <div class="circle displayInlineBlock">
<div class="arrow arrowRightDiv rotate135"></div>
</div> <div class="circle displayInlineBlock">
<div class="closeDiv rotate45">
<div class="closeArrowLeft"></div>
<div class="closeArrowRight"></div>
</div>
</div>
一定要使劲点一下
CSS3 制作向左、向右及关闭图标的效果 (另一种思路)的更多相关文章
- CSS3 制作向左、向右及关闭图标的效果
先看一下效果 1.鼠标移入前的效果 2.鼠标移入的效果 3.制作步骤如下: 轮廓的CSS,就是利用圆角和宽度高度,制作出一个圆: <style> /*显示方式为 inline-block* ...
- MUI右滑关闭窗口用Webview的drag实现
mui.init({swipeBack:true}); 必须要用很快的速度摩擦屏幕才能达到右滑关闭窗口的效果,且在右边一般都会失效. mui这个滑动,是纯前端的,这个效率在Android上确实一般. ...
- css3动画 一行字鼠标触发 hover 从左到右颜色渐变
偶然的机会发现的这个东东 这几天做公司的官网 老板突然说出了一个外国网站 我就顺手搜了 并没有发现他说的高科技 但是一个东西深深地吸引了我 就是我下面要说的动画 这个好像不能放视频 我就简单的描述一 ...
- CSS3制作各种形状图像
圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形-平行四边形- 星形-六角星形-五边形-六边形-八角形-心形-蛋形-无穷符号-消息提示框 不废话直接 html界面(亲测的) ------转自百 ...
- css3制作惊艳hover切换效果
css3制作经验hover切换效果 <!DOCTYPE html><html> <head> <meta charset="UTF-8" ...
- 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- CSS3制作各种形状图像(转)
CSS3制作各种形状图像 浏览:1417 | 更新:2015-05-24 14:43 | 标签:css 1 2 3 4 5 6 7 分步阅读 圆形-椭圆形-三角形-倒三角形=左三角形-右三角形-菱形- ...
- CSS3 制作魔方 - 玩转魔方
在上一篇<CSS3 制作魔方 - 形成魔方>中介绍了一个完整魔方的绘制实现,本文将介绍魔方的玩转,支持上下左右每一层独立地旋转.先来一睹玩转的风采. 1.一个问题 由于魔方格的位置与转动的 ...
- CSS3 制作魔方 - 形成魔方
道路千万条,安全第一条! 魔方结构解析 从魔方的外观来看,可以有多种方式来表达它的组成,从而也有多种方式来形成一个魔方.如: 由六个面组成 由若干层组成 由多个方块组成 无论哪种方式,都可以制作魔方. ...
随机推荐
- Socket方法LAN多线程文件传输
1.思维:为了实现各种文件的大小可以被发送和接收的,它可以被设置为发送和接收缓冲器环.并记录文件的位置读取,假设读入缓冲区的字节的特定数目大于缓冲区的大小较小.然后该文件被发送,退出发送周期,关闭连接 ...
- 设置状态栏样式Demo
达到的效果: 色有黑色变为了白色 //设置状态条的样式 - (UIStatusBarStyle)preferredStatusBarStyle { returnUIStatusBarStyleLigh ...
- jquery php 百度搜索框智能提示效果
这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有须要的朋友能够下载測试哦. 代码例如以下 index.html文件,保保存成index.htm <!DOCT ...
- Java Web整合开发(20) -- Hibernate入门
Spring与Hibernate整合
- Linux核心regulator建筑和准备
电源引入的物种 (百度百科)LDO这是low dropout regulator,这意味着低压差线性稳压器.它相比于传统的线性调节器.传统的线性稳压器.例如78xx系列芯片需要输入电压比输出电压高2v ...
- java 添加一个线程、创建响应的用户界面 。 演示示例代码
javajava 添加一个线程.创建响应的用户界面 . 演示示例代码 来自thinking in java 4 21章 部分的代码 夹21.2.11 thinking in java 4免费下载: ...
- 2014年度辛星完全解读html部分
接下来,我们继续学习HTML标签,希望大家可以再接再厉.同一时候辛星也会支持大家.我们一起努力,一起加油. 我们本小节来认识另外几个标签. *************空格和换行************ ...
- Jeditable 点击编辑文字插件
Jeditable - jQuery就地编辑插件使用 jeditable是一个jquery插件,它的优点是可以就地编辑,并且提交到服务器处理,是一个不可多得的就地编辑插件.(注: 就地编辑,也有称 ...
- Struts2+Spring+Hibernate step by step 11 ssh拦截验证用户登录到集成
注意:该系列文章从教师王健写了一部分ssh集成开发指南 引言: 之前没有引入拦截器之前,我们使用Filter过滤器验证用户是否登录,在使用struts2之后,全然能够使用拦截器,验证用户是否已经登录, ...
- zTree实现访问到第一节点在相同水平当前所选节点数目
zTree实现访问到第一节点在相同水平当前所选节点数目 1.实现源代码 <!DOCTYPE html> <html> <head> <title>zTr ...