css transtion不生效_CSS中transition属性不起作用的原因及解决方法

CSS中的transition属性可用于调整元素更改的时间,它可以像动画一样显示。虽然transition属性可以很方便的实现过渡效果,但是有时候可能会出现无效的情况,所以我们就需要来理解transition属性的写法规则。

我们先来看一下CSS中transition属性不起作用的原因

transition是一种允许您指定更改时间等的属性。

当用于设置鼠标光标放在按钮上时颜色和大小更改的时间时,它可以有像动画一样的效果。

transition格式如下

选择器名称{

transition-property:value;

}

可指定的值是:

all:您可以指定适用于转换的所有属性。

none:没有属性发生变化。

属性名称:指定要应用转换的属性名称。可以通过逗号指定多个。

transition不起作用的许多原因通常是描述悬停事件的转换,所以要多加注意

因为可以实现动画运动,所以有些效果使用transition属性很容易实现。

下面我们来看看transition属性的具体用法

如上述所说,不要在悬停事件中使用transition属性。

HTML

文字内容

文字内容

文字内容

文字内容

文字内容

文字内容

CSS

p {

width:100px;

background-color:red;

transition-duration: 2s;

transition-property:width;

}

p:hover {

width:420px;

background-color:blue;

}

当鼠标没有放在上面的时候,浏览器上显示效果如下

当鼠标放到红色背景上面的时候,浏览器上显示效果如下:

p标签中指定了width : 100px和background-color:red;这样的话当宽度是100px时,背景是红色。下面指定了transition-duration: 2s;

这样的话,transtion实现的效果从开始到结束的时间是2秒。

最后是transition-property:width;应用transition属性的效果仅为width。

:hover中指定width : 420px和background – color:blue,这样,移动鼠标到上面的时候,宽度变为420px,背景变为蓝色。

如果鼠标悬停,宽度将为420px,背景将为蓝色,但过渡效果仅为宽度。2秒的变化只有宽度。由于转换效果不适用于指定背景颜色,因此只要将鼠标悬停在上面,它就会变为蓝色。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431703.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三白话经典算法系列 Shell排序实现

山是包插入的精髓排序排序,这种方法,也被称为窄增量排序。因为DL.Shell至1959提出命名。该方法的基本思想是:先将整个待排元素序列切割成若干个子序列(由相隔某个“增量”的元素组成的)分别进行直接插入排序…

python清空列表_Python之列表

Python变量没有数据类型,所以Python没有数组。整数;浮点数;字符串;对象创建一个列表:1.member[大鱼,123,3.14,[1,2,3]]2.empty[]向列表添加元素:append():member[大鱼,12…

java切面1.6需要的包_Java技术 AspectJ

AspectJ1 简介AspectJ:Java社区里最完整最流行的AOP框架。在Spring2.0以上版本中,可以使用基于AspectJ注解或基于XML配置的AOP。2 在Spring中启用AspectJ注解支持导入JAR包springsource.net.sf.cglib-2.2.0.jarspringsource.org.aopalliance-1.0.0.jarsp…

华为什么时候更新鸿蒙os,华为鸿蒙系统升级时间表

华为鸿蒙系统升级时间表6月2日HUAWEI Mate 40 ProHUAWEI P40 ProHUAWEI Mate 40 ProHUAWEI Mate 30 ProHUAWEI Mate 40 RS保时捷设计HUAWEI Mate 30 Pro 5GHUAWEI Mate 40HUAWEI Mate 30E Pro 5GHUAWEI Mate 40EHUAWEI Mate 30 RS保时捷设计HUAWEI Mate 2HUAWEI Mate 30HUAWEI …

vsftpd安装问题汇总(持续更新。。)

问题1. 在执行make命令时却出现了问题,具体如下: sysdeputil.o: In function vsf_sysdep_check_auth: sysdeputil.c:(.text0x109): undefined reference to crypt sysdeputil.c:(.text0x13a): undefined reference to crypt collect2: ld 返回 1 make: *…

python游戏程序编码_python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)...

最近研究了下迷宫的生成算法,然后做了个简单的在线迷宫游戏。游戏地址和对应的开源项目地址可以通过上面的链接找到。开源项目中没有包含服务端的代码,因为服务端的代码实在太简单了。下面将简单的介绍下随机迷宫的生成算法。一旦理解后你会发现这个算法…

cesium等高线_Cesium专栏-气象站点色斑图、等值线图(不提供源码)

Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质…

为什么OC语言很难

作为一个Objective-C的coder,我总能听到一部分人在这门语言上抱怨有很多问题。他们总在想快速学习这门语言来写一个App出来,但他们也总是联想到Objective-C看上去实在太难了或者在想这些语法符号都是神马玩意?不错,他们问得非常好…

小狐狸ChatGPT付费创作系统小程序端开发工具提示打开显示无法打开页面解决办法

最新版2.6.7版下载:https://download.csdn.net/download/mo3408/88656497 很多会员在上传小程序前端时经常出现首页无法打开的情况,错误提示无法打开该页面,不支持打开,这种问题其实就是权限问题,页面是通过调用web-v…

http status 404 – 未找到_从零开始搭建自己的网站004添加404处理页面

在将web-war上传到服务器并重启tomcat后,发现找不到login页面目录结构:add exception do wth page2.添加页面内容;到w404.jsp异常处理,404首页 Home (current) Link Dropdown Action Another action Disabled Search 百度百科&am…

dw怎么打开html模板,Dreamweaver中如何使用模板

随着Internet的普及,很多人已经不满足于仅仅上网冲浪,而希望深入地参与其中。现在,拥有自己的Web网站已经成为一种潮流。虽然制作一个简单的网页并不困难,但是制作出超凡脱俗的网站就不那么容易了。下面是小编为大家带来的关于Dre…

云计算的认识和看法_云存储已经成为存储的未来,你的存储跟上节奏了吗?

云计算是目前业界最关注的话题,其实云计算让很多人云里雾里。而云存储则是存储的未来。云存储这个概念的出现,在一定程度上改变了我们对于传统存储模式的看法。但是云存储想必让很多人迷惑,今天我们就来聊聊云存储的那些事儿。对于一些计算机…

coco2dx c++ HTTP实现

coco2dx c HTTP实现 达到的结果如下面的 iPhone截图 android 日志截图 流程图例如以下 功能主要通过CURL c pthread 实现 我实现的不是多线程断点(假设要实现能够依据我这个进行加入任务序列,可參考 cocos2d-x 中AssetsManager的实现,事实上…

计算机动画 应用,计算机动画与应用.PDF

计算机动画与应用.PDF三维计算机动画金小刚Email: jin浙江大学CAD&CG 国家重点实验室紫金港校区蒙民伟楼512Course web: /home/jin/animation.htmXiaogang Jin 1 2/28/2017ModelingRenderingAnimation计算机图形 User Interface虚拟世界Xiaogang Jin 2 2/28/2017Pixar片头X…

idea怎么使用断点调试js_idea怎么使用断点调试js

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":10,"count":10}]},"card":[{"des":"刷脸门禁通行系统前端接入人脸AI赋能的人脸…

常量池在堆还是方法区_第九章_方法区

方法区栈、堆、方法区的交互关系这次所讲述的是运行时数据区的最后一个部分——方法区从线程共享与否的角度来看ThreadLocal:如何保证多个线程在并发环境下的安全性?典型应用就是数据库连接管理,以及会话管理栈、堆、方法区的交互关系下面就涉…

html5表单密码验证及提示,HTML5表单及其验证(示例代码)

1.输入型控件Input type用途说明email电子邮件地址文本框url网页URL文本框number数值的输入域属性 值 描述max number 规定允许的最大值min number 规定允许的最小值step number 规定合法的数字间隔(如果 step"3",则合法的数是 -3,0,3,6 等)value number …

3.6.4python下载安装教程_python 3.6.4安装教程

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里技术人对外发布原创技术内容的最大平台&…

CTabCtrl控件标签的相关设置

原文链接: http://blog.csdn.net/happyhell/article/details/6012177 1、 获得CTabCtrl标签高度:CRect rc; CTabCtrl *pTabCtrl GetTabControl(); pTabCtrl->GetItemRect(&rc); int nHeight rc.Height(); 2、修改CTabCtrl标签上的文字: // In t…

python人工智能原理及其应用_人工智能原理与实践:基于Python语言和TensorFlow

基 础 篇 第1章 绪论 1 1.1 人工智能简介 1 1.1.1 人工智能的概念 1 1.1.2 现代人工智能的兴起 5 1.1.3 人工智能的学术流派 5 1.2 人工智能的发展历史 8 1&#xff0…