trasition过度效果

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title></title>

<style>

body{

font-family: myfamily;

font-size: 20px;

}

@font-face {

font-family: myfamily;    /*字体自定义名称,便于引用*/

/*自定义字体

*/

src:url("res/font.TTF");

/*字体的url*/

}

p{

transition: 500ms;

font-family: myfamily;

font-size: 20px;

position: relative;

top: 200px;

left: 100px;

}

p:hover{

font-size: 70px;

color: aquamarine;

}

div{

width: 400px;

height: 200px;

background-color: lavenderblush;

transition: width 2s linear  ;                        /*宽度过度时间为2s,匀速*/

}

div:hover{

width: 600px;

}

#div2{

text-align: center;

margin: auto;

line-height: 20px;;

font-size: 2px;

width: 50px;;

height: 20px;;

background-color: antiquewhite;

transition:1s;                            /*只改变了背景色,过度时间为1s*/

}

#div2:hover{

background-color: coral;

}

</style>

</head>

<body>

<div id="div1">

</div>

<div id="div2">

红米2

</div>

</body>

</html>

时间: 2024-11-05 14:01:17

trasition过度效果的相关文章

Android TransitionDrawable ImageView过度效果使用实例

实现两张图片渐隐渐现的过渡效果Transition Drawable实现两张图片之间动态过度效果的方式. 运行如下所示:第一张为初始界面,第二张为过度中界面,第三张为过渡结束         新建一个TransitionDrawable的Android工程. 目录结构: 主界面activity_main.xml代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns

css3 过度效果之物体向上冒出

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>无标题文档</title> <link type="text/css" hr

transition过度效果 + transform旋转360度

css样式: .animate{ width:65px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif; padding:20px 10px 0px 10px; display:blcok; margin:5px; -webkit-transition:-webk

android中选择控件与选择界面自然过度效果的实现--一种新的交互设计

转载请标明出处: http://blog.csdn.net/jianghejie123/article/details/40648931 在安卓中经常遇到须要选择一个东西的功能,比方选择日期.选择文件,选择地点等,通常我们的做法是使用选择对话框.比方选择日期用datepicker,有时候也使用activity,可是这两种方式都有一个缺点,就是用户非常明显的感觉到了界面之间的切换. 有时候.以下这样的选择数据的交互方式应该会更好些: 事实上上面的app效果来自与CapitaineTrain应用,好

SpriteBuilder&amp;amp;Cocos2D使用CCEffect特效实现天黑天亮过度效果

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 假设认为写的不好请多提意见,假设认为不错请多多支持点赞.谢谢! hopy ;) 在动作或RPG类游戏中我们有时须要天黑和天亮过度的效果来完毕场景的过度,有非常多种方法比方用场景切换的过渡类来实现.可是在这里我们使用另外的方法:CCEffect特效节点来实现. 打开SpriteBuilder,在CCB场景中加入一个CCEffectNode节点,按例如以下设置: 注意上图有2个Brightness效果,实际仅仅用一个,还有一个是做其它測试用的

过度效果

1.Transition Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值.目前Firefox.Opera.Safari和Chrome都支持transition ,IE还不支持. 语法:transition: property duration timing-function delay; 说明: Value Description transition-property 指定要改变CSS属性的名称 transition-duration 指定过渡效果要

Transition动画过度效果

transition-property:                       规定设置过渡效果的 CSS 属性的名称.通常设置成all transition-duration:                       规定完成过渡效果需要多少秒或毫秒. transition-timing-function:        规定速度效果的速度曲线. Linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)). Ease 规定慢速开始,然后变快,

css3实现web app翻页过度效果

最近在开发web app页面,要实现滑动翻页,一开始实现的效果是无任何过渡效果的,可是这样子的话页面会闪跳一下,用户体验非常不好.于是我们主管叫我用jquery mobile,可是用了这个库之后,问题来了,跳转到的目标页面,无法加载目标页面引入的外部css文件,最后用css3完美地解决了这个问题: .pt-page-moveToLeft { -webkit-animation: moveToLeft .6s ease both; -moz-animation: moveToLeft .6s ea

CSS中的过度效果

1.hover时图片变清晰 html:<div class="box11"> <div></div></div>CSS:.box11{ clear: both; width: 229px; height: 129px; background: url("dm_pic01.jpg");} .box11>div{ width: 229px; height: 129px; background-color: rgba(