css3平移、旋转、倾斜、缩放、动画效果的实现

HTML代码:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="style1.css">
head>
<body>

<div class="button">div>

<div class="canResize">
    esdrtgyjikodrtgujiokpsedtgyhij
div>

<div class="transition">div>
<ul>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
ul>

<div class="ball">div>

<div class="header-image">div>

<div class="person">div>

body>
html>

css代码:

body{
    padding:100px;
    background-color: #e4e4e4;
    /*设置摄像机到物体的视觉距离*/
    /*perspective: 1000px;*/
    /*视觉原点的位置 从哪个方向看*/
    perspective-origin: 10% 50%;
}
/*.button{*/
    /*width: 150px;*/
    /*height: 44px;*/
    /*background-color: #ffc132;*/
    /*把普通元素设置成按钮类型元素*/
    /*-webkit-appearance: button;*/
/*}*/
.button{
     width: 150px;
     height: 44px;
     background-color: #8848ff;
    /*设置外边线*/
     outline: 2px solid #e348ff;
 }
.button:hover{
    /*设置外边线向外偏移量*/
    outline-offset: 10px;
}
.canResize{
    width: 150px;
    height: 44px;
    background-color: #ff1713;
    margin-top: 100px;
    border: 3px solid #3f4dff;
    overflow: auto;
    /*设置用户可拖拽元素改变其大小需配合overflow使用*/
    resize: both;
}
.transition{
    width: 100px;
    height: 100px;
    background-color: #47ffdf;
    /*过渡 当样式发生改变时触发 转场动画(过渡的样式 过渡效果花费的时间 过渡效果的时间曲线 过渡开始的时间)*/
    transition: all 3s ease-in 2s;
    /*transition: background-color 3s,width 2s,height 4s,margin-top 1s;*/

}
.transition:hover{
   background-color: #e348ff;
    width: 200px;
    height: 200px;
    margin-top: 20px;
    border-radius: 50%;
}

ul li{
    width: 100px;
    height: 100px;
    background-color: #ff3fa7;
    float: left;
    list-style: none;
    margin-left: 5px;
    position: relative;
}
ul li:first-child{
    /*使用动画:动画名称 动画完成时间 速度曲线 开始时间 播放次数 是否下次反向播放 是否正在运行或暂停*/
    animation: jump 2s ease  3 alternate;
}
/*创建动画*/
@keyframes jump {
    0%{
        top:-100px;
        height: 80px;
        background-color: #734aff;

    }
    50%{
        top:-60px;
        height: 120px;
        background-color: #8cff31;

    }
    100%{
        top:-20px;
        height: 180px;
        background-color: #ff2513;
    }
}
.ball{
    width: 100px;
    height: 100px;
    background-color: #ffcc2f;
    margin-top:250px;
    animation: move 3s ease alternate;
    text-align: center;
    line-height: 100px;
    /*设置圆角 CSS3新属性*/
    border-radius: 50%;
}
@keyframes move {
    30%{
        /*!*设置动画*! 平移 旋转 缩放 倾斜*/
        transform: translate(100px,-100px) rotate(60deg) scale(5,5) skew(30deg,30deg);

    }
    60%{
        transform: translate(150px,-100px) rotate(120deg) scale(2,2) skew(60deg,60deg);

    }
    100%{
        transform: translate(200px,-200px) rotate(360deg) scale(4,4) skew(90deg,90deg);


    }
}
.header-image{
    width: 200px;
    height: 200px;
    background: url("header.png") no-repeat center;
    transition: transform 2s;

}
.header-image:hover{
    transform: skew(10deg,10deg)  rotate(360deg) scale(0.000001,0.000001);
}

.person{
    width: 400px;
    height: 400px;
    background: url("people.jpg") no-repeat center;
    background-size: contain;
    /*运行动画*/
    animation: rotate3D 3s linear;
    transform-origin: 50% 50%;


}
/*创建3D动画*/
@keyframes rotate3D {
    to{
        /*3D旋转*/
        /*transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg);*/
        /*3D平移*/
        /*transform:translate3d(30px,50px,-1000px);*/
        transform:  scaleZ(2) rotateX(90deg);
    }
}


你可能感兴趣的:(web前端,css3,css3动画,css33D效果,css3用户界面)