CSS画icon图标系列(一)

目录

前言:

一、向右箭头

1.原理:

2.代码实现

3.结果展示:

二、钟表

1.原理:

2.代码展示:

3.最终效果:

三、小手机

1.原理:

2.代码展示:

3.最后效果:

四、结束语


前言:

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

本节内容展示:

一、向右箭头

1.原理:

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

2.代码实现

html代码:

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

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:

  /* 钟表 */.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:

   /* 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.rhkb.cn/news/464877.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

直播系统搭建教程安装说明

需要安装的软件(宝塔【软件商店】中查找安装): 1.PHP7.0 ~ PHP7.3 需要安装的扩展:(宝塔【PHP管理】【安装扩展】中安装) *PDO PHP Extension * MBstring PHP Extension * CURL PHP Extension * Mylsqi PHP Extension * Redis PHP Extension * fileinfo PHP Extension …

linux笔记(nginx)

一、Nginx 概念 Nginx 是一款轻量级的高性能 Web 服务器、反向代理服务器以及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。它可以在大多数 Unix/Linux 操作系统上运行&#xff0c;也有 Windows 版本。主要用于处理高并发连接&#xff0c;能够快速、高效地为用户提供…

103 - Lecture 1

Introduction to Database 一、Introduction to Database Systems 1. 数据的定义 What is Data? EX: data could be a docx file storing your project status report; data could be a spreadsheet containing information • 数据只有在设计的场景中才有意义。&#xff…

微信公众号绑定设计-WeChat public platform bing and send message

一 WeChat bind ui 二、message style 三、 consume style 四、send log 五、temp setting

基于Python的乡村居民信息管理系统【附源码】

基于Python的乡村居民信息管理系统 效果如下&#xff1a; 系统主页面 系统登录页面 管理员主页面 居民管理页面 政务学习页面 土地信息管理页面 个人信息管理页面 居民登陆页面 村委人员主页面 研究背景 随着信息技术的飞速发展和乡村振兴战略的深入实施&#xff0c;传统的乡…

MySql中索引为什么用B+树,他有什么特点?时间复杂度是多少?能存多少数据?是不是只能三层?他与B-树有什么不同?还有其它的树你是是否知道?

平衡二叉树 平衡二叉树又被称为AVL树平衡二叉树是一颗空树或者它的左右两个子树的高度差的绝对值不超过1&#xff0c;并且左右子树也是平衡树非叶子节点值大于左子节点值而小于右子节点值非叶子节点最多拥有两个子节点 平衡二叉树的不足之处及时间复杂度 如果每次插入的数据都…

【初阶数据结构篇】链式结构二叉树(续)

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…

VMWARE ESXI VMFS阵列故障 服务器数据恢复

1&#xff1a;河南用户一台DELL R740 3块2.4T硬盘组的RAID5&#xff0c;早期坏了一个盘没有及时更换&#xff0c;这次又坏了一个&#xff0c;导致整组RAID5处于数据丢失的状态&#xff0c; 2&#xff1a;该服务器装的是VMware ESXI 6.7&#xff0c;用户把3块硬盘寄过来进行数据…

使用docker安装zlmediakit服务(zlm)

zlmediakit安装 zlmediakit安装需要依赖环境和系统配置&#xff0c;所以采用docker的方式来安装不容易出错。 docker pull拉取镜像(最新) docker pull zlmediakit/zlmediakit:master然后先运行起来 sudo docker run -d -p 1935:1935 -p 80:80 -p 8554:554 -p 10000:10000 -p …

uni-app跨域set-cookie

set-cookie的值是作为一个权限控制的 首先&#xff0c;无论什么接口都会返回一个set-cookie&#xff0c;但未登录时&#xff0c;set-cookie是没有任何权限的 其次&#xff0c;登录接口请求时会修改set-cookie&#xff0c;并且在后续其他接口发起请求时&#xff0c;会在请求头…

【论文速读】| PathSeeker:使用基于强化学习的越狱攻击方法探索大语言模型的安全漏洞

基本信息 原文标题: PathSeeker: Exploring LLM Security Vulnerabilities with a Reinforcement Learning-Based Jailbreak Approach 原文作者: Zhihao Lin, Wei Ma, Mingyi Zhou, Yanjie Zhao, Haoyu Wang, Yang Liu, Jun Wang, Li Li 作者单位: Beihang University, Nany…

黑马官网2024最新前端就业课V8.5笔记---HTML篇

Html 定义 HTML 超文本标记语言——HyperText Markup Language。 标签语法 标签成对出现&#xff0c;中间包裹内容<>里面放英文字母&#xff08;标签名&#xff09;结束标签比开始标签多 /拓展 &#xff1a; 双标签&#xff1a;成对出现的标签 单标签&#xff1a;只有开…

NXP Zigbee JN5169 开发环境软件 文档和支持资源打包下载

NXP Zigbe JN5169软件、文档和支持资源下载 从NXP官网下载https://www.nxp.com.cn/pages/jn516x-7x-zigbee-3-0:ZIGBEE-3-0&#xff0c;有点蛋疼网站&#xff0c;要注册会员&#xff0c;所以我打包好所有NXP Zigbe JN5169所需的 软件、文档和支持资源打包好&#xff0c;以供开…

基于matlab的语音识别系统

一&#xff0e;设计任务及要求 1.1设计任务 作为智能计算机研究的主导方向和人机语音通信的关键技术&#xff0c;语音识别技 术一直受到各国科学界的广泛关注。以语音识别开发出的产品应用领域非常广泛&#xff0c;有声控电话交换、语音拨号系统、信息网络查询、家庭服务、宾馆…

使用WebStorm开发Vue3项目

记录一下使用WebStorm开发Vu3项目时的配置 现在WebStorm可以个人免费使用啦&#xff01;&#x1f929; 基本配置 打包工具&#xff1a;Vite 前端框架&#xff1a;ElementPlus 开发语言&#xff1a;Vue3、TypeScript、Sass 代码检查&#xff1a;ESLint、Prettier IDE&#xf…

Ansys HFSS:外壳的屏蔽效果演示

欢迎回来&#xff01;随着电子系统变得越来越复杂和集成&#xff0c;确保适当的屏蔽以减轻电磁干扰 &#xff08;EMI&#xff09; 变得越来越重要。 继续讨论屏蔽效果&#xff0c;我们现在将重点转移到另一个强大的工具上&#xff1a;Ansys HFSS&#xff08;高频结构仿真器&am…

Python基于TensorFlow实现双向循环神经网络GRU加注意力机制分类模型(BiGRU-Attention分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 随着深度学习技术的发展&#xff0c;循环神经网络&#xff08;RNN&#xff09;及其变种如门控循环…

【C++】C++的单例模式

二十四、C的单例模式 1、C的单例模式 本小标题不是讨论C的语言特性&#xff0c;而是一种设计模式&#xff0c;用于确保一个类在任何情况下都只有一个实例&#xff0c;并提供一个全局访问点来获取这个实例。即C的单例模式。这种模式常用于资源管理&#xff0c;如‌线程池、‌缓…

单元测试(Junit)

系统—模块—子模块&#xff0c;子模块中不可分割的程序单元的测试&#xff0c;单元的粒度根据实际情况可能是 类或方法等。 面向对象编程中&#xff0c;最小单元就是方法。 单元测试目的是在集成测试和功能测试之前对系统可测试单元进行逐一检查和验证。 单元测试基本原则 …

这个自动化框架吧,解决接口间数据依赖

在实际的测试工作中&#xff0c;在做接口自动化测试时往往会遇到接口间数据依赖问题&#xff0c;即API_03的请求参数来源于API_02的响应数据&#xff0c;API_02的请求参数又来源于API_01的响应数据。 因此通过自动化方式测试API_03接口时&#xff0c;需要预先请求API_02接口&a…