CSS3学习之分享下transition属性
最近在网上看到很多transition写的效果,借鉴http://www.w3school.com.cn分享下代码,
1.语法:transition: property duration timing-function delay;
transition-property | 规定设置过渡效果的 CSS 属性的名称。 | ||||||||||||
|
|||||||||||||
transition-duration: | 规定完成过渡效果需要多少秒或毫秒。 | ||||||||||||
transition-timing-function: | 规定速度效果的速度曲线。 | ||||||||||||
|
|||||||||||||
transition-delay: | 定义过渡效果何时开始。 |
2.css:
.box{width:100px;height:100px;position:relative; background-color:#F00;transition:width 2s ease 2s,height 2s ease-out 2s,color 2s ease,top 2s;}
.box:hover{width:200px;height:200px; background-color:#0FF;top:-10px;}
/*-moz-transition:*//* Firefox 4 */
/*-webkit-transition:*//* Safari 和 Chrome */
/*-o-transition:*//* Opera */
3.html:
<!--把鼠标放到 div 元素上,宽度会从 100px 逐渐变为 200px:-->
<div class="box"></div>
4.浏览效果:
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGkAAABuCAIAAACr5arVAAAA0klEQVR4nO3QsQnAAAwDQe+/tNOnCm7Cw4kfQNysXTd/HwiP3X3s7mN3H7v72N03u7sz+ho7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxasWPHrhU7duxave3sNHb3sbvvAeKjBB5N/0teAAAAAElFTkSuQmCC" alt="" /> aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMoAAADRCAIAAAACFrqnAAACMklEQVR4nO3SwQnAMAwEQfXftPII6SCLwcwx1tuPnTXLNqc/YDdPXhZOXhZOXhZOXhZu3ge/kxcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkhcheRGSFyF5EZIXIXkRkheh/a5ZMnlZOHlZuAezDj9C00DBOwAAAABJRU5ErkJggg==" alt="" />
备注:这个方法不适合IE10以下的浏览器
CSS3学习之分享下transition属性的更多相关文章
- css3学习之--transition属性(过渡)
一.理解transition属性 W3C标准中对CSS3的transition是这样描述的: CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦 ...
- [web前端] css3 transition属性实现3d动画效果
cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...
- css3 transition属性实现3d动画效果
transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- CSS3学习之 transform 属性
CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- CSS3 transition 属性过渡效果 详解
CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...
- 使用CSS3的“transition ”属性控制长宽度的缓慢变化
有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...
- 今天我们来讨论一下CSS3属性中的transition属性;
transition属性是CSS3属性:顾名思义英文为过渡的意思:主要有四个值与其一一对应:分别是property(CSS属性名称),duration过渡的时长,timimg-function转速曲线 ...
- css3动画属性中的transition属性
一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...
随机推荐
- [原创]WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- 【哈希表】CodeVs1230元素查找
一.写在前面 哈希表(Hash Table),又称散列表,是一种可以快速处理插入和查询操作的数据结构.哈希表体现着函数映射的思想,它将数据与其存储位置通过某种函数联系起来,其在查询时的高效性也体现在这 ...
- [模板] SAP
int dfs(int x,int flow){ if(x==T) return flow; int tmp=res=0; for(int i=last[x];i;i=next[i]) if (d[x ...
- python datetime模块
该模块的时间有限时限:1 - 9999 dir(datetime) from datetime import datetime, timedelta, timezone dt = datetime. ...
- Query Designer:公式冲突
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Javascript学习笔记:闭包题解(4)
代码: var val1=0; var val2=0; var val3=0; for(var i1=1;i1<=3;i1++){ var i2=i1; (function(){ var i3= ...
- Java Web之会话管理一: 使用Cookie进行会话管理
一.Cookie的概念 Cookie(会话)可以简单的理解为:用户开一个浏览器,点击多个链接,访问服务器多个web资源,然后关闭浏览器,整个过程称为一个会话. 二.会话过程中解决的问题 用户在使用浏览 ...
- codeforces 744C Hongcow Buys a Deck of Cards
C. Hongcow Buys a Deck of Cards time limit per test 2 seconds memory limit per test 256 megabytes in ...
- logback 配置详解(一)——logger、root
1.根节点<configuration>包含的属性 scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文件 ...
- asp.net报错“尝试读取或写入受保护的内存。这通常指示其他内存已损坏”的解决办法
来源:http://ajxfxb.blog.163.com/blog/static/56675086201411634336878/ 作者是:没完没了的工作 asp.net报错“尝试读取或写入受保护的 ...