before css 旋转_深入理解 CSS 的 :before 和 :after 选择器（制作select下拉列表美化插件）...

最新推荐文章于 2020-12-28 20:23:17 发布
最新推荐文章于 2020-12-28 20:23:17 发布
阅读量184 收藏
点赞数
文章标签： before css 旋转
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39930557/article/details/111553071
版权

原文链接：http://www.cnblogs.com/LY-leo/p/5765598.html

对于 :before 和 :after 选择器，大家并不陌生，但是很少有人会主动去用它们。先解释下它们的定义和用法：

:before 选择器在被选元素的内容前面插入内容，:after 选择器在被选元素的内容后面插入内容，都会使用 content 属性来指定要插入的内容。

有时候，项目中或多或少需要一些箭头，如果用图片来做，感觉就有点 low 了，而上面这两个选择器是最好的选择。效果如下：

html 代码如下：

css 代码如下：

.test {

position: relative;

width: 120px;

height: 40px;

border: 1px solid #d2d2d2;

border-radius: 3px;

}

.test:after {

position: absolute;

right: 15px;

top: 18px;

width: 0;

height: 0;

content: "";

border-width: 6px 6px 0 6px; /*border-width: 6px 6px 6px 6px;*/

border-style: solid;

border-color: #fff transparent; /*red transparent transparent transparent;*/

-webkit-transition: all .25s;

-moz-transition: all .25s;

-ms-transition: all .25s;

-o-transition: all .25s;

transition: all .25s;

}

.test:before {

position: absolute;

right: 13px;

top: 18px;

width: 0;

height: 0;

content: "";

border-width: 8px 8px 0 8px;

border-style: solid;

border-color: #d36969 transparent;

-webkit-transition: transform .25s;

-moz-transition: transform .25s;

-ms-transition: transform .25s;

-o-transition: transform .25s;

transition: transform .25s;

}

.test.active:after{

top: 20px;

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

.test.active:before{

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

通过 :before 和 :after 两个伪元素，设置 content 为空，宽高为零，边框和颜色，生成两个等边三角形，一个是红色的三角，其边长稍大，一个是白色的三角。会有人问为什么白色三角是通过 :after 生成的，因为 :after 生成的白色三角才能覆盖在 :before 生成的红色三角，而形成一个箭头(一定要设置好定位的 top 值，使两个三角的底边重合)。

js 代码如下：

$('.test').on('click',function(){

$(this).toggleClass('active');

})

点击的时候箭头会旋转180度，效果如下：

分析：

加z-index: 10前后：

.test {

position: relative;

width: 120px;

height: 40px;

border: 1px solid red;

border-radius: 3px;

}

.test:after {

position: absolute;

right: 15px;

top: 18px;

width: 0;

height: 0;

content: "";

border-width: 6px 6px 6px 6px;

border-style: solid;

border-color: red transparent transparent transparent;

transition: all .25s;

}

.test:before {

position: absolute;

right: 13px;

top: 18px;

width: 0;

height: 0;

content: "";

border-width: 8px 8px 8px 8px;

border-style: solid;

border-color: green transparent;

transition: transform .25s;

/*z-index: 10;*/

}

aaaaaa

修改1：

.test:before {

position: absolute;

right: 13px;

top: 18px;

width: 0;

height: 0;

content: "";

border-width: 8px 8px 8px 8px;

border-style: solid;

border-color: green transparent transparent transparent;

transition: transform .25s;

/*z-index: 10;*/

}

修改后的样式：

.test:after {

position: absolute;

right: 15px;

top: 18px;

width: 0;

height: 0;

content: "";

border-width: 6px 6px 6px 6px;

border-style: solid;

border-color: white transparent transparent transparent;

transition: all .25s;

}

.test:before {

position: absolute;

right: 13px;

top: 18px;

width: 0;

height: 0;

content: "";

border-width: 8px 8px 8px 8px;

border-style: solid;

border-color: green transparent transparent transparent;

transition: transform .25s;

/*z-index: 10;*/

}

制作美化select 插件：

ul li {

list-style: none;

}

.test {

position: relative;

float: left;

width: 120px;

height: 40px;

padding-left: 11px;

font-size: 15px;

line-height: 40px;

cursor: pointer;

border: 1px solid red;

border-radius: 3px;

margin: 0px 20px;

outline: none;

}

.test:before {

position: absolute;

right: 13px;

top: 18px;

width: 0;

height: 0;

content: "";

border-width: 8px 8px 0 8px;

border-style: solid;

border-color: red transparent;

-webkit-transition: transform .25s;

-moz-transition: transform .25s;

-ms-transition: transform .25s;

-o-transition: transform .25s;

transition: transform .25s;

}

.test:after {

position: absolute;

right: 15px;

top: 18px;

width: 0;

height: 0;

content: "";

border-width: 6px 6px 0 6px;

border-style: solid;

border-color: #fff transparent;

-webkit-transition: all .25s;

-moz-transition: all .25s;

-ms-transition: all .25s;

-o-transition: all .25s;

transition: all .25s;

}

.test.active:before {

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

.test.active:after {

top: 20px;

-webkit-transform: rotate(180deg);

-moz-transform: rotate(180deg);

-ms-transform: rotate(180deg);

-o-transform: rotate(180deg);

transform: rotate(180deg);

}

.test .dropdown {

position: absolute;

right: 0;

left: 0;

display: none;

padding: 0;

border-radius: inherit;

border: 1px solid #d2d2d2;

box-shadow: 2px 2px 5px rgba(0, 0, 0, .4);

}

.test.active .dropdown {

display: block;

}

.test .dropdown:before {

position: absolute;

right: 13px;

bottom: 100%;

width: 0;

height: 0;

content: "";

border-width: 0 8px 8px 8px;

border-style: solid;

border-color: #d2d2d2 transparent;

}

.test .dropdown:after {

position: absolute;

right: 15px;

bottom: 100%;

width: 0;

height: 0;

content: "";

border-width: 0 6px 6px 6px;

border-style: solid;

border-color: #fff transparent;

}

.test .dropdown li {

float: left;

width: 129px;

font-size: 14px;

-webkit-transition: all .3s ease-out;

-moz-transition: all .3s ease-out;

-ms-transition: all .3s ease-out;

-o-transition: all .3s ease-out;

transition: all .3s ease-out;

text-align: center;

}

.test .dropdown li:first-of-type {

border-radius: 3px 3px 0 0;

}

.test .dropdown li:last-of-type {

border-radius: 0 0 3px 3px;

}

.test .dropdown li:hover {

color: #fff;

background: red;

}

$(function(){

function DropDown(el) {

this.dd = el;

this.span = this.dd.children('span');

this.li = this.dd.find('ul.dropdown li');

this.val = '';

}

DropDown.prototype.initEvents = function() {

var obj = this;

obj.dd.on('click', function(event) {

$(this).toggleClass('active').siblings().removeClass('active');

event.stopPropagation();

});

obj.li.on('click', function() {

var opt = $(this);

obj.val = opt.html();

if(obj.span.html() == obj.val) return;

obj.span.html(obj.val);

$(document).click(function() {

$('.test').removeClass('active');

});

})

}

var test1 = new DropDown($('#type'));

var test2 = new DropDown($('#kind'));

test1.initEvents();

test2.initEvents();

})

投资种类

  • 期货
  • 股票
  • 期权

投资类型

  • 趋势
  • 震荡
  • 套利
  • 选股
  • 择时
weixin_39930557
关注
before css 旋转_CSS伪类：CSS3鼠标滑过按钮动画第三节
weixin_32677301的博客
01-01 305
前言有了之前的两章，小伙伴们对按钮悬浮动画是否又有了新的认识呢？前面两章主要是从背景着手，而本章主要是围绕边框动画做效果。并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世界）也就到此结束了，本章结尾会对前3小节进行一定的总结。下面继续本小节的主题，请先看一下效果示例：看过前两小节的小伙伴，可能不需要看下面的源码，就知道如何实现了，大家可以先自己动手试试，然后再回头来看看。或许实现方式不...
before css 旋转_css before，after伪元素妙用
weixin_39866867的博客
12-20 455
我们知道，css伪元素包括after,before,first-letter等，通过合理的利用伪元素，我们可以让我们的结构更简洁。通常写法如p::after{content:' '},其中content内容可以是字符也可以是图片，例如p:before{content:'尾部'}，p:after { content:url(img.jpg); } ，我们最常用的可能是用来清除浮动或添加一些简单的元素...
before css 旋转_你所不知的 CSS ::before 和 ::after 伪元素用法
weixin_39837041的博客
12-20 290
Creative Button Styles一 基本语法在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：p:before {}不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老...
2019年，你就是我的晴阴雨雪天
weixin_46837985的博客
11-28 111
点击上方“前端进阶周刊”，选择“置顶或者星标”期待你的关注！1 引言本期分享一下如何仅用CSS3，实现单标签的动态晴阴雨雪。技术关键点就是“单标签”和“纯CSS”。先看下最终效果：再看看...
before css 旋转_七夕，当然少不了纯CSS的点缀啦
weixin_42467411的博客
12-28 478
作者：JowayYoung转发链接：https://mp.weixin.qq.com/s/pGAVZYvm3YGqnsJuc41shw前言以下程序猿通通指男性程序猿哈今天是一年一度的七夕，估计各位程序猿同行都不得不对心仪的妹纸吟诗作对了。「银烛秋光冷画屏，轻罗小扇扑流萤。天街夜色凉如水，卧看牵牛织女星。」虽然吟唱了唐朝杜牧大师的「七夕」，但好歹笔者也能倒背如流。单身的程序猿或准备脱单的程序猿怎么办...
cssselect：PythonCSS选择器
02-04
然而，它并不支持所有的CSS3选择器，例如`::before`和`::after`伪元素，以及一些更复杂的选择器，如`:nth-child()`和`:not()`。如果你需要这些功能，可能需要考虑其他库，如`BeautifulSoup`配合` SoupStrainer`。 #...
CSS伪元素深入解析：::before与::after的应用与优势
在CSS3中，伪元素的表示方式通常为双冒号`::`，如`::before` 和 `::after`，但在一些旧版本的浏览器中，单冒号`:`的写法也是支持的。对于`::selection`，由于它在CSS2.1规范中就已经存在，所以只接受双冒号写法。...
jquery+css3实现下拉选择列表上下滚动效果.zip
最新发布
09-27
- CSS3的`transition`属性可以应用于下拉列表，使得在打开和关闭时有平滑的动画效果。`transform`属性则可以用来控制滚动的行为，例如改变`translateY`值来模拟滚动。 - 如果`images`目录包含图标，可以在CSS中使用...
3种JS+CSS下拉菜单select美化代码
01-23
确保键盘导航仍然可用，添加适当的`aria`属性，如`aria-haspopup`和`aria-expanded`，以帮助屏幕阅读器用户理解下拉菜单的状态。 通过以上方法，你可以创建出既美观又实用的下拉菜单。记住，优化用户体验是关键，...
html+css+js下拉列表小三角.docx
11-22
但是，有时我们也需要实现下拉列表的小三角形样式，例如日期选择器中的下拉列表。今天，我们将讨论如何使用 HTML、CSS 和 JavaScript 实现下拉列表的小三角形样式。 首先，让我们来看一下 HTML 代码： ```html ...
单调栈
weixin_45798469的博客
09-28 266
文章目录 在 LIFO 数据结构中，将首先处理添加到队列中的最新元素。 与队列不同，栈是一个 LIFO 数据结构。通常，插入操作在栈中被称作入栈 push 。与队列类似，总是在堆栈的末尾添加一个新元素。但是，删除操作，退栈 pop ，将始终删除队列中相对于它的最后一个元素。 给你一个数组 [2,1,2,4,3]，你返回数组 [4,2,4,-1,-1]。 解释：第一个 2 后面比 2 大的数是 4; 1 后面比 1 大的数是 2；第二个 2 后面比 2 大的数是 4; 4 后面没有比 4 大的数，填 -1；
实现选择器（picker）插件
weixin_34129145的博客
03-13 1153
一个正常的选择器插件是非常细致的，一步一步来描述就是。手指滑动内容跟随手指滚动，当内容到底或触顶的时候就不能在滚动并且内容要一直保持在正确的位置上。 第一步分析插件结构 首先要有一个插件容器，整个插件容器包含渐变背景，选中实线，内容容器。效果类似于下面： 所以对应的代码如下: <div class="scroller-component" data-role="component"&g...
.before和.after+3D旋转案例（字体翻转的效果）
小头Sophia
03-20 3529
1.行内的盒子——考虑定位 2.3D旋转： rotaeX() rotateY() rotaeZ() 设置旋转中心点：transform-origin skew(x,y)  倾斜 示例代码： html> lang="en"> charset="UTF-8"> 伪元素练习 type="text/css"> *{margin: 0;p
十二、Before、after案例之旋转动画
weixin_40976555的博客
05-03 1249
一、思路分析1.首先构造很多嵌套的圆，给整体添加一个动画，由于时间相同，圆圈的大小不同，故转速不同呈现万花筒的旋转效果；2.添加彩色线条这里若是直接使用border来做，就会出现中间厚，两边窄的效果，        所以需要使用before以及after插入下上边框形成等厚度的彩色线条效果；语法：选择器：before{content:” ”;  //插入的内容}选择器：after{content:...
深入理解 CSS 的 :before 和 :after 选择器（制作select下拉列表美化插件）
weixin_33711641的博客
08-12 413
原文链接：http://www.cnblogs.com/LY-leo/p/5765598.html 对于 :before 和 :after 选择器，大家并不陌生，但是很少有人会主动去用它们。先解释下它们的定义和用法： :before 选择器在被选元素的内容前面插入内容，:after 选择器在被选元素的内容后面插入内容，都会使用 content 属性来指定要插入的内容。 有时候，项目中或多...
select 下拉列表选择框效果及美化（before 和 :after伪元素的妙用）
uffgfbft的博客
11-01 2996
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&a
css中如何实现帧布局_「css基础」Transforms 属性在实际项目中如何应用？
weixin_39585974的博客
11-21 292
关于Transform变形属性大家都不陌生吧，可以通过此属性实现元素的位移translate(x,y)，缩放scale(x,y)，2d旋转rotate(angle)，3d旋转rotate3d(angle),倾斜变换skew(x-angle,y-angle)等，你也许已经很熟悉了这些属性，或许你也会有这样的困惑，这些属性在实际项目中如何应用呢？今天的文章，笔者不会详细一一介绍相关属性，默许大家已经很...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值