CSS3transition动画
1.transition动画
站在用户的角度思考问题,与客户深入沟通,找到海曙网站设计与海曙网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:做网站、成都做网站、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟主机、企业邮箱。业务覆盖海曙地区。
(1)transition-property 设置过渡的属性,比如:width height background-color
(2)transition-duration 设置过渡的时间,比如:1s 500ms
(3)transition-timing-function 设置过渡的运动方式,常用有linear(匀速)| ease(缓冲运动)
(4)transition-delay 设置动画的延迟
(5)transition:property duration timing-function delay; 同时设置
transition动画
.box{
width: 100px;
height: 100px;
background-color: yellow;
transition: all 500ms ease,background-color 2s ease;
}
.box:hover{
width: 500px;
height: 500px;
background-color: red;
}

例子二:图片说明文字
图片
.box{
width: 320px;
height: 405px;
margin: 50px auto 0;
position: relative;
overflow: hidden;
}
.text{
width: 320px;
height: 100px;
position: absolute;
top: 405px;
background-color: rgba(124,119,119,0.30);
transition: all 500ms ease;
}
.box:hover .text{
position: absolute;
top: 305px;
}

夜空中最亮的星
我在思考人生
例子三:夏目
joke
@keyframes joke{
from{
left: 0px;
}
to{
left: -2136px; /*图片宽度*/
}
}
.box{
width: 534px;
height: 300px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
.box img{
position: absolute;
animation: joke 1s steps(4) infinite;
}

分享名称:CSS3transition动画
本文地址:http://ybzwz.com/article/jjphoc.html