css中transition的使用以及:before:after的使用（小样式）

最新推荐文章于 2021-08-04 08:38:43 发布
最新推荐文章于 2021-08-04 08:38:43 发布
阅读量414 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/TTTK/p/6113438.html
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css小样式</title>
</head>
<style type="text/css">
body{
  margin: 0px;
  padding:0px;
  background:pink;
}
.mo-tab-default{
  display: block;
  width: 33.333%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  position: relative;
  cursor:context-menu;
  float: left;
  overflow: hidden;
}
.mo-tab-default:before{
  position: absolute;
  content: "";
  background:steelblue;
  left: -100%;
  bottom: 0px;  
  height: 1px;
  width: 50%;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;  
}
.mo-tab-default:after{说
  position: absolute;
  content: "";
  background:steelblue;
  right: -100%;
  bottom: 0px;  
  height: 1px;
  width: 50%;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;  
}
.mo-tab-default:hover::before{
  left: 0;
}
.mo-tab-default:hover::after{
  right: 0;
}
</style>
<body>
<a class="mo-tab-default">11</a>
<a class="mo-tab-default">22</a>
<a class="mo-tab-default">33</a>
</body>
</html>

　　

 

转载于:https://www.cnblogs.com/TTTK/p/6113438.html

weixin_30840253
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css:HTML文档中CSS样式使用
04-10
CSS有多种选择器，包括元素选择器、类选择器（`.class`）、ID选择器（`#id`）、属性选择器（`[attribute=value]`）等，还有伪类（`:hover`、`:active`等）和伪元素（`::before`、`::after`）用于更精确地控制元素...
osx-css:CSS 中的 OSX 样式窗口
06-18
对于图标的展示，开发者可能使用了`content`属性结合`::before`或`::after`伪元素来实现。 为了实现更真实的交互效果，CSS动画也可能被广泛运用。例如，当鼠标悬停在按钮上时，可能会有平滑的色彩过渡或大小变化。...
CSS按钮开关，利用伪类元素选择器：after和transition过渡效果实现
barkL的博客
07-13 613
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0;margin: 0; } input[type='checkbox']{ margin: 100px; -webkit-appearance: none;.
transform，transition，animation 的混合使用——结业篇
weixin_34326558的博客
05-24 199
css动画的动画制作没有什么特别高深的地方，引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的，但我想要强调的是掌握并深入的理解css的基础，以及灵活的运用是做出一个画面美观、代码简洁、性能高效的css动画的必备技能。今天，我也就不再多做赘述，我就来说一说我在做css动画的心得体会。 我把css动画的制作分为3个阶段：学习（初步）阶段、模仿阶段、自我开发阶段。 学习...
css样式中的after,css中transition的使用以及:before:after的使用（小样式）
weixin_28898707的博客
08-03 593
css小样式body{margin: 0px;padding:0px;background:pink;}.mo-tab-default{display: block;width: 33.333%;height: 30px;line-height: 30px;text-align: center;position: relative;cursor:context-menu;float: left;o...
css过渡插件,实现多个元素CSS3过渡效果的js插件
weixin_39614754的博客
08-04 298
AnimateTransition是一款允许在多个元素之间制作CSS3过渡效果的js插件。该过渡效果插件可以在不同的场合中使用，可以用于制作页面过渡效果，也可以用于制作各种模态窗口。该CSS3过渡效果插件通过使用硬件加速的CSS转换功能来增强其性能。它提供了12种预置的blocks动画过渡效果，和8种弹出模态窗口的过渡效果。该CSS3过渡效果插件没有任何外部依赖，它可以在所有的现代浏览器中运行，包...
css.zip_site:www.pudn.com
09-23
10. **伪类与伪元素**：伪类如`:hover`、`:active`和`:focus`用于在元素特定状态时改变样式，伪元素如`::before`和`::after`则可以在元素内容前后插入额外的内容。 这个“css.doc”文档可能详细解释了这些概念，并...
Neon-Button:使用HTML和CSS创建霓虹灯按钮
03-10
通常，我们可以使用`<button>`标签来创建按钮，然后为其添加自定义类名，以便于在CSS中进行样式设置。例如： ```html 霓虹灯按钮 ``` 接下来，我们将在CSS中为这个霓虹灯按钮添加样式。霓虹灯效果的关键在于利用...
30daysCSS:30 30天内使用CSS3进行30个小型项目
03-16
1. **选择器**：CSS3引入了更强大的选择器，如属性选择器、伪类选择器（例如`:hover`、`:active`、`:focus`）和伪元素（例如`::before`、`::after`），用于更精确地定位和操作元素。 2. **CSS3边框与背景**：包括...
CSS3 过渡（transition）
歪脖先生的博客
02-23 5064
过渡在给超链接设置样式时，一般都会设置一个悬停状态（hover）的效果，这种方法能明显提醒用户他的鼠标指向的是一个超链接。此时，悬停状态就相当于一个开关，在鼠标悬停时，会立即从默认状态切换到另一种状态。但很多时候，人们并不希望元素立即从一种状态切换到另一种状态，而是希望以动画方式，从一种状态平滑过渡到另一种状态。此时，就可以使用CSS3的过渡（transition），来实现状态的平滑过渡。W3C标...
CSS3的 transition:属性 延续时间 速率变化 延迟时间
认真和努力总没有错
12-04 1万+
css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。transition：transition-property transition-duration transition-timing-function transition-delay transition:属性 延
CSS之BEFORE与HOVER之间的误区
热门推荐
#Crazy的博客
06-29 4万+
CSS之BEFORE与HOVER之间的误区 在新手练习写网页格式时，会有想法把网页写的更加灵动，充满小设计，所以一些细节之处的效果就显得尤为重要。 hover 在鼠标移到链接上时添加的特殊样式。 此时我们可以为我们想要的元素，在鼠标移动上去之后，显示一些效果，比如： 此时的链接是绿色，添加了a:link {color:green;}的效果 此当鼠标放上去时，链接变成了红色，添加了a:hover {...
before css 旋转_CSS 巧用 before after 伪类
weixin_39932344的博客
12-20 280
我们知道 ::before 和 ::after 是 CSS 中的伪类，它们基本功能是在 CSS 渲染中向元素的内容前面和后面插入内容。虽然在实际 HTML 中我们没有增加任何标签，并且会在浏览器中展现出来。他们在实际的开发过程中我们使用的比较少，但是它的确有很巧妙的地方值得我们来开发：动态在元素中添加字符串场景：当需要在列表、或者多处相同样式中增加一个不变的字符串时，我们可以使用它；例如：产品列表...
transition、transform、animation三个属性的使用与区别
weixin_41796631的博客
04-22 2997
原文章：http://www.pianshen.com/article/6672108066/ 一、transform：改变元素形状 4个属性 1. rotate：围绕中心点旋转 deg 单位 2. translate（x,y）:向 x y 轴移动位置 px 3. scale：整体缩放 倍数、scaleX scaleY 沿 轴方向缩放 4. skew(x,y) 切变、scaleX sc...
CSS3中transition-duration參数对hover前后两种过渡时间的影响
weixin_34252090的博客
05-14 364
transition-duration这个參数是设置过渡时间的，将transition-duration放在哪个类中。那么在这个类被启用时就会依照transition-duration设定的时间来过渡。 比如。有类 .a 和 .a:hover  1.假设仅仅在 .a 中设定transition-duration: 3s;的话。那么在鼠标覆盖这个元素和鼠标离开元素...
前端用css3使用:before和:after伪类元素实现loading效果,旋转的圆动画
木子李的博客
04-08 1320
css3部分 <style> /*旋转loading*/ b:not(:required) { border-right-color: transparent; border-radius: 1.7rem; box-sizing: border-box; display: inline-block; position: relative; ...
vue组件切换时使用过渡(transition)时应该注意的一些事项
Encorehwang的博客
01-04 2万+
最近在做公司项目时，涉及到做一个问卷调查，需要在不同题目题目之间使用transition产生一个过渡效果：当点击按钮进入下一题时，当前卡片从正中间向左滑动至不可见后，下一题对应的卡片从右边不可见区域从右向左滑动至屏幕正中间，在这个过程中我发现了几个问题，下面是该部分对应的代码<transition :name="slide"> <keep-alive> <component
写一个有hover：：before和hover：：after的HTML和css代码
最新发布
05-30
HTML代码： ```html <div class="box"></div> ``` CSS代码： ```css .box { width: 200px; height: 200px; background-color: #ccc; position: relative; } .box::before { content: ""; width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #000; border-bottom: 50px solid transparent; position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 0.3s ease; } .box::after { content: ""; width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #000; border-bottom: 50px solid transparent; position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: all 0.3s ease; } .box:hover::before { border-right-color: #f00; } .box:hover::after { border-left-color: #f00; } ``` 上面的代码中，使用 `::before` 和 `::after` 伪元素在 `.box` 元素的左侧和右侧分别创建了两个三角形，当鼠标悬浮在 `.box` 元素上时，利用 `:hover` 伪类和 `transition` 属性实现了两个三角形颜色从黑色到红色的渐变效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值