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; 同时设置

<head>
<meta charset="utf-8">
<title>transition动画</title>
<style type="text/css">

.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;
}
</style>

</head>

<body>

<div class="box"></div>

</body>

CSS3 transition动画

例子二：图片说明文字

<head>
<meta charset="utf-8">
<title>图片</title>
<style type="text/css">

.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;
}
</style>

</head>
<body>
<div class="box">
<img src="images/3_02.png" alt="星空">
<div class="text">

            <h4>夜空中最亮的星</h4>
            <p>我在思考人生</p>
        </div>

</div>

</body>

CSS3 transition动画

例子三：夏目

<head>
<meta charset="utf-8">
<title>joke</title>
<style type="text/css">

@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;
}
</style>

</head>
<body>

<div class="box">
    <img src="images/xia.png" alt="夏目友人帐">
</div>

</body>

CSS3 transition动画

网页名称：CSS3transition动画
当前地址：https://www.cdcxhl.com/article2/jjphoc.html

成都网站建设公司_创新互联，为您提供、响应式网站、搜索引擎优化、云服务器、自适应网站、商城网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容