CSS--使用伪选择器制作箭头图标
// 使用Transform的属性,组合translate(位移)和rotate(旋转),将生成的小矩形组合成各种箭头样式;
HTML
1 <section class="main"> 2 <header class="title">图标变形过渡效果缩放式菜单</header> 3 <section> 4 <button>图标</button> 5 <header> 6 #300x100 淡色系 7 </header> 8 <div> 9 <article> 10 <img src="http://www.gbtags.com/gb/laitu/300x100" alt="" /> 11 </article> 12 </div> 13 </section> 14 <section> 15 <button>图标</button> 16 <header> 17 #300x100 暗色系 18 </header> 19 <div> 20 <article> 21 <img src="http://www.gbtags.com/gb/laitu/300x100/666666/ffffff" alt="" /> 22 </article> 23 </div> 24 </section> 25 </section>
CSS
1 * { box-sizing:border-box;} 2 body { font-family: 'microsoft yahei',Arial,sans-serif; background: #aaa;} 3 section { position: relative; width:100%;} 4 section.main { position: absolute; top:10%; left:25%; width:50%; max-width:30em; min-width:15em; border-radius:5px; overflow: hidden;} 5 section.main > header { background: orange; color:#fff; line-height: 1.2em; text-align: center;} 6 section section:last-child { border:none;} 7 section > div { height:0; overflow: hidden; transition:all .4s ease-in-out;} 8 article,header { padding:1em; line-height: 1em;} 9 header:not(.title) { width:100%; overflow: hidden; height:3em; background: #efefef; cursor:pointer; color:#888; white-space:nowrap; text-overflow: ellipsis; padding-right: 2.1em;} 10 header:not(.title):hover { background: #e8e8e8;} 11 article { line-height: 1.4em; background: rgba(255, 255, 255, .7);} 12 article img { width:100%; height:auto; border:2px solid white; border-radius: 3px;} 13 14 /* 使用CSS3的伪选择器,生成关闭和向下两个图标按钮; */ 15 /* 使用变形属性,组合位移和旋转,可将生成的小矩形组合成向下按钮,同样也可以组装成关闭按钮; */ 16 section button { position: absolute; right:0; margin:0; padding:0; height:3em; width:3em; outline:none; border:0; background: none; text-indent: -9999px; pointer-events:none; cursor:pointer;} 17 section button:before, 18 section button:after { content:''; display: block; position: absolute; width:4px; height:12px; background: orange; border-radius: .3em; top:50%; left:50%; transition:all .3s ease-in-out;} 19 20 /*向左箭头*/ 21 /*section button:before { transform:translate(0%, -50%) rotate(45deg);} 22 section button:after { transform:translate(0%, 0%) rotate(-45deg);}*/ 23 24 /*向右箭头*/ 25 /*section button:before { transform:translate(0%, -50%) rotate(-45deg);} 26 section button:after { transform:translate(0%, 0%) rotate(45deg);}*/ 27 28 /*向上箭头*/ 29 /*section button:before { transform:translate(75%, -20%) rotate(-45deg);} 30 section button:after { transform:translate(-75%, -20%) rotate(45deg);}*/ 31 32 /*向下箭头*/ 33 section button:before { transform:translate(75%, 0%) rotate(45deg);} 34 section button:after { transform:translate(-75%, 0%) rotate(-45deg);} 35 36 37 /* 点击之后需要变成"X"; */ 38 section.open button:after,section.open button:before { background: red; height:14px; } 39 section.open button:before { transform:translate(-75%, -20%) rotate(45deg);} 40 section.open button:after { transform:translate(-75%, -20%) rotate(-45deg);}
JavaScript
1 $(function(){ 2 $('section section header').on('click', function () { 3 var $this = $(this), 4 parent_section = $this.parent(), 5 closeDiv = $this.siblings('div'), 6 contentheight = closeDiv.children('article').outerHeight(); 7 (closeDiv.height() === 0 ) ? closeDiv.height(contentheight) : closeDiv.height(0); 8 // 更改容器高度; 9 $this.parents('section').first().toggleClass('open'); 10 // 更改箭头样式; 11 }); 12 });
转载于:https://www.cnblogs.com/yizihan/p/4561666.html
CSS--使用伪选择器制作箭头图标相关推荐
- 用css伪元素制作箭头图标
用css伪元素制作跳转箭头图标 在一些前端框架中见到过伪元素做的图标,现在一般都自己写了,用伪元素可以代替不少图片 .yui-cell{ position: relative; } .yui-cell ...
- html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
- 用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
- html5实现圆圈里带一个三角形,CSS制作箭头图标代码(圆,三角形,椭圆)c
看到一些网站的椭圆边框是用css样式写出来得,请问怎样写? 首先打开sublime text编辑器,新建一个html文件,里面写入一个p标签: 怎么把DIV做成椭圆形,CSS,最好有代码 参见下面样式 ...
- CSS-用伪元素制作小箭头(轮播图的左右切换btn)
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- css empty_何时使用:empty和:blank CSS伪选择器
css empty I made a terrible mistake when I tweeted about :empty and :blank a while ago. I said that ...
- 把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标
把svg图标制作成字体图标 by Sarah Dayan 通过莎拉·达扬 让我们用SVG符号和CSS变量制作彩色图标 (Let's make multi-colored icons with SVG ...
- 常用的一些 CSS 技巧二 — 选择器(伪类与伪元素)
你可以看看其他常用的 CSS 技巧: 常用的一些 CSS 技巧一 常用的一些 CSS 技巧三 CSS 重置盒模型 *, *::before, *::after {box-sizing: border- ...
- php里面的箭头怎么打出来,如何使用CSS制作箭头符号
箭头符号我们是经常可以看到的,那么我们如何在不利用图像的情况下使用CSS制作箭头符号呢?本篇文章就来给大家介绍CSS制作箭头符号的方法. 话不多说,下面我们直接来看正文~ 用CSS制作的箭头图标的方法 ...
最新文章
- hookup_2.10-0.2.3.jar包下载
- python ssh登陆模块_Python sshh包_程序模块 - PyPI - Python中文网
- Python中的split,rsplit,splitlines
- ImageView一例
- [UVALive 3177] Beijing Guards
- SQL书写规则30例
- oracle 数据迁移跑批,Oracle数据库纯数据的导出与导入
- cad的font文件夹有字体但是标注显示问号的问题
- python数字雨代码_电影黑客帝国中代码雨如何实现?简单!用 Python 就能实现!...
- matlab的double和single类型
- amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间,给了我们什么启示...
- oracle与r语言时间转换,R语言时间序列中时间年、月、季、日的处理操作
- java统计英文单词_java单词统计
- 简述修改 MySQL 配置文件的方法_修改mysql配置文件的方法举例
- 记录一次Anaconda安装Spyder失败及解决方法
- [编程题] 困兽之斗
- 知名黑客“嘎吱上尉”为术后康复在网上发起筹款活动
- 是德科技DSOX2002A型号示波器的使用
- 易居住房3(“发布房源”--房源基本信息填写)
- 橘子学Arthas01之概念和安装