transition属性不起作用的原因及解决方法_第1页
全文预览已结束

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、transition属性不起作用的原因及解决方法我们先来看一下css中transition属性不起作用的缘由transition是一种允许您指定更改时光等的属性。当用于设置鼠标光标放在按钮上时色彩和大小更改的时光时,它可以有像动画一样的效果。transition格式如下挑选器名称transition-property:value;可指定的值是:all:您可以指定适用于转换的全部属性。none:没有属性发生变幻。属性名称:指定要应用转换的属性名称。可以通过逗号指定多个。transition不起作用的许多缘由通常是描述悬停大事的转换,所以要多加注重由于可以实现动画运动,所以有些效果用法transi

2、tion属性很简单实现。下面我们来看看transition属性的详细使用如上述所说,不要在悬停大事中用法transition属性。html文字内容文字内容文字内容文字内容文字内容文字内容csspwidth:100px;background-color:red;transition-duration:2s;transition-property:width;p:hoverwidth:420px;background-color:blue;当鼠标没有放在上面的时候,扫瞄器上显示效果如下2345截图20181128135246.png当鼠标放到红色背景上面的时候,扫瞄器上显示效果如下:2345截图2

3、0181128134923.pngp标签中指定了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秒的变幻惟独宽度。因为转换效果不适用于

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论