CSS3学习手记(10) 过渡

 

CSS3过渡

  • 允许css的属性值在一定的时间内平滑地过渡
  • 在鼠标单击、获取焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值

 

 

transition

transition-property属性检索或设置对象中的参与过渡的属性   

语法

transition-property:none|all|property

参数说明

  • none 没有属性改变
  • all 默认值
  • property 元素属性名
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: #abcdef}div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background}div:hover{cursor: pointer;background: red;transition-property:background }</style>    </head><body><div></div></body>
</html>

鼠标经过方块变红,离开后恢复正常

 

transition-duration属性检索设置对象过渡的持续时间

语法

transition-duration:time;

参数说明

  • 规定完成过渡效果需要花费的时间(以秒或毫秒计)
  • 默认值是0
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: #abcdef}div{width: 100px;height: 100px;margin: auto;background:lightcyan; transition-property:background;transition-duration: 3s}div:hover{cursor: pointer;background: red;transition-property:background;transition-duration: 3s }</style>    </head><body><div></div></body>
</html>

 

transition-timing-function 检索或设置对象中过渡的动画类型

  • linear 线性过渡
  • ease  平滑过渡
  • ease-in 由慢到快
  • ease-out 由快到慢
  • ease-in-out 由慢到快在到慢
  • step-start 
  • step-end  

 

transition-delay属性检索或设置对象延迟过渡的时间

语法 transition-delay:time

参数说明

  • 指定秒或毫秒之前要等待切换效果开始
  • 默认值 0

 

转载于:https://www.cnblogs.com/zry2510/p/7084811.html

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

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

相关文章

全局搜索快捷键_Windows 自带的聚合搜索来了,与 Mac 的 Spotlight 相比体验如何?...

最近 Windows 10 推出了自带的聚合搜索功能 PowerToys Run&#xff0c;取代了之前的 WinR。苹果的 macOS 以人性化著称&#xff0c;有几个功能让 Windows 用户一直很羡慕&#xff0c;比如全局的聚合搜索工具 Spotlight。在任何界面 command空格&#xff0c;输入关键字就能搜索电…

【SVM】简单介绍(三)

我们考虑SVM的对偶问题&#xff0c;我们通常是在对偶空间中进行求解的。 1、Lagrange Multipliers 对于一个很一般的问题 Minimize f(x)subject to {a(x)≥0b(x)≤0c(x)0\begin{aligned} \text { Minimize } & f(x) \\ \text { subject to } \quad & \left\{\begin{a…

寻找白板上的便签条

问题来源&#xff1a;http://answers.opencv.org/question/162480/contour-detection-for-gray-stickers-on-white-background/ 题目的大概意思就是这样的白板&#xff0c;寻找上面的各种便签条。我找到了橘色的&#xff0c;结果是这样代码是这样Mat src imread("gray-st…

gg

转载于:https://www.cnblogs.com/lyzuikeai/p/7091206.html

HDU 1728 逃离迷宫

这道题做的我想哭啊。。WA了将近十次了吧 一开始我用数组模拟的队列&#xff0c;后来和老大代码对拍&#xff0c;感觉改的是基本都一模一样了&#xff0c;还是WA 实在没有办法了&#xff0c;改用queue了 题目里的x是列y是行&#xff0c;和代码里的反过来的&#xff0c;要注意&a…

Nginx(六)-- 配置文件之Gzip

1.概念及作用 Gizp主要对内容、静态文件做压缩&#xff0c;用来提升网站访问速度&#xff0c;节省带宽。 2.使用方法 gzip既可以配置在server中&#xff0c;也可以配置在server外&#xff0c;此处配置在server中&#xff0c;如下&#xff1a; 说明&#xff1a;  gizp on|off 是…

误码率越高越好还是越低越好_夜间护理步骤越多越好还是越少越好?NFF

现在很多人都知道了夜晚是护肤的黄金护肤时间&#xff0c;有些很聪明的姐妹就从夜晚着手&#xff0c;使用很多种护肤品&#xff0c;希望达到事半功倍的效果&#xff0c;但好皮肤不常有&#xff0c;皮肤问题却常有&#xff01;既然如此&#xff0c;不少人就问了&#xff0c;夜间…

【随机森林】random forests 简单介绍

Random Forest&#xff0c;顾名思义 Random 就是随机抽取&#xff1b; Forest 就是说这里不止一棵树&#xff0c;而由 一群决策树组成的一片森林 &#xff0c;连起来就是用随机抽取的方法训练出一群决策树来完成分类任务。RF用了两次随机抽取, 一次是对训练样本的随机抽取; 另一…

信息安全系统设计基础第三周学习总结—20135227黄晓妍

一.Vim编辑器 1.Vim的六种模式 2.Vim三种常用模式的使用方式&#xff0c;以及三者的切换。打开Vim即默认进入普通模式&#xff0c;按i进入插入模式&#xff0c;按esc从插入模式退出普通模式&#xff0c;再按&#xff1a;进入命令行模式。 普通模式下游标的移动 按键 说明 h …

脚本命令_SAP HANA数据库备份命令脚本

需求场景&#xff1a;HANA数据库版本 2.044 &#xff0c; SYSTEMDB库1个&#xff0c;Tenant库有3个 PRD、POP、HAP需要用命令行备份。备份原理说明&#xff1a;1、脚本同hana studio 一样&#xff0c;用SYSTEM用户去备份所有的数据库。2、备份脚本工作在数据库管理员用户下&…

CSS3中border-radius、box-shadow与gradient那点事儿

一、border-radius border-radius用于添加圆角边框&#xff0c;用处非常广泛。 1&#xff09;一个值&#xff0c;代表了四个角 .radius-one {/* Safari 3-4, iOS 1-3.2, Android 1.6- */-webkit-border-radius: 12px; /* Firefox 1-3.6 */-moz-border-radius: 12px; /* Opera 1…

编程 跳台阶_Java版剑指offer编程题第8题--跳台阶

跟learnjiawa一起每天一道算法编程题&#xff0c;既可以增强对常用API的熟悉能力&#xff0c;也能增强自己的编程能力和解决问题的能力。算法和数据结构&#xff0c;是基础中的基础&#xff0c;更是笔试的重中之重。不积硅步&#xff0c;无以至千里&#xff1b;不积小流&#x…

获取汉字的首字母(转)

转换 获取一个汉字的拼音首字母。 GB码两个字节分别减去160&#xff0c;转换成10进制码组合就可以得到区位码例如汉字“你”的GB码是0xC4/0xE3&#xff0c;分别减去0xA0&#xf…

Deep Learning(深度学习) 学习笔记(四)

神经概率语言模型&#xff0c;内容分为三块&#xff1a;问题&#xff0c;模型与准则&#xff0c;实验结果。[此节内容未完待续...] 1&#xff0c;语言模型问题 语言模型问题就是给定一个语言词典包括v个单词&#xff0c;对一个字串做出二元推断&#xff0c;推断其是否符合该语言…

JavaScript 运行机制

JavaScript 运行机制 阅读目录 一、为什么JavaScript是单线程&#xff1f;二、任务队列三、事件和回调函数四、Event Loop五、定时器六、Node.js的Event Loop七、关于setTimeout的测试一、为什么JavaScript是单线程&#xff1f; JavaScript语言是单线程&#xff0c;也就是说&am…

android自定义倒计时控件示例

这篇文章主要介绍了Android秒杀倒计时自定义TextView示例&#xff0c;大家参考使用吧 自定义TextView控件TimeTextView代码&#xff1a; 复制代码 代码如下:import android.content.Context;import android.content.res.TypedArray;import android.graphics.Paint;import andro…

从gitlab上拉代码_从gitlab上拉取代码并一键部署

一、gitlab安装GitLab是一个利用Ruby on Rails开发的开源应用程序&#xff0c;实现一个自托管的Git项目仓库&#xff0c;可通过Web界面进行访问公开的或者私人项目。GitLab拥有与Github类似的功能&#xff0c;能够浏览源代码&#xff0c;管理缺陷和注释。可以管理团队对仓库的访…

产品管理流程

转载于:https://www.cnblogs.com/candle806/p/4860841.html

如何根据灰度直方图计算标准差_如何根据电器功率计算电线的粗细?

一般来说&#xff0c;测算电线的粗细&#xff0c;需要根据功率计算电流&#xff0c;根据电流选择导线截面&#xff0c;根据导线的截面&#xff0c;导线或电缆的型号查厂家的该型号的导线电缆的直径。这里就涉及了&#xff1a;电线粗细与功率之间的关系计算&#xff1b;导线截面…

解惑烟草行业工控系统如何风险评估

上周五下午&#xff0c;威努特工控安全联合创始人 赵宇 先生&#xff0c;带来了一场关于“工控系统的风险评估”的技术讲座。此次近200注册报名的朋友&#xff0c;来自各大高校、国企、外企、测评中心、安全厂商、大型集成商以及大型IT科技企业、安全实验室等。 烟草企业调研参…