css3 a标签效果

最新推荐文章于 2023-08-30 17:02:10 发布
最新推荐文章于 2023-08-30 17:02:10 发布
阅读量3.1k 收藏 6
点赞数 2
分类专栏： css 文章标签： css hover
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyaqi1993/article/details/65658853
版权

在https://tympanus.net/Development/CreativeLinkEffects/#cl-effect-5看到一些不错的标签hover效果，自己试着实现了几个（本人菜鸟一枚）

预览



主要使用::after、::before伪元素实现，比较麻烦的是第三个CSS3d效果，要设置的比较多。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			html,body{
				height: 100%;
				width: 100%;
				font-family: 'Raleway', sans-serif;
			}
			*{
				padding: 0;
				margin: 0;
			}
			.item{
				width: 100%;
				height: 120px;
				text-align: center;
			}
			.item:nth-child(odd){
				background-color: #0e83cd;
			}
			.item:nth-child(even){
				background-color: #435a6b;
			}
			.title{
				font-size: 25px;
				position: absolute;
				line-height: 100px;
				left: 50px;
			}
			*[id^="a"]{
				color: white;
				font-size: 1.5em;
				cursor: pointer;
				width: 150px;
				height: 40px;
				line-height: 40px;
				margin-top: 30px;
				position: absolute;
				display: inline-block;
			}
			/*
			 * 效果1
			 */
			#a1::before{
				content: "[";
				margin-right: 0;
				opacity: 0;
				transition: margin-right 0.3s, opacity 0.2s;
			}
			#a1::after{
				content: "]";
				margin-left: 0;
				opacity: 0;
				transition: margin-left 0.3s, opacity 0.2s;
			}
			#a1:hover::before{
				opacity: 1;
				margin-right: 20px;
			}
			#a1:hover::after{
				opacity: 1;
				margin-left: 20px;
			}
			/*
			 * 效果2
			 */
			#a2{
				position: absolute;
			}
			#a2::after{
				margin-top: -10px;
				opacity: 0;
				position: absolute;
				top: 100%;
				left: 0;
				content: "";
				width: 100%;
				height: 5px;
				background-color: #0E83CD;
				transition: margin-top 0.3s, opacity 0.2s;
			}
			#a2:hover::after{
				margin-top: 0;
				opacity: 1;
			}
			/*
			 * 效果3
			 */
			.item:last-child{
				/**
				 * 注意设置css3d的：perspective、transform-style
				 */
				perspective: 1000px;
				-webkit-perspective: 1000px;
			}
			.item #container{
				position: absolute;
				left: 50%;
				transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
				transform: rotateX(0deg) translate3d(0,0,0);
				-webkit-transform: rotateX(0deg) translate3d(0,0,0);
				/*origin是以元素自身大小为基础，要注意父元素与子元素的空间位置关系*/
				/*此处和hover都需要设置origin，因为失去hover后，也是一个3d变换*/
				transform-origin: 0 50px 0;
				-webkit-transform-origin: 0 50px 0;
				transition: transform 0.3s;
				-webkit-transition: -webkit-transform 0.3s;
			}
			#a3{
				position: absolute;
				transform-style: preserve-3d;
				-webkit-transform-style: preserve-3d;
				background-color: #435a6b;
				transform: translate3d(0,0,20px);
				-webkit-transform: translate3d(0,0,20px);
			}
			#a3::after{
				content: "Link";
				position: absolute;
				top: 100%;
				left: 0;
				background-color: gray;
				width: 100%;
				height: 100%;
				transform: rotateX(-90deg);
				-webkit-transform: rotateX(-90deg);
				transform-origin: top;
				-webkit-transform-origin: top;
			}
			#container:hover{
				transform: rotateX(90deg) translate3d(0,0,0);
				-webkit-transform: rotateX(90deg) translate3d(0,0,0);
				/*origin是以元素自身大小为基础，要注意父元素与子元素的空间位置关系*/
				transform-origin: 0 50px 0;
				-webkit-transform-origin: 0 50px 0;
			}
			/**
			 * 效果4
			 */
			#a4{
				overflow: hidden;
			}
			#a4>span{
				display: block;/*inline不能设置margin*/
				margin-top:0px;
				opacity: 1;
				transition: margin-top 0.3s;
			}
			#a4:hover>span{
				margin-top: -40px;
			}
			#a4>span::after{
				position: absolute;
				top: 100%;
				width: 100%;
				left: 0;
				margin-top: -10px;
				content: "Link";
				font-weight: bolder;
				transition: margin-top 0.3s, opacity 0.2s;
			}
			#a4:hover>span::after{
				margin-top: -40px;
			}
		</style>
	</head>
	<body>
		<div class="item">
			<div class="title"><span>1</span></div>
			<a id="a1">Link</a>
		</div>
		<div class="item">
			<div class="title"><span>2</span></div>
			<a id="a2">Link</a>
		</div>
		<div class="item">
			<div class="title"><span>3</span></div>
			<div>
				<div id="container"><a id="a3">Link</a></div>
			</div>
		</div>
		<div class="item">
			<div class="title"><span>4</span></div>
			<a id="a4"><span>Link</span></a>
		</div>
	</body>
</html>


liuyaqi1993
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3按钮3D效果
06-24
1. **HTML结构**：首先，我们需要一个HTML按钮元素，例如`<button>`或`<a>`标签，并为其设置一个唯一的ID，以便于我们在CSS中引用。 ```html 点击我 ``` 2. **基础样式**：接着，我们为按钮添加基本的样式，包括...
css利用A标签的背景可能作出很有意思的效果第1/2页
10-30
标题和描述中提到的知识点主要涉及到CSS（层叠样式表）如何通过A标签的背景来创建有趣的效果。A标签通常用于创建超链接，而CSS则可以用来美化这些链接，实现不同的视觉表现。在这个例子中，我们将探讨如何使用CSS伪...
CSS中a标签样式原则 a:link a:visited a:hover a:active执行顺序
GoodShot的专栏
12-28 7241
CSS为一些特殊效果准备了特定的工具，我们称之为“伪类”。其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，它们分别是： 代码如下: :link :visited :hover :active 因为我们要定义链接样式，所以其中必不可少的就是超级链接中的锚标签--a，锚标签和伪类链接起来书写的方法就是定义链接样式的基础方法，它们的写法如下：
点击a标签页面加载效果-百度nprogress
weixin_33845477的博客
10-21 486
为什么80%的码农都做不了架构师？>>> ...
CSS3
a_wtf_pgm的博客
07-15 200
新增选择器   一、属性选择器：     二、伪类选择器 三、UI伪类选择器 常用操作 1.boreder-radius : 为元素添加圆角边框 2.border-image : 为元素添加边框背景 3.box-shadow : background-origin ：用来定义背景图像的定位区域（背景图像是从content开始还是padding还是bord...
CSS3 a[class^=icon] 属性选择器
kuyoru's blog
10-03 218
代码示例 要点>>>切记是利用样式的属性与内容达到选择/多选作用 标签[属性^=“属性定义的内容的前部分” ]{} 标签[属性$=“属性定义的内容的后部分” ]{} 标签[属性*=“属性定义的内容的一部分” ]{} a[class^=icon]{ your style:; } a[href$=pdf]{ your style:; } a[title*=more]{ your style:; } ...
CSS3属性选择器 a标签 http
weixin_43942765的博客
01-19 489
昨天又看了一下腾讯视频中陈豪老师关于CSS3的相关视频，个人又有了一些小收获，来赏析吧！ E[att^=“val”]属性att的值以"val"开头的元素。 a[href^="http:"]{ background:url("images/window.gif") no-repeat left center;背景图片水平靠左 垂直居中 padding-left:18px; } E[att$=“...
CSS3内容标签切换效果.zip
11-17
在前端开发中，CSS3内容标签切换效果是一种常见的交互设计技术，它允许用户通过点击或滑动在不同的内容块之间切换。这种效果广泛应用于网站的导航菜单、轮播图、选项卡等组件，提升了用户体验，使得信息展示更加有序...
css3实现的tab标签切换效果
01-09
本篇文章将深入探讨如何使用CSS3实现Tab标签切换效果，以及涉及到的关键技术点。 首先，我们需要创建HTML结构，通常包括一个容器元素，里面包含一系列的标签按钮和对应的显示区域。例如： ```html <li><a href...
CSS3图片导航效果.zip_CSS3图片导航效果_导航
09-23
本文将深入探讨“CSS3图片导航效果”，以及如何通过CSS3实现这种导航效果。 首先，CSS3引入了新的选择器，如伪类（`:hover`, `:active`, `:focus`）和伪元素（`::before`, `::after`），这使得我们可以在不依赖...
css+jquery实现简单标签页效果html代码
04-16
css+jquery实现最简单标签页效果html代码，效果很好
css3新加模块 a标签伪类选择器 过渡模块 渐变 弹性 手风
ilinda的博客
08-26 501
a标签伪类选择器 a:link选择器：修改从未被访问过的a标签样式。 a:hover选择器：修改鼠标悬停在a标签上的样式。 a:active选择器：修改链接被长按时的样式。 a:visited选择器：修改已经被访问过的a标签样式。 注意：若以上四个同时出现，则需要严格按照link，visited，hover，active的顺序从上到下出现（love,hate）。 若其中两个同一个样式，...
重点知识-CSS3
听闻
01-29 126
1. CSS3中三种基本选择器有哪些？它们具体的功能是什么？ 三种基本选择器包括：ID选择器、类选择器、元素选择器 ID选择器用于选择具有指定id属性的元素 类选择器用于选择具有指定class类名的元素 元素选择器用于选择指定类型的元素 2. CSS3中三种基本选择器的优先级是怎样的？ ID选择器>类选择器>元素选择器 3. 盒子模型都包含什么内容？ 盒子模型的结构：content（显示内容）、border（边框）、padding（内边距：内容与边框的距离）、margin（外间距：外边
css中 a标签的4种常用伪类
Dahui_program的博客
10-16 1049
伪类：为某些选择出来的元素添加同样的样式 对于a标签，可以设置悬停、点击、已激活、未激活四种状态时的效果 /* 未激活 */ a:link { background-color: tomato; } /* 已激活 */ a:visited { background-color: #333; } /* 悬停 */ a:hover { background-color: royalblue; }
CSS3 Color属性介绍
weixin_34233618的博客
01-11 96
通常我们使用css控制颜色时，均采用16进制的RGB模式，如 color:#ff0000; 这边先介绍一下几种色彩模式及取值规则 HSL色彩模式是工业界的一种颜色标准，是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，HSL即是代表色调，饱和度，亮度三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目...
【CSS左右上角斜标签】CSS实现左右上角飘带功能，左右上角斜标签（附源码）
最新发布
赏樱看雪撸代码
08-30 1685
CSS实现左上角飘带效果，CSS实现右上角飘带效果，CSS实现左上角斜标签效果，CSS实现右上角斜标签效果，纯CSS实现标签效果展示。
a标签的css样式设计
淘气的黑妞_爱说话
06-22 5452
总: a          表示所有状态下的连接 如 .mycls a{color:red} ① a:link：未访问链接 ,如 .mycls a:link {color:blue} ② a:visited：已访问链接 ,如 .mycls a:visited{color:blue} ③ a:active：激活时（链接获得焦点时）链接的颜色 ,如 .mycls a:activ
纯CSS3实现的标签效果
webdev
05-03 676
1.效果分析 纯CSS3实现的标签效果，如图1所示，看看demo。该标签主要有三个部分组成，左侧的三角形、右侧的圆角矩形和文字前面的小圆点。重点在左侧三角形和文字前面圆点的实现。 2.技术难点 三角形利用宽和高为零的元素的边框实现。将边框设置为12px solid transparent，然后将右侧边框颜色设置为#0089e0即可。 border:12px solid transpar...
CSS 常用效果样式以及布局技巧
来杯卡布奇诺的博客
11-30 2848
CSS 高级技巧1. 圆角边框2. 盒子阴影3. 文字阴影4. 元素的显示与隐藏4.1 display 属性实现元素的显示与隐藏4.2 visibility 属性实现元素的显示与隐藏4.2 overflow 属性实现元素的显示与隐藏5. 精灵图5.1 为什么需要精灵技术5.2 精灵技术讲解5.3 精灵技术使用的核心总结25.4 制作精灵图6. 字体图标6.1 字体图标的产生6.2 字体图标的优点6.3 使用字体图标 - 下载6.4 字体图标 - 引入6.5 字体图标 - 追加7. CSS 三角形7.1 CS
css清除a标签的换行效果
07-28
要清除 `<a>` 标签的换行效果，你可以使用 CSS 的 `display` 属性和 `white-space` 属性来控制。下面是一种常见的方法： ```css a { display: inline-block; white-space: nowrap; } ``` 通过将 `<a>` 标签的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值