css3(7)

头像旋转

语法:
(1) transition-property：检索或设置对象中的参与过渡的属性 -> 一般都用all
(2) transition-duration：检索或设置对象过渡的持续时间 -> 过渡的时间，自己定
(3) transition-timing-function：检索或设置对象中过渡的动画类型 -> 默认是ease
(4) transition-delay：检索或设置对象延迟过渡的时间 -> 默认是0秒

动画过渡类型

简单案例

<style>
        div {
            width: 200px;
            height: 100px;
            border: 1px solid red;
            border-radius: 15px;
            /*transition: width 0.5s ease 0s;*/
            /*transition: all 0.5s ease 0s;*/
            /*transition: all 0.5s;*/
        }

        div:hover {
            width: 300px;
            height: 150px;
            background: #f30;
        }
    </style>

头像旋转

<style>
        img {
            border: 4px solid #093;
            border-radius: 50%;
            margin: 10px auto;
            display: block;
            transition: all 0.5s;
        }

        img:hover {
            transform: rotate(360deg);
        }

    </style>

图片移入放大

<style>
        div[class=con] {
            border: 4px solid #666;
            margin: 10px auto;
            transition: all 0.5s;
            overflow: hidden;
            position: relative;
        }

        div img {
            display: block;
            position: absolute;
            top: -30px;
            cursor: pointer; /*鼠标移入时变成可点击状态*/
        }

        img:hover {
            transform: scale(1.1);
        }

    </style>