纯css实现边框动画特效 css

已于 2022-06-20 22:20:11 修改
阅读量3.0k 收藏 4
点赞数 2
分类专栏： web的学习历程
于 2021-12-13 08:29:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/faker1234546/article/details/121884547
版权

css 动画 css3

在这里插入图片描述
下面是完整代码，实现图示效果，效果为出现四个白框，和去除黑色背景。

<!-- 了解更多模块 -->
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		body{
			background-color: #D0D0D0;
		}
.knowmorbutton
{
	width: 100px;
	height: 40px;
	position: relative;
	
	background-color: #000000;
	box-shadow:0px 0px  60px 0.5px #d0d0d0;
}
.knowmorbutton:hover
{
	cursor:pointer;
	background:transparent;
}
.know-top
{
	position: absolute;
	right: 0px;
	top: 0px;
	width: 0px;
	height: 5px;
	background-color: #FFFFFF;
	transition: all 0.2s;
}
.know-left
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 5px;
	height: 0px;
	background-color: #FFFFFF;
}
.knowmorbutton:hover .know-left
{
	height: 35px;
	transition: all 0.2s;
	cursor:pointer;
}
.know-right
{
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 5px;
	height: 0px;
	background-color: #FFFFFF;
}
.knowmorbutton:hover .know-right
{
	cursor:pointer;
	height: 35px;
	transition: all 0.2s;
}
.knowmorbutton:hover .know-left
{
	height: 35px;
	transition: all 0.2s;
}
.knowmorbutton:hover .know-top
{
	cursor:pointer;
	width: 100px;
}

.know-bottom
{	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 0px;
	height: 5px;
	background-color: #FFFFFF;
	transition: all 0.2s;
}
.knowmorbutton:hover .know-bottom
{
	width: 100px;
}
.knowmore
{
	color: #FFFFFF;
	position: relative;
	text-align: center;
	top: 7px;
	
	
}
		</style>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
					
				</div>
				<!-- 了解更多模块 -->
				<div class="knowmorbutton">
					<div class="know-top">
						
					</div>
					<div class="know-left">
						
					</div>
					<div class="know-right">
						
					</div>
					<div class="know-bottom">
						
					</div>
		
				</div>
				
				
				</div>
				<!-- 了解更多模块 -->
			</div>
	</body>
</html>

					<!-- 了解更多模块 -->

        虽然代码看着很长其实原理很简单，使用子类选择器，在.knowmorbutton盒子悬停的同时，让四个盒子出来就行；
四个盒子分别使用绝对定位，定位到四个角，两个不给宽度，两个不给长度。
        然后在悬停父类knowbuttton，清除阴影我用的是backgroune:transparent；
        核心思想是悬停父类，触发子类效果。定位父相子绝，不影响布局。

只会写bug的靓仔
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html 边框效果,css实现边框动画效果
weixin_32145817的博客
06-03 1030
最近写了几个页面都用到css动画，以及很多before,after伪类。在此记录一下成果。css边框循环动画，页面效果如下：1、沿着边框动画的图形使用before，after伪类写的。当时想用切图来写，后来考虑到优化，就用了css来写。具体代码如下：i.border-right-animate{display: block;height: 35px;width: 5px;background: #...
【纯CSS】CSS奇思妙想边框动画
PC_372的博客
03-01 494
今天逛博客网站 -- shoptalkshow，看到这样一个界面，非常有意思： 觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 border 属性 谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。 除了最常见的 solid，dashed，CSS border 还支持 none，hidden， dotted， double， groove， ridge， inset，
纯CSS3动画按钮
06-12
7种CSS3特效动画效果，鼠标hover之后的动画效果相当不错，下拉效果，右移效果，箭头划过效果等等
CSS动态渐变色边框围绕内容区域旋转的效果(实例代码)
12-14
效果图   在网上查阅相关资料后，发现目前的动态渐变色边框的实现方式大部分为使用伪元素比内容区域大一圈然后横向移动渐变色背景的方式实现，而没有渐变色边框围绕内容区域进行旋转的效果，于是我做了一个这样的demo供大家参考。 实现原理   首先将内容区域嵌套进一个DIV盒子中并设置overflow：hidden;。这个盒子的大小是内容区域的大小加上你希望实现的渐变边框的宽度，然后将内容区域居中，这样内容区域和父元素之间就有一个看似是边框的空白区域。   现在在这个空白区域加一个比父元素更大，背景为渐变色的盒子，将层级设置为最低z-index: -1;。再将这个渐变色背景的盒子加入旋转动画就完成了
css 流动边框
最新发布
Pure_White520的博客
06-28 1149
一、背景流动边框 实现原理： 用背景进行旋转，超出我们想显示的范围则hidden，就有以上的效果，可以用after或者before元素来实现也可以。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
css 边框环绕动态效果
Teemo_shape的博客
04-12 4492
边框外面的线是会环绕动起来的，代码很简单，效果很酷哦 <div></div> html,body { height:100%; background-color:#000; } div { width:200px; height:200px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid #eee; } div::after,...
CSS特效012：边框线条环绕流动效果
大剑师兰特的GIS世界
11-17 3022
css实战中，怎么绘制边框线条环绕流动效果呢？ 这是从网上学习来的示例，主要设置利用了相对位置，利用延时产生的时间差，在每个节点显示出一部分内容，在其他时间隐藏，达到一个流动的效果。
【css】纯css实现动态边框
KatyLight的博客
08-02 1603
【css】纯css实现动态边框
CSS边框效果
weixin_41897680的博客
01-13 1454
CSS边框效果
纯CSS3悬停文字边框动画特效
06-24
在本文中，我们将深入探讨如何使用CSS3实现各种悬停文字边框动画特效。CSS3是一种强大的样式表语言，它提供了丰富的功能，包括过渡、动画和3D转换，使我们能够创造出令人惊叹的视觉效果。在"纯CSS3悬停文字边框动画...
漂亮的CSS3按钮边框动画特效
06-11
本教程将详细讲解如何利用CSS3实现"漂亮的CSS3按钮边框动画特效"，包括按钮边框游走动画以及鼠标悬停时的倾斜放大效果。 首先，我们需要理解CSS3中的关键帧动画（@keyframes），这是创建边框动画的基础。通过定义...
纯CSS3Hover按钮边框动画特效.zip
07-11
本篇文章将深入探讨“纯CSS3 Hover按钮边框动画特效”这一主题，帮助开发者了解如何利用CSS3创建出吸引人的按钮交互设计。 首先，让我们了解“Hover”在CSS中的含义。Hover是CSS的一个伪类选择器，当用户将鼠标指针...
纯CSS3按钮边框线条动画特效
12-13
【纯CSS3按钮边框线条动画特效】是一种利用现代浏览器对CSS3特性的支持，创造出极具视觉吸引力的按钮效果。这种特效主要通过CSS3的动画（Animation）和过渡（Transition）属性来实现，无需JavaScript或其他编程语言...
纯CSS3圆形边框光环动画特效
06-24
总结起来，"纯CSS3圆形边框光环动画特效"是通过巧妙地使用@keyframes规则和CSS3的动画属性实现的。它不仅展示了CSS3的强大功能，还提供了一种优雅的方式来增强网页的视觉效果，特别是当需要动态展示焦点或强调某些...
css特效：流光背景+动态边框+滑动效果+聚集效果+小耳朵+阴影流光效果
src_chao1的博客
12-14 6444
好了，从视频中我们能看到每种效果都带有三个不同样式展示，这三种样式是制作的三种默认主题：确定、取消、删除，匹配所有效果。同时镜面反光效果由于兼容性问题，可以进行单独设置（视频中都带有镜面反光）。
CSS 实现边框动画效果
細水、長流√的专栏
09-07 1762
今天的这个卡片边框动画效果，主要应用在一些重要信息上，想引起用户注意的时候，我们才会增加这样的效果，一般情况不会添加这样的动效，但是，我们还是需要学会怎么实现它，现在我们就一起来看看这个项目的最终效果：HTML代码： CSS代码： 二、css实现边框动画 效果如图： 转载于：【每日一练】34—CSS 实现边框动画效果http://www.noobyard.com/article/p-eapbpcha-de.htmlcss3线条动画特效用纯CSS3制作的效果非常炫酷的元素边框线条动画特效电脑关
使用css实现边框流动效果
世间万物皆不如你
06-09 4643
在第二个关键帧中，我们将顶部的边框颜色设置为透明，同时将右侧的边框颜色设置为黑色（border-top-color: transparent;我们使用透明的边框颜色来隐藏边框，以创建流动的效果。在上面的代码中，我们定义了一个名为“border-flow”的动画，并将其应用到我们的元素上。在接下来的两个关键帧中，我们将不同的边框颜色设置为黑色，以创建流动的效果。最后，在最后一个关键帧中，我们将左侧的边框颜色设置为透明，同时将顶部的边框颜色设置为黑色，这样我们就完成了一次边框的流动循环。
利用css3伪类实现边框环绕效果
Cocoos的专栏
01-10 5424
利用css3伪类实现边框环绕效果
css 实现div线条环绕
丽啊丽宝的博客
10-17 370
【代码】css 实现div线条环绕。
CSS3实现边框线条动画特效
05-27
可以使用CSS3中的transition和transform属性来实现边框线条动画特效。以下是一个示例代码： ```html <div class="box"></div> ``` ```css .box { width: 200px; height: 200px; border: 2px solid #333; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

只会写bug的靓仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值