html5css3利用伪类做小图标

最新推荐文章于 2024-06-05 22:45:58 发布
最新推荐文章于 2024-06-05 22:45:58 发布
阅读量3.5k 收藏 1
点赞数 1
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GS2016/article/details/79230021
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>利用伪类做小图标</title>
		<style type="text/css">
			@font-face {
				font-family: 'guosheng';
				src: url('fonts/iconfont.eot');
				src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'), 
				url('fonts/iconfont.woff') format('woff'), 
				url('fonts/iconfont.ttf') format('truetype'), 
				url('fonts/iconfont.svg#iconfont') format('svg');
			}
			div{
				width:200px;
				height:200px;
				border: 1px solid gray;
				margin:100px auto;
				font-family: guosheng;
				text-align:center;
				line-height:200px;
				font-size: 150px;
			}
最低0.47元/天 解锁文章
郭胜_自强
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
纯CSS3伪类实现icon标签效果
06-12
效果描述： 之前在网页中看到很多类似标签的效果，第一反应就是，这肯定是图片背景铺成的嘛，顶多使用svg 后来仔细看了下代码才发现，html中仅仅是一个a标签而已，其他的都在CSS中实现 并且没有使用任何图片之类的东东，主要依靠CSS3代码中的::before   ::after两个伪类 以前我还是比较忽视这两个家伙的，今天第一次见到原来伪类的好处这么多，以后会多多推荐CSS3伪类实现的效果 使用方法： 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = “lanren”即可
关于使用css伪类实现小图标
weixin_30338481的博客
03-02 488
效果: .person_use>span{ display:block; width:0; height:0; border-width:10px; border-style:solid; border-color:transparent transparent #ddd transparent ; position:abso...
CSS3新增属性
最新发布
2302_76678927的博客
06-05 845
1.1 resize调整盒子大小：resize属性可以控制是否允许用户调节元素大小none ： 不允许调整元素大小both ： 用户可以调节元素的宽高horizontal ： 用户可以调节元素宽度vertical ：用户可以调节元素高度1.2 box-shadow盒子阴影使用box-shadow属性为盒子添加阴影语法：值h-shadow ： 水平阴影的位置，必须填写，可以为负值v-shadow ：垂直阴影的位置，必须填写，可以为负值。
css写√的图标_关于使用css伪类实现小图标
weixin_39581099的博客
02-01 683
效果:.person_use>span{display:block;width:0;height:0;border-width:10px;border-style:solid;border-color:transparent transparent #ddd transparent ;position:absolute;top:-20px;left:50%;margin-left: -5p...
使用伪类元素画图标
weixin_30379531的博客
07-29 218
.class:after{ content: ''; border-top: 8px solid rgb(233, 221, 221); border-left: 18px solid transparent; border-right: 18px solid tra...
css3之before、after伪类以及简单实现购物车图标
sxjit的博客
05-17 843
“伪类”可以说是css中的特效元素，按本人亲身经历来看，在不是很系统的自学过程中常常会忽略伪类。这里带大家快速了解:before和:after伪类和简单上手购物车图标的demo。 定义：:before和:after伪类的作用就是在指定的元素的内容之前或之后插入一个元素。 重点：插入的该元素有自带content属性，可直接指定元素内容，也可以赋空值""。 其实在我的上一篇关于实现爱心图案的文章中就已经用到了伪类，就是那样的一种使用方式。除此之外，最常用的用法之一就是利用:after伪类清除浮动： .div {
HTML5+CSS3气泡式图标菜单特效特效代码
03-20
1. **选择器**：CSS3引入了更强大的选择器，如伪类选择器`:hover`，使得我们可以仅在鼠标悬停在特定元素上时改变其样式，比如在这里可以实现气泡图标的高亮效果。 2. **转换（Transforms）**：通过`transform`属性...
HTML5+CSS3期末大作业——城市简介源码
05-05
4. CSS3选择器：使用更高级的选择器，如类选择器、ID选择器、伪类选择器，来更精确地控制样式。 5. 样式动画：利用CSS3的transition和animation属性，为城市图片、标题或其他元素添加动态效果，增加互动性和吸引力...
CSS3精美小图标菜单导航
04-06
标题“CSS3精美小图标菜单导航”暗示了这个项目是利用CSS3来创建一个具有视觉吸引力的小图标菜单，它可能是网站导航栏的一部分。这种类型的菜单设计能够提升用户体验，因为它将图标与文字相结合，使用户更容易识别和...
css3小图标菜单导航特效代码
03-20
在本案例中，“css3小图标菜单导航特效代码”利用了CSS3的一些核心特性，如伪类、过渡效果和动画，来创建一个美观且交互性强的小图标菜单导航。 1. **伪类选择器** CSS3中的伪类选择器允许我们为元素在不同状态下...
CSS3和HTML5图片加工前后对比代码
04-06
- 使用CSS3的伪类（`:before`和`:after`）和透明度控制，可以实现图片的对比展示，例如，将原图和处理后的图重叠显示，通过透明度变化实现过渡效果。 - 利用JavaScript库如jQuery，可以实现更复杂的交互式图片比较...
html伪类选择器图片,css3 伪类选择器快速复习小结
weixin_35076990的博客
06-25 173
前言如果说 css 作为前端开发的基本功, 那么 "选择器" 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计.本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们:first-childlast-childfirst-of-typelast-of-typeonly-childonly-of-typenth-childnth-last-ch...
伪类选择器添加阿里图标的方法
Callback_heaven
11-18 1367
阿里图标库下载源码得到iconfont.css @font-face {font-family: "iconfont"; src: url('https://at.alicdn.com/t/iconfont.eot?t=1572835366254'); /* IE9 */ src: url('https://at.alicdn.com/t/iconfont.eot?t=1572835...
使用伪类:before在元素前面插入css绘制的图标
余浩的博客
05-14 2399
项目中总是能遇到奇怪的需求，比如今天就遇到了需要在某个弹窗标题元素前面插入一个图标。但是最好不要引入图片。 原来的弹窗 新弹窗 实现代码 主要目的就是在title前面通过伪类:before插入一个css样式元素。 使用border-radius: 50%;绘制圆形。 使用before {content: "?";}添加伪元素。 body .ui-dialog .ui-dialog-titlebar .ui-dialog-title:before { content: "?"; displ.
html中伪元素怎么更改图片,如何改变css伪元素的样式
weixin_29737443的博客
06-04 545
本篇文章介绍了如何改变css伪元素样式的方法，希望对学习前端css的朋友有帮助！一、CSS伪元素CSS 伪元素用于向某些选择器设置特殊效果。伪元素的用法如下：selector:pseudo-element {property:value;}CSS 类也可以和伪元素搭配使用selector.class:pseudo-element {property:value;}二、修改伪元素样式( 推荐学习：C...
关于使用伪类添加icon图标的笔记
m0_63107133的博客
12-09 398
关于使用伪类添加icon图标的笔记
如何用css after before伪类写一个列表icon图标？
唐家小妹的博客
04-28 1047
如图所示，如何用css伪类实现？先自己思考着写一下代码，看看自己是否能做出来？ 下面附上答案： <div class="txm-map-btn"><span></span></div> /* -------css代码部分------- */ .txm-map{ border: #C03C42 2px solid; width: 40px; height:40p..
html伪类元素加图片,CSS伪类选择器:before、:after使用：插入字符、插入图片、插入项目编号...
weixin_35042833的博客
06-04 3381
before: 伪元素选择器用于在某个元素之前插入一些内容伪类选择器:before使用content属性插入字符、属性插入图片css3.p_before:before {content: 'H';color: #01B4EE;}.p_beforeImg {background: #eeeeee;width: 200px;height: 80px;border-radius: 6px;padding...
css动画中文字慢慢显示,利用定时器和css3动画制作文字依次渐变显示的效果
weixin_36064512的博客
08-03 2906
如上图，这种效果看着是不是挺“柔”的附代码文字一次渐变出现body{background-color: #333333;padding: 20px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}div,span{color: #ffffff;font-size: 30px;}.h...
HTML5与CSS3实战指南
6. **Introducing CSS3** - 这一章引导读者进入CSS3的世界，涵盖了选择器的扩展、伪类和伪元素的使用，以及新的布局模型。 7. **CSS3 Gradients and Multiple Backgrounds** - 详细讲解了CSS3的渐变效果和多重背景...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值