css3——transition属性和opacity属性
【transition-duration】
是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计)。
语法:transition-duration: time;
time : 规定完成过渡效果需要花费的时间(以秒或毫秒计)。 默认值是 0,意味着不会有效果。
该属性其实是transition属性的一个子属性,下面总结一下css3中的transition属性:
【transition】
用于在一定的时间内平滑的过度,这种效果可以在鼠标单击,获取焦点,被点击或对元素任何改变中触发,并圆滑的以动画效果改变CSS属性的属性值。
从定义可以知道transition是一个用于动画过度的属性,然而transiton属性只不过是一个简写属性,用于设置四个过度属性,这
四个过度属性分别是:
transition-property (执行变换的属性 )
transition-duration (变换延续时间)
transition-timing-function (延续时间内,变换速率的变化)
transition-delay (变换延迟时间)
下面来分别介绍一下各个属性
transition-property 即用来指定当元素其中一个属性改变是执行transition效果
值:none(没有属性改变),all(所有属性都改变)或指定某一元素(比如color,background等属性)。
transition-duration 是动画执行的时间,单位(s)比如"0.1s"也可以写成".1s",它可以作用于任何元素,包括before和after伪元素。
transition-timing-function 动画的执行方式
值:ease(逐渐慢下来),linear(匀速),ease-in(由慢到快),ease-out(由快到慢),ease-in-out(先慢到快再到慢),cubic-bezier(该值允许你去自定义一个时间曲线)。
transition-delay 动画延时时间基本用法与duration相同。
语法:
transition: <transition> [, <transition>]*
<transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
这种写法是比较简单的写法,我们也可以同时写多个Transition效果,每个效果按照固定属性的顺序书写如图。
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .fk{ position:absolute; left:0; background:#00F; width:50px; height:50px; } .fk:hover{ position:absolute; left:500px; background:#F00; } .fk,fk:hover{ transition:background-color 3s ease,left 3s ease-in-out; } </style> </head> <body> <div class="fk"> <div> </body> </html>
该效果将以一个方块从左向右移动并改变颜色
【opacity属性】
也是一个css3属性,该属性用于设置元素的不透明度级别,所有的浏览器都支持这个属性。
语法:opacity: value|inherit;
参数说明:
value :规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
inherit:应该从父元素继承 opacity 属性的值。
例如设置一个图像的透明度:
img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}
IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小
,越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。
最新文章
- nginx-nginx.conf脚本
- A与B相交后的图形查询
- Wordpress制作文章页面single.php
- 在sqlserver 中with(nolock)详解
- highcharts插件使用总结和开发中遇到的问题及解决办法
- LPHW-积累-ex1-6
- Android(java)学习笔记209:采用get请求提交数据到服务器(qq登录案例)
- codeforces C. Booking System
- --@angularJS--较复杂的指令嵌套demo——综合小实例:登陆界面
- php利用gd实现图片的边框
- linux_ssh
- 通过四个例子理解JavaScript拓展运算符
- [SDOI2015]约数个数和
- html 网页背景图片根据屏幕大小CSS自动缩放
- [Leetcode 105]*前序后序遍历形成树
- 【Mybatis】多对多实例
- php优秀框架codeigniter学习系列——前言
- html内容溢出部分...
- Maven最佳实践:版本管理【转】
- Node.js Express 框架2
热门文章
- ES6学习笔记(一)——let和const
- Vue.js中this.$nextTick()的使用
- Django的models方法返回值异常,待解决
- OC、C#与JAVA语法特点一些异同(差集&;交集)
- centos7 Mysql5.6 升级Mysql5.7
- app开发公司排名哪家强?看App Annie给出的答案
- pip3命令报错Fatal error in launcher: Unable to create process using &#39;";d:\old_files\py3.6\python.exe"; ";E:\py3.6\Scripts\pip3.exe"; list&#39;
- 利用FFmpeg将RTSP转码成RTMP发布在RED5
- active scaffold
- 快速查找文件——Everything