css三角形， css制作select 记录

最新推荐文章于 2025-04-26 10:29:44 发布

原创最新推荐文章于 2025-04-26 10:29:44 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css伪类 #css select #三角形 #select

学习同时被 3 个专栏收录

47 篇文章

订阅专栏

知识点

45 篇文章

订阅专栏

get

44 篇文章

订阅专栏

博客围绕CSS相关技术展开，介绍了CSS三角形、空心三角的制作，还提及用CSS制作select，以及CSS border流动线条，阐述了通过transition实现鼠标滑过边框线条动画特效的原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css三角形

.drop-icon {

position: absolute;

width: 0;

height: 0;

border-right: 4px solid transparent;

border-left: 4px solid transparent;

border-top: 5px solid #C8C8C8;

}

空心三角

.css{
content: '';

position: absolute;

width:10px;

height:10px;

display:block;

border-top:0;

border-left:0;

border-bottom:1px #3C3C3C solid;

border-right:1px #3C3C3C solid;

transform: rotate(135deg)
}

css制作select

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<style>

*{

margin: 0;

padding: 0px;

}

/* select */

ul{

list-style: none;

}

.reasonBox{

width: 233px;

position: relative;

}

.reasonBox ul li span{display: block;text-decoration: none;height: 31px;width: 223px;line-height: 30px;border: 1px solid #D6E2ED;/* border-radius: 4px; */padding-left: 10px;background-color: #fff;color: #181818;font-size: 14px;/* left: 10px; *//* position: relative; */padding-top: 0px;color: #181818;font-size: 12px;font-weight: bold;}

.reasonBox ul li span::after{

position: absolute;

content: '';

width:0;

height:0;

border-right: 4px solid transparent;

border-left: 4px solid transparent;

border-top: 5px solid #C8C8C8;

right: 12px;

top: 14px;

}



.reasonBox .drop-down{height: 30px;width: 233px;cursor: pointer;/* padding-left: 10px; */}

.reasonBox .drop-down-content{z-index:111;position: absolute;display: none;overflow: hidden;width: 256px;background-color: #fff;box-shadow: 0 1px 6px 0 rgba(0,0,0,0.15);border: 1px solid #ccc;border-radius: 4px;margin-top: 2px;margin-top: 6px;}

.reasonBox .drop-down-content li{height: 30px;line-height: 30px;padding-left: 10px;}



.reasonBox .drop-down-content li:hover{background-color: #6D9CFC;color: #fff;}

.reasonBox .drop-down .active{display: block;width: 233px;}

select{

outline: none;

}

</style>

<body>

<div class="reasonBox">

<ul class="select">

<li class="drop-down">

<span id="reasontxt" class="bgimg-down">请选择退款原因</span>

<ul class="drop-down-content">

<li class="fs14 c_999">不喜欢/不想要</li>

<li class="fs14 c_999">空包裹</li>

<li class="fs14 c_999">未按照约定时间发货</li>

<li class="fs14 c_999">快递物流一直未送达</li>

<li class="fs14 c_999">货物破损已拒签</li>

</ul>

</li>

</ul>

</div>

</body>

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

<script type="text/javascript">

//下拉框 select

var selectFlag=false;

$(".select").click(function(){

let that = this

selectShow(that)

})

function selectShow(that){

selectFlag=!selectFlag;

//show

if(selectFlag){

// $(".drop-down-content").addClass("active")

$(that).find(".drop-down-content").addClass("active")

}else{

// $(".drop-down-content").removeClass("active")

$(that).find(".drop-down-content").removeClass("active")

}

}

//监听选择点击事件

function selector(){

// var ul=document.querySelectorAll(".drop-down ul")[0]

var ul1 = $(".drop-down ul")

$(ul1).click(function(e){

var el=e.target

while(el.tagName!=='LI'){

if(el==ul){

el=null;

break;

}

el=$(this).parent();

}

if (el) {

console.log(el.innerHTML)

$(this).parent().parent().find("#reasontxt").html(el.innerHTML)

$(this).parent().parent().find("#reasontxt").css("color","#4C89FB")

$(this).parent().parent().find("#reasontxt").css("border","1px solid #4C89FB")

$(this).parent().parent().find(".drop-icon").css("border-top","5px solid #4C89FB")

}

})

}

window.onload=function(){

selector()

}

</script>

</html>

css border流动线条

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
:root {
	--border-anim-size: 10em;
	--border-anim-width: calc(var(--border-anim-size) / 20);
	--border-anim-width-double: calc(var(--border-anim-width)*2);
	--border-anim-duration: 5s;
	--border-anim-border-color: gray;
	--border-anim-hover-color: LightCoral;
}
body {
	display: flex;
}
.border-anim {
	width: var(--border-anim-size);
	height: var(--border-anim-size);
	position: relative;
	border: 1px solid  var(--border-anim-border-color);
}
.border-anim::before, .border-anim::after {
	content: '';
	position: absolute;
	border: var(--border-anim-width) solid var(--border-anim-border-color);
	/* 让边框在内容区域内绘制 */
	box-sizing: border-box;
	transition: background-color 1s;
}
.border-anim::before {
	animation: anim-border-run calc(var(--border-anim-duration) * 2) linear infinite;
}
.border-anim::after {
	animation: anim-border-run calc(var(--border-anim-duration) * 2) calc(var(--border-anim-duration) / -1) linear infinite;
}
.border-anim:hover::before, .border-anim:hover::after {
	background-color: var(--border-anim-hover-color);
}
.border-anim-content {
	width: calc(100% - var(--border-anim-width-double));
	height: calc(100% - var(--border-anim-width-double));
	margin: var(--border-anim-width);
	border: 1px solid var(--border-anim-border-color);
}
@keyframes anim-border-run {
	/* 这里将动画分成了4步；也可以改为2步，这时before和after用的就要是两套keyframes了 */
	from, to {
		width: var(--border-anim-width-double);
		height: 100%;
		top: 0;
		left: 0;
	}
	25% {
		width: 100%;
		height: var(--border-anim-width-double);
		top: calc(100% - var(--border-anim-width-double));
		left: 0;
	}
	50% {
		width: var(--border-anim-width-double);
		height: 100%;
		top: 0;
		left: calc(100% - var(--border-anim-width-double));
	}
	75% {
		width: 100%;
		height: var(--border-anim-width-double);
		top: 0%;
		left: 0%;
	}
	/* 需要设置临界效果，否则会渐变 */
	from, to, 24.9% {
		border-left-color: var(--border-anim-border-color);
		border-top-color: transparent;
		border-right-color: transparent;
		border-bottom-color: var(--border-anim-border-color);
	}
	25%, 49.9% {
		border-left-color: transparent;
		border-top-color: transparent;
		border-right-color: var(--border-anim-border-color);
		border-bottom-color: var(--border-anim-border-color);
	}
	50%, 74.9% {
		border-left-color: transparent;
		border-top-color: var(--border-anim-border-color);
		border-right-color: var(--border-anim-border-color);
		border-bottom-color: transparent;
	}
	75%, 99.9% {
		border-left-color: var(--border-anim-border-color);
		border-top-color: var(--border-anim-border-color);
		border-right-color: transparent;
		border-bottom-color: transparent;
	}
}
</style>
</head>
<body>
<section>
<h1>(1)通过两矩形的移动来制作动画</h1>
<div class="border-anim">
	<div class="border-anim-content"></div>
</div>
</section>
</body>
</html>

CSS通过transition 实现的鼠标滑过边框线条动画特效原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
.border{position: relative;width:100px;height:100px;background: #aaa;}
.border:before,.border:after{content:"";display:block;width: 0;height:0;border:2px solid transparent;box-sizing: border-box;position: absolute;}
 
.border:before{top:0;left:0;transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;}
.border:after{right:0;bottom:0;transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in ;}
 
 
 /* css hover 触发 */
/* .border:hover:before{width:100%;height:100%;transition:width 0.2s ease-in ,height 0.2s ease-in 0.2s;border-top-color:#ff5b00;border-right-color:#ff5b00;}
.border:hover:after{width:100%;height:100%;transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.4s,height 0.3s ease-in 0.6s;border-bottom-color:#ff5b00;border-left-color:#ff5b00;} */

/* js添加类名class 触发 */
.border-animate:before{width:100%;height:100%;transition:width 0.2s ease-in ,height 0.2s ease-in 0.2s;border-top-color:#ff5b00;border-right-color:#ff5b00;}
.border-animate:after{width:100%;height:100%;transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.4s,height 0.3s ease-in 0.6s;border-bottom-color:#ff5b00;border-left-color:#ff5b00;}


</style>
<body>
    <div class="border"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
    $('.border').addClass('border-animate');
</script>
</html>