CSS画icon图标系列(一)

ops/2024/11/8 20:49:14/

目录

前言:

一、向右箭头

1.原理:

2.代码实现

3.结果展示:

二、钟表

1.原理:

2.代码展示:

3.最终效果:

三、小手机

1.原理:

2.代码展示:

3.最后效果:

四、结束语


前言:

CSS是一种强大且灵活的样式语言,可以通过控制样式的各种属性来实现对网页的精确控制,使网页更具有吸引力和可读性。所以我们可以利用CSS来做我们的一些icon图标,灵活运用CSS中旋转,拉伸,扭曲裁剪,伪元素选择器,实现icon小图标,利用css来画小图标可以减少浏览器的请求,当然使用img标签或icon图标会大大提高我们开发的速度。

本节内容展示:

一、向右箭头

1.原理:

利用border属性,只添加相邻两个边框,使用transform属性进行旋转

2.代码实现

html代码:

css"><div class="right"></div>

css代码: 

css">  .right {/* 设置盒子的宽和高 */width: 8px;height: 8px;/* 添加边框颜色,以及边框样式为实线*/border: #666 solid;/* 只添加上边框和右边框 ,下边框和左边框为0*/border-width: 2px 2px 0 0;/* 旋转45度 */transform: rotate(45deg);}

3.结果展示:

总结:同样的我们可以利用旋转,来实现其他方向的箭头,也可以给下边框以及有边框添加边框属性。

二、钟表

1.原理:

利用一个div盒子,以及他自身的伪元素属性,相当于拥有三个盒子,利用定位,圆角来实现一个钟表图标。

2.代码展示:

html:

<div class="clock"></div>

css:

css">  /* 钟表 */.clock {/* 主体盒子 */width: 24px;height: 24px;/* 添加宽高 */border: 1px solid rgb(250, 250, 250);/* 圆角为50%,就是圆形*/border-radius: 50%;/* 添加定位 */position: relative;}/* 利用伪元素 */.clock::after {/* 默认属性 */content: "";/* 转换为块级元素*/display: block;/* 定位:父相子绝*/position: absolute;/* 设置宽高*/width: 1px;height: 10px;/* 添加背景*/background: rgb(250, 250, 250);/* 相对于主体的位置*/top: 3px;left: 11px;}.clock::before {content: "";display: block;position: absolute;/* 设置宽高*/width: 1px;height: 6px;/* 设置背景*/background: rgb(250, 250, 250);/* 旋转作为时针*/transform: rotate(45deg);/* 相对于主体的位置 */top: 12px;left: 9px;}

3.最终效果:

三、小手机

1.原理:

利用border属性,添加不同的边框宽度实现。

2.代码展示:

html:

<div class="money">¥</div>

css:

css">   /* money图标 */.money {/* 利用flex布局让其垂直水平居中显示 */display: flex;justify-content: center;align-items: center;/* 去除字体默认样式 */font-style: normal;/* 设置宽高 */width: 15px;height: 24px;/* 添加边框 实线 */border: rgb(250, 250, 250) solid;/* 上右左2px  下3px*/border-width: 2px 2px 3px 2px;/* 添加圆角属性 */border-radius: 3px;}

3.最后效果:

四、结束语

今天我们主要学习了,向右箭头,钟表,小手机图标的实现,下一节继续来使用纯css完成小图标,本节css画icon图标就结束了,下一节再见。


http://www.ppmy.cn/ops/132028.html

相关文章

CompletableFuture:supplyAsync与runAsync

CompletableFuture是Java 8中引入的一个类&#xff0c;用于简化异步编程和并发操作。它提供了一种方便的方式来处理异步任务的结果&#xff0c;以及将多个异步任务组合在一起执行。CompletableFuture支持链式操作&#xff0c;使得异步编程更加直观和灵活。 在引入CompletableF…

C++ vector

1.vector的介绍 vector的文档介绍 2.vector的使用 vector学习时一定要学会查看文档&#xff1a;vector文档介绍&#xff0c;vector在实际中非常的重要。 在实际中 我们熟悉常见的接口就可以&#xff0c;下面列出了哪些接口是要重点掌握的。 2.1vector的定义 2.2vector ite…

C++入门基础知识140—【关于C++ 类构造函数 析构函数】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于C 类构造函数 & 析构函数的相关内容…

基于百度飞桨paddle的paddlepaddle2.4.2等系列项目的运行

PPASR 必看&#xff01;&#xff01;&#xff01; PaddleSpeech develop --> PaddlePaddle 2.5.0/2.5.1 PaddleSpeech < 1.4.1 --> PaddlePaddle < 2.4.2 1.创建虚拟环境 conda create --name test python3.10 2.激活环境&#xff0c;安装ppasr的paddlepaddl…

基于OpenCV的相机捕捉视频进行人脸检测--米尔NXP i.MX93开发板

本篇测评由优秀测评者“eefocus_3914144”提供。 本文将介绍基于米尔电子MYD-LMX93开发板&#xff08;米尔基于NXP i.MX93开发板&#xff09;的基于OpenCV的人脸检测方案测试。 OpenCV提供了一个非常简单的接口&#xff0c;用于相机捕捉一个视频(我用的电脑内置摄像头) 1、安…

【WebRTC】视频采集模块流程的简单分析

目录 1.从摄像头获取视频帧&#xff08;CaptureInputPin::Receive()&#xff09;2.处理摄像头获取的帧&#xff08;CaptureSinkFilter::ProcessCaptureFrame())3.处理Windows层帧信息并发送到帧处理器&#xff08;VideoCaptureImpl::IncomingFrame())4.帧处理器&#xff08;Vid…

【系统架构设计师】2021年真题论文: 论面向方面的编程技术及其应用(AOP)(包括解题思路和素材)

更多内容请见: 备考系统架构设计师-专栏介绍和目录 文章目录 真题题目(2021年 试题1)解题思路面向方面的编程(AOP)技术概念和原理AOP的核心机制AOP 在软件系统开发中的应用场景AOP 应用案例分析论文素材参考真题题目(2021年 试题1) 面向过程编程是一种自顶向下的编程方…

2024MoonBit全球编程创新挑战赛参赛作品“飞翔的小鸟”技术开发指南

本文转载自 CSDN&#xff1a;https://blog.csdn.net/m0_61243965/article/details/143510089作者&#xff1a;言程序plus 实战开发基于moonbit和wasm4的飞翔的小鸟游戏 游戏中&#xff0c;玩家需要通过上下左右按键控制Bird&#xff0c;在不断移动的障碍pipe之间穿梭&#xf…