纯CSS实现小圆点和三角形图案

最新推荐文章于 2024-07-01 10:07:44 发布
最新推荐文章于 2024-07-01 10:07:44 发布
阅读量9.7k 收藏 1
点赞数
分类专栏： 前端 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS制作三角形和小圆点</title>
<style>
.arrowbox{width:40px;height:30px;background: #000;padding:10px;position: relative;text-align:center;margin:20px;color:#fff;line-height:30px;font-size:12px;}
.arrowbox span{display: inline-block;overflow:hidden;vertical-align: middle;position:absolute;top:22px;right:5px;line-height:12px;font-size:12px;}
.arrowbox span em{display:block;font-family:"Simsun";font-style:normal;font-weight:normal;}
.arrowbox span.size1{width:7px;height:4px;}
.arrowbox span.w_e{width:4px;height:7px;}
.arrowbox span.size2{width:14px;height:8px;}
.arrowbox span em.north{color:#fff;margin:-7px 0 0 -2px;}
.arrowbox span em.south{color:#fff;margin:0 0 0 -2px;}
.arrowbox span.w_e em.east{color:blue;margin: -2px 0 0 -7px;}
.arrowbox span.w_e em.west{color:yellow;margin:-2px 0 0 0;}
.arrowbox span.size2 em.south{margin:-5px 0 0 0}
.arrowbox span.size2 em.north{margin:2px 0 0 0}
.round{width:16px;height:16px;display: inline-block;font-size:20px;line-heigth:16px;text-align:center;color:#f00;text-decoration:none}
.round:hover{color:blue;text-decoration:none} 
</style>
</head>
<body>
<div class="arrowbox">首页<span class="size1"><em class="north">◆</em></span></div>
<div class="arrowbox">首页<span class="size1"><em class="south">◆</em></span></div>
<div class="arrowbox">首页<span class="w_e"><em class="east">◆</em></span></div>
<div class="arrowbox">首页<span class="w_e"><em class="west">◆</em></span></div>
<div class="arrowbox">首页<span class="size2"><em class="south">◆</em></span></div>
<div class="arrowbox">首页<span class="size2"><em class="north">◆</em></span></div>
<p>用font-size控制圆点的大小</p>
<a href="#" class="round">●</a>
</body>
</html>


ufojoan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css中的小圆点
weixin_54889883的博客
02-09 368
小圆点 方法一、i 标签 方法二、div 标签 结果： 方法三、界面重构 结果： 方法四、ul 标签 结果：
css生产圆点
qq_24343389的博客
03-06 950
.news-list .item-badge { padding: 4.5px; position: absolute; margin-top: 5px; margin-left: -8px; border-radius: 50%; background-image: linear-gradient(-180deg, #ff5555 0%, #Ff5555 100%);}
纯CSS实现状态圆点
热门推荐
weixin_42194386的博客
11-06 1万+
不多说，直接上代码 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style type="text/css"&gt;     
CSS 背景添加白色小圆点样式
最新发布
m0_65607651的博客
07-01 213
CSS 背景添加白色小圆点样式
CSS伪类选择器在元素前面加小圆点
m0_62111953的博客
08-31 689
【代码】用伪类选择器在状态中在小圆点。
[css] 小案例---溢出显示三个小圆点 单行文本 多行文本
qq_14993591的博客
08-05 470
li{ border: 1px solid #000; width: 200px; /* 文本不折行 */ white-space: nowrap; /* 溢出隐藏 */ overflow: hidden; /* 溢出显示3个小圆点 */ text-overflow: ellipsis; } 例子：
css实现带箭头和圆点的轮播
09-22
主要介绍了css实现带箭头和圆点的轮播的相关资料,当鼠标移入图片、圆点和方向键时，停止轮播，移除恢复。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
纯CSS3实现图文轮播切换特效
06-24
在本文中，我们将深入探讨如何使用纯CSS3实现图文轮播切换特效，这是一种无需JavaScript的高效解决方案，适合那些希望在网站上添加动态效果但又不希望增加额外脚本负担的开发者。我们将分析实现这一功能的关键CSS3...
纯CSS3实现图文轮播焦点图插件
11-24
【纯CSS3实现图文轮播焦点图插件】 在网页设计中，图文轮播焦点图是一种常见的元素，它能够高效地展示多张图片或信息，同时保持页面的整洁。传统上，这种效果需要JavaScript库来实现，但随着CSS3技术的发展，我们...
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
10-19
在本文中，我们将探讨如何使用JQuery、HTML和CSS实现一个带有小圆点和左右按钮的轮播图实例。这个轮播图是一种常见的网页元素，用于展示多张图片或内容，通过用户交互（如点击按钮或自动滚动）来切换显示的内容。 ...
纯CSS3代码实现switch滑动开关按钮效果
09-27
总的来说，这个纯CSS3实现的switch滑动开关按钮效果充分利用了CSS选择器、伪元素和过渡动画，无需JavaScript就能达到良好的交互体验。对于前端开发者来说，这是一种高效且易于维护的实现方式，尤其适用于轻量级的...
纯CSS3发光3D圆点背景特效特效代码
03-20
纯CSS3发光3D圆点背景特效是一款基于css3 keyframes属性绘制的白色透明发光圆点粒子3D旋转背景动画特效。
自动轮播+小圆点实现
07-28
轮播——小圆点
纯CSS实现Lavalamp效应的滑动菜单效果
09-25
总结起来，纯CSS实现的Lavalamp滑动菜单效果主要依赖于CSS3的转换和相邻兄弟选择器，通过精心设计的CSS样式和伪元素，我们可以创建出各种富有动态感的导航菜单。这三个例子展示了不同的视觉效果，但核心原理是一致的...
使用纯CSS3实现图片轮播效果源码免费下载
11-04
7. **指示器**：可选地，还可以添加指示当前展示的图片的指示器，通常是一系列小圆点，通过CSS3的`content`属性和伪元素实现。 8. **兼容性考虑**：尽管现代浏览器普遍支持CSS3，但在设计时仍需注意老版本浏览器的...
纯css3实现花格纹理背景 纯css3实现花格纹理背景网页特效.zip
11-25
本教程将重点讲解如何利用纯CSS3实现花格纹理背景，以此提升网页的视觉效果和用户体验。 首先，让我们理解花格纹理背景的基本概念。花格纹理通常是指一种由小方格组成的图案，这些方格可能有不同的颜色或者样式，...
CSS实现圆圈发光效果
jeremygeng的博客
10-29 5593
CSS实现圆圈发光效果 html <div class="round"> <div class="circle"> <a href="https://www.jsdaima.com/" target="_blank">大数据</a> </div> <div clas...
css伪类元素实现小圆点效果
浩星
05-08 5421
使用伪类元素 ::before，::after 来实现 小圆点效果。
css li修改小圆点的颜色
qq_46617584的博客
09-19 1903
css li修改小圆点的颜色
css 带小圆点轮播图
10-18
CSS带小圆点轮播图可以通过使用CSS动画和CSS伪类来实现。下面是实现的步骤： 1. HTML结构：首先，我们需要创建一个包含轮播图和小圆点的容器。容器内部包含一个图片轮播的div和一个小圆点的ul。结构如下： ```html <div class="slider-container"> <div class="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> <ul class="dots"> <li class="active"></li> <li></li> <li></li> </ul> </div> ``` 2. CSS样式：然后我们需要对容器和其中的元素进行样式设置。设置容器的宽度和高度，使其适配轮播图的大小。设置轮播图的宽度、高度以及隐藏超出容器的部分。设置小圆点的样式，包括位置、颜色和大小等。CSS样式如下： ```css .slider-container { width: 300px; height: 200px; overflow: hidden; position: relative; } .slider { width: 300%; height: 100%; display: flex; transition: transform 0.5s ease-in-out; } .slider img { width: 33.33%; height: 100%; object-fit: cover; } .dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); list-style-type: none; margin: 0; padding: 0; } .dots li { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: grey; margin: 0 5px; } .dots li.active { background-color: black; } ``` 3. CSS动画和伪类：最后，我们需要使用CSS动画和伪类来实现轮播图的滑动效果和小圆点的切换效果。使用`@keyframes`定义滑动动画，使用`nth-child()`伪类来切换小圆点的激活状态。CSS代码如下： ```css @keyframes sliderAnimation { 0% { transform: translateX(0); } 33.33% { transform: translateX(-100%); } 66.66% { transform: translateX(-200%); } 100% { transform: translateX(-300%); } } .slider:hover { animation: sliderAnimation 3s infinite; } .dots li:hover, .dots li.active { background-color: black; } ``` 以上就是使用CSS实现带小圆点轮播图的步骤和代码。你可以根据实际需要进行样式调整和功能扩展。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值