两个伪类&过渡效果一起运用的奇妙现象

最新推荐文章于 2021-06-03 07:39:08 发布
最新推荐文章于 2021-06-03 07:39:08 发布
阅读量474 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44538469/article/details/86663353
版权

两个伪类&过渡效果一起运用的奇妙现象


开发工具与关键技术：Adobe Dreamweaver CC 2017  前端

作者：刘剑鸿

撰写时间：2019年1月27日星期日

在学习前端网页技术开发，个人觉得最有趣的莫过于CSS动画了，它能实现javascript的一些功能。如：hover伪类，hover选择器用于选择鼠标指针浮动在上面的元素，并设置其样式。从它的定义上看是要鼠标指针移到元素上面，才会触发设置的样式。但在某些方面，不一定要鼠标移到相关的元素上才能触发其样式。如下看截图

在这里插入图片描述

当鼠标任意移入红色的框就会触发两个伪类效果
1小黄人图片变圆 2下面弹出黄色背景的“I’m coming”

效果如下图：
在这里插入图片描述

当鼠标任意接触到红框，都会触发两个伪类的效果。要想实现在效果，必须设置两个伪类hover。

其代码如下图：
在这里插入图片描述

要两个伪类连用页面才会实现这有趣的效果，而且写的格式也与以往写hover格式用所不同。在box1 img的类里面设置transition: 1s;并非多余，在伪类里面设置过渡时间，是为了让伪类生成有个柔和的动态效果。而在box1 img里再设置transition: 1s;是为了当鼠标移出红色的框框时，原来的img 生成也有柔和的动态效果。使样式没那么生硬。

                                                              新手  请多多指教
刘大壮·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
CSS中两个伪类同时使用注意
weixin_43927310的博客
04-08 2010
如果一个人忘了当初出发的目的，那他便不再配得上其他人期待的目光。永远别忘了当初是背着梦想出发的，什么时候把梦想放下了，这段路也就到了终点了
css3开发：伪类选择器的使用
Lpd_Reason的博客
10-01 580
学过css的人必定知道选择器。 通常的选择器有类选择器，id选择器，元素选择器（又称伪元素选择器），这三种最为常用，本文不再鳌述。 还比较常见的是通配符选择器，写法为*{属性：值}，它是浏览器html默认样式，不过权重为0，它的使用大多是为了消除浏览器默认样式，定义自己的浏览器样式。 其次是组合选择器和性选择器，这两类选择器如果有机会以后再谈。 最后就是本文要讲的伪类选择器，要讲之前得先说...
伪类和伪元素
aiyishengyishi的专栏
01-12 350
伪类和伪元素的区别及应用
css两个伪类选择器导致的问题
caesarding07
03-27 791
问题展示 使用两个伪类选择器的时候可能会出现一些未知的错误 建议还是取用一个id名 当然正确的点赞方法不是用css来写的 这里只是说明不建议同时使用两个伪类选择器 ...
css中同时使用多个伪元素和伪类
热门推荐
ShiYadong的专栏
09-25 1万+
1、例如需要使用：.list-item::after 同时也要使用：.list-item:last-child 那么需要把最后一个对象的after覆盖掉的话可以这么操作： .list-item:last-child::after{ //write the styles } 或者第二个方法： .list-item:last-child { &:after{ ...
CSS3 选择器 伪类选择器介绍
09-25
前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类...
CSS伪类对象before和after的用法实例详解
09-25
两个伪类对象只有在清楚浮动clearfix的时候会用到哈，最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
CSS使用placeholder-shown伪类实现输入框浮动文字效果
11-21
在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。   浮动的文字标签 当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的： label...
Kontext--模拟苹果ios系统页面过渡效果插件
06-12
Kontext——模拟ios手机系统立体式切换效果，效果逼真 直接将手机上的滑动效果拖到pc端，很不错 ... 1、将页面中的两个css样式引入到你的页面中 2、将index.html文件里body中的html代码复制到你的页面中即可
【实用随记】伪元素和伪类混用
mercury8862的专栏
05-27 386
:after上加:hover事件
CSS3中的过渡
zzbxyz
11-09 5627
1.过渡 transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等 语法:    transition:[transition-property  transition-duration  transition-timing-function   transition-delay ]  transition-property  ----过渡或动态模拟的CS
CSS伪类的动画和过渡效果应用
weixin_30764771的博客
05-26 187
日期：2013-5-26来源：GBin1.com 在线演示 今天我们分享来自知名前端设计博客tympanus的另外一个实验性质的前端展示，这些在线演示很好的展示了CSS伪类来处理动画和过渡效果的独特之处，相信感兴趣的朋友肯定会觉得非常有兴趣的。 浏览器兼容： FirefoxIE10最新版本chrome 友情提示： 这些效果支持的浏览器非常有限，如果你需要应用到产品环境中...
css3 属性选择器加伪类选择器一起使用
weixin_30642561的博客
05-06 565
先看代码，以下代码是可以工作，这里记录下实现机制。 <!DOCTYPE html> <html> <head> <style> p[class="a1"]:nth-of-type(5) { background:#ff0000; } </style> </head> <body> ...
任意两张带透明图像的一种形状过渡效果
dianjupi9036的博客
06-11 149
一直想要一个Flash 那种形状渐变效果，这两天苦思冥想了一番实现了，先看效果。 一开始是往把贴图alpha通道识别成路径，建模想办法拉顶点的方向去，想来想去不是个好办法，后来还是决定直接基于位图实现，尽量采用gpu可以处理的方式。 然后往这边思考后，脑子里就浮现出了ditance field 这个概念，alpha表达的还是颜色，直接插值alpha会呈现出颜色渐变的结果。 而d...
vue2 过渡效果总结
webxiaoma
05-23 9006
vue 为我们封装了transition 组件 ，可以给任何元素添加enter 和leave 条件渲染 : v-if 条件展示 ：v-show 动态组件
html5伪类效果延缓,CSS3实现伪类hover离开时平滑过渡效果
weixin_31005543的博客
06-03 496
由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。离开时效果生硬div{width: 100px;height: 100px;border:1px solid;margin:0px auto;mar...
CSS之伪类
dwjdj的博客
01-19 223
伪类 a:link{属性:值;} 与a{属性:值;} 或者a:-webkit-any-link一样 作用： 1.设置a标签的默认样式 2.推荐直接使用a标签设置样式 a{属性:值;} a:visited{属性:值;} 作用: 设置a标签被访问过的样式 ◆该选择器会让浏览器有缓存的问题 ◆该选择器只能设置与颜色相关的属性 a:hover{属性:值；} 作用: 设置鼠标悬停在标签上的样式，不...
伪类选择器：爱恨法则；伪元素选择器：before，after；清除浮动
Chenxiaoxuget的博客
12-20 735
伪类选择器：爱恨法则 link：超链接未访问时的状态 visited:超链接访问过后的状态 hover：鼠标悬停时的状态 active：激活时的状态（一般为鼠标按下时） 这四个连用时，需要按照顺序，即love hate：爱恨法则 a:link{ color:red; } a:visited{ color:blue; } /*上面两种一般只能用在a元素上*/ a:hover{ color:green; } /*hover基本所有元素都可以使用*/ a:active{ color:black; } /*acti
Python 一类两个属性两个方法怎么运用
最新发布
05-13
假设你有一个名为`Person`的Python类，这个类有两个属性`name`和`age`，以及两个方法`greet()`和`celebrate_birthday()`，你可以像下面这样运用： ```python class Person: def __init__(self, name, age): self.name = name self.age = age def greet(self): print(f"Hello, my name is {self.name}!") def celebrate_birthday(self): self.age += 1 print(f"Happy birthday {self.name}, you are now {self.age} years old!") ``` 在上面的代码中，我们定义了一个`Person`类，`__init__()`方法用于初始化`name`和`age`属性，`greet()`方法用于打印出一个问候语，`celebrate_birthday()`方法用于增加`age`属性的值并打印出一个生日祝福语。 现在，我们可以创建一个`Person`对象并调用它的方法和属性： ```python person = Person("John", 25) person.greet() # output: "Hello, my name is John!" person.celebrate_birthday() # output: "Happy birthday John, you are now 26 years old!" print(person.age) # output: 26 ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值