夜空中最亮的星
我在思考人生
从品牌网站建设到网络营销策划,从策略到执行的一站式服务
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://www.cdkjz.cn/article/jjphoc.html
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图