CSS伪类简易动画条（两边）

最新推荐文章于 2022-10-03 00:51:17 发布
最新推荐文章于 2022-10-03 00:51:17 发布
阅读量304 收藏
点赞数
分类专栏： Web前端 文章标签： css 动画 伪类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22532493/article/details/85708518
版权

CSS伪类简易动画条（两边）

HTML代码:
<body>
		<p>Home</p>
		<p>Item</p>
		<p>Outer</p>
</body>

CSS代码：
*{margin: 0;padding: 0;}
			p{
				font-family: fantasy;
				font-size: 22px;
				font-weight: 600;
				padding: 20px 0;
				margin-left:100px;
				display: inline-block;
				position: relative;
				cursor:pointer;
			}
			p:before{
				content: "";
				width:50%;
				height: 2px;
				background: #FCBAD3;
				position: absolute;
				bottom: 0;
				left:0;
				-webkit-transition:.5s ;
			}
			p:after{
				content: "";
				width:50%;
				height: 2px;
				background: #FCBAD3;
				position: absolute;
				bottom: 0;
				right:0;
				-webkit-transition:.5s ;
			}
			p:hover:before,
			p:hover:after{
				width:200%;
				
			}

动画效果如下：
CSS动画滑条简易

小雨滴！
关注
专栏目录
CSS伪类
09-25
CSS伪类是一种特殊的CSS选择器，用于定义元素的特殊状态，例如，一个元素在鼠标悬停、被激活或获得焦点时的状态。伪类提供了给元素在不同状态赋予不同样式的能力，从而可以增强用户体验和页面的交互性。 ### 浏览器...
css 动画效果设置
weixin_45615623的博客
09-19 484
before和after伪元素(详解) 之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查 注意： 一定要有content，否则伪元...
【CSS基础笔记】伪元素 伪类 过渡 动画 阴影 渐变 继承
a108776623的博客
11-21 585
伪元素： 伪元素在DOM树中创建了一些是不存在于文档语言里的抽象元素。 （例如常用的::before,::after::before，::after只有在设置属性：content:""之后才能显示） 【伪元素本质上是创建了一个有内容的虚拟容器；】 伪元素的由两个冒号::开头，然后是伪元素的名称。 一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。（注...
css伪类+动画进行方式实现长度变化的环形loading
weixin_43294560的博客
10-19 633
只设置border两边和border-radius:50%实现半圆弧,然后通过定位伪类覆盖样式与背景相同色即可实现遮盖 再旋转,根据animation的动画方式,实现长度变小 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。 ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。 代码示例: div {
css+伪类+加载动画,如何为CSS伪类制作动画
weixin_35935514的博客
08-03 357
您能告诉我如何为伪类设置动画吗：after和：before，所以第一个出现是：after和then：before。我正在尝试使用动画延迟，但是它并不能按我的意愿工作。代码：.front {transform-style: preserve-3d;width: 108px;height: 100px;background: blue;position: absolute;left: 180px;to...
纯css3实现动态加载条
wangzhneg123的博客
03-04 642
效果展示： 源码展示： &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;纯css3实现动态加载条&lt;/title&gt; &lt;style&gt; * { margin
CSS3悬停图片线条边框动画特效
06-24
在网页设计中，CSS3（层叠样式表第三版）为开发者...总之，CSS3悬停图片线条边框动画特效是一种通过`:hover`伪类、`border`、`transition`等属性实现的交互设计，它可以提升用户与网页的互动性，为网页增添动态美感。
CSS伪类与CSS伪元素的区别及由来具体说明
09-22
为了深入理解这两者的区别，我们首先需要回顾一下CSS的发展历程，以及伪类和伪元素最初被引入的原因。 在CSS发展的早期阶段，我们遇到了一些实际问题，比如如何选择和样式化文档树中不存在的元素。举个例子，如果...
深入理解CSS中的UI伪类
09-25
CSS中的UI伪类是CSS入门阶段的基础知识点，对于初学者来说理解UI伪类非常关键。伪类是一种选择器的类型，它指定HTML元素的某个特定状态，以便为这些状态应用CSS样式。UI伪类针对的是用户界面元素，例如链接的状态，...
css动画div变长,CSS3的Webkit CSS动画：调整一个div矩形
weixin_27183235的博客
08-04 1250
你可以使用这个CSS项目：div.mybox {width: 50px;height: 50px;background-color: red;-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;-moz-transition:width 300ms ease-in-out, height 300ms ease-i...
CSS3相片左右飞入滑出切换
06-11
纯CSS3实现的图片左右切换效果，有旋转、左右飞入滑出、360度转动、渐变等多种随机滑动方式
css动画 伪类基础使用实例
02-28
css基础学习、晋级实用demo。 web开发利器。 简单易懂的代码。
一个CSS伪类动画效果(鼠标悬浮 边框从左往右增长)
weixin_44927516的博客
10-03 1012
css 边框增长动画
给css3 中得伪类添加动画效果
业余前端的职业经历
10-26 1635
通过伪类添加一个 三角符号 我这边通过vue 来做得例子 其实核心得一句话就是 你要把过渡样式加到伪类选择器中 而不是元素得选择器中 // 下面 transition: all .5s; 举个例子就是 .demo::before { transition: all .5s; } <div id="app"> <div class="arrow" :class="{active: show}" @click="change"> 搜狗输入法 </div&.
《Css伪类和动画的结合使用》
weixin_44550198的博客
01-17 625
先在HTML布局，给个大盒子里面再包含个小盒子或者p标签类名可以自定义 截图和部分代码如下： 给大盒子添加样式，给具体的宽高，背景颜色，还有盒子里面圆在水平居中和垂直居中 截图和部分代码如下： 再给盒子里的圆添加样式，给具体的宽高，背景颜色，还有圆角 截图和部分代码如下： 可以使用伪类和动画结合达到js代码的效果，给大盒子背景图片，设置大盒子旋转，旋转的值可以自定义，旋转值可以取很大接近于无限大...
css3 a标签用伪类写下划线动画效果
jafari
01-04 6703
before在a标签之前的横线动画 从左往右动画效果 html代码： ul> li>a href="">哈哈a>li> li>a href="">嘿嘿a>li> li>a href="">啊啊a>li> li>a href="">下划线a>li> ul> css样式： ul>li>a:before{ position: absolute;
如何使用CSS3/SCSS实现逼真的车窗雨滴效果
dawuafang
05-03 315
在天气预报类的Web移动应用中，常常需要实现屏幕的雨滴效果，表示阴雨天气。 感觉上比较神奇，其实想通了，这个效果的实现只需要一点物理知识和CSS3的简单变换。 实现一个小雨滴 首先雨滴是一个个小的椭圆形元素： .raindrop { width: 8px; height: 7px; border-radius: 100%; }其次雨滴是一个个凸透镜，能折射出远处的景色，远景所处位置远大...
CSS ：after伪类实现圆形蒙板动画，翻转
jiaweimin123的博客
10-11 1553
Document section{ width:90%; margin:100px auto 0; font-size:0; } section a{ display:inline-block; width:30%; position:relative; margin:0 1.6% 3%; overflow:hidden; } section img
CSS3伪类对象before和after详解与示例
"CSS伪类对象before和after的用法实例详解" 在CSS中，`:before`和`:after`是两种非常有用的伪元素，它们允许我们在一个元素的内容之前或之后插入内容。这两个伪元素通常与`content`属性结合使用，使得在不修改HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值