jQuery mobile 入门笔记

来源：互联网发布：西安那家网络宽带好编辑：程序博客网时间：2024/05/01 17:30

动画效果实现方法1：只是给属相变化加一个过程而不是瞬间完成

纯属个人笔记，杂乱无章，看前三思

<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:yellow;transition:width 2s;}div:hover{width:300px;}</style></head><body><div></div><p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p><p><b>注释：</b>本例在 Internet Explorer 中无效。</p></body></html>

链接：http://www.w3school.com.cn/tiy/t.asp?f=css3_transition1

transition:width 2s;

$\Leftrightarrow$
transition-property：width;
transition-duration : 2s

通过animation属性

<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s;}@keyframes myfirst{0%   {background:red; left:0px; top:0px;}25%  {background:yellow; left:200px; top:0px;}50%  {background:blue; left:200px; top:200px;}75%  {background:green; left:0px; top:200px;}100% {background:red; left:0px; top:0px;}}</style></head><body><p><b>注释：</b>本例在 Internet Explorer 中无效。</p><div></div></body></html>

链接：http://www.w3school.com.cn/tiy/t.asp?f=css3_animation3

0 0