007鼠标经过显示三角

最新推荐文章于 2022-07-18 15:03:42 发布

陀陀吖

最新推荐文章于 2022-07-18 15:03:42 发布

阅读量208

点赞数

分类专栏： h5c3

本文链接：https://blog.csdn.net/weixin_40422393/article/details/88937508

版权

h5c3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>s三角</title>
	<style>

	@font-face {     /*声明字体，引用字体*/
		  font-family: "icomoon";      /*这里的iconfont我们可以改，表示字体的官网*/
		  src: url('fonts/icomoon.eot?7kkyc2');
		  src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
		  url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
		  url('fonts/icomoon.woff?7kkyc2') format('woff'),
		  url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
		  font-weight: normal;     
		  font-style: normal;
		}

	div{
		width: 200px;
		height: 30px;
		border:1px solid #ccc;
		margin:100px auto;
		position: relative;
	}
	div::before{     /*是一个能插入元素的选择器*/
		content: "\e901";
		font-family: "icomoon";
		position: absolute;
		top: 5px;
		right: 10px;
		transition: all 0.5s;      /*控制时间   针对于盒子*/
	}
	div:hover{
		border:1px solid red;
	}
	div:hover::before{
		color: red;
		transform: rotate(180deg);        /*旋转180度*/
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

陀陀吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
007鼠标经过显示三角

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>s三角</title> <style> @font-face { /*声明字体，引用字体*/ font-family: "icomoon"; ...
复制链接

扫一扫

专栏目录