css3学习之transition

最新推荐文章于 2019-02-24 19:15:03 发布

guxiansheng1991

最新推荐文章于 2019-02-24 19:15:03 发布

阅读量175

点赞数

分类专栏： css3 文章标签： transition

本文链接：https://blog.csdn.net/guxiansheng1991/article/details/79725237

版权

css3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一.API

值                           |   描述
transition-property         |   规定设置过渡效果的 CSS 属性的名称。
transition-duration         |   规定完成过渡效果需要多少秒或毫秒。
transition-timing-function  |   规定速度效果的速度曲线。
transition-delay            |   定义过渡效果何时开始。

二.使用

下面的代码中:
transition-property: all;中all指代width和height,因为最终改变了width和height2个属性

-------------------------html----------------------------
<div></div>

-------------------------css----------------------------
div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration:.5s;
  transition-duration:.5s;
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: .18s;
    transition-delay:.18s;
}
div:hover {
  width: 400px;
  height:400px;
}

三.制作效果

思路是:

在元素初始状态使用transform定义动作起始状态
在元素结束状态(例如hover时)使用transform定义动作结束状态
在有动作的元素本身上定义transition
hover结束动作还是回到初始状态

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <style type="text/css">
        .wrapper{
            width: 300px;
            height: 350px;
            padding: 10px;
            border: 1px solid #ccc;
            /*overflow: hidden;*/
        }
        .wrapper img,.wrapper figcaption{
            transition: all 0.5s ease-in 0.1s;
        }
        /* img旋转360deg飞入 */
        .wrapper img{
            transform: translate(-300px,0px) rotate(0deg);
        }
        .wrapper:hover img{
            transform: translate(0px,0px) rotate(360deg);
        }
        /* 文字由下向上 */
        .wrapper figcaption{
            transform:translate(0px,100px);
            opacity: 0;
        }
        .wrapper:hover figcaption{
            transform:translate(0px,0px);
            opacity: 1;
        }
    </style>
</head>
<body>
    <figure class="wrapper">
        <img src="mm1.jpg">
        <figcaption>
            <h1>美女</h1>
            <p>很好看的美女</p>
        </figcaption>
    </figure>
</body>
</html>

guxiansheng1991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3学习之transition

一.API值 | 描述transition-property | 规定设置过渡效果的 CSS 属性的名称。transition-duration | 规定完成过渡效果需要多少秒或毫秒。transition-timing-function | 规定速度效果的速度曲线。transiti...
复制链接

扫一扫