• css3中常用的动态效果总结


    <!-- scale 效果 (x,y轴都要变大(1以上。如果需要缩小,可以给小数),同理还有只增加x 只增加y )-->
    <div class="scale">scale</div>

    .scale{
    background: green;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition:0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;

    }
    .scale:hover{

    /*transform:scale(1.1);*/
    /*transform:scaleX(1.1);*/
    transform:scaleY(0.8);
    }


    <!-- pulse 动画 @keyframes animation -->
    <div class="pulse">pulse</div>

    /*---------------------*/
    .pulse{
    background: blue;


    }

    @keyframes pulse{
    20%{
    transform:scale(1.1);
    background: green;

    }
    40%{
    transform:scale(1.5);
    background: red;

    }
    80%{
    transform:scale(0.9);
    background: yellow;
    }
    }
    .pulse:hover{
    animation:pulse linear 2s infinite ;
    }


    <!-- pulse grow -->
    <div class="pulse-grow"></div>

    /*--------------------*/
    .pulse-grow{
    background: yellow;

    }
    @keyframes pulse-grow {
    to {
    transform: scale(1.1);
    }
    }
    .pulse-grow:hover{
    background: red;
    animation:pulse-grow linear .2s infinite;
    }


    <!-- pulse shrink -->
    <div class="pulse-shrink"></div>

    /*-----------------------*/
    .pulse-shrink{
    background: skyblue;
    }
    @keyframes pulse-shrink{
    to{
    transform:scale(0.9);
    }
    }
    .pulse-shrink:hover{
    animation:pulse-shrink linear .2s infinite;
    }


    <!-- push 像推开的感觉 50%时候是缩小0.8左右,100%时候全部大小-->
    <div class="push">push</div>

    /*---------------------------*/
    .push{
    background: orange;
    }
    @keyframes push{
    50%{
    transform:scale(0.8);
    }
    100%{
    transform:scale(1);
    }
    }
    .push:hover{
    animation:push linear .3s infinite;

    }

    <!-- push-up 增大的感觉 -->
    <div class="push-up">push-up</div>

    /*-----------------------------*/
    .push-up{
    background: purple;
    }
    @keyframes push-up{
    50%{
    transform:scale(1.2);
    }
    100%{
    transform:scale(1);
    }
    }
    .push-up:hover{
    animation:push-up linear .3s 1;
    }


    <!-- 旋转 -->
    <div class="rotate"></div>

    /*--------------------*/
    .rotate{
    background: black;
    }
    .rotate:hover{
    transform:rotate(5deg);
    }


    <!-- 又增大又旋转 -->
    <div class="grow-up"></div>

    /*--------------------------*/
    .grow-up{
    background: pink;
    }
    .grow-up:hover{
    transform: rotate(5deg) scale(1.1);

    }


    <!-- 鼠标移上去 有向上浮的效果 -->
    <div class="line">
    <div class="float-up">float-up</div>
    </div>

    /*--------------------*/
    .float-up{
    background: yellow;
    }
    .line:hover{
    border-bottom:2px solid red;
    box-sizing:border-box;
    }
    .line:hover .float-up{
    transform:translateY(-5px);
    }


    <!-- 同理,鼠标移上去,有向下浮动的效果 -->
    <div class="float-down"></div>

    /*----------------------------*/
    .float-down{
    background: gold;
    }
    .float-down:hover{
    transform:translateY(5px);
    }


    <!-- 鼠标移上去 div上下动的状态 -->
    <div class="up-dowm"></div>

    /*-----------------------------*/
    .up-dowm{
    background: red;
    }
    @keyframes up-dowm{
    50%{
    transform:translateY(-3px);
    }
    100%{
    transform:translateY(-6px);
    }
    }
    .up-dowm:hover{
    animation:up-dowm linear .5s infinite;
    }


    <!-- 倾斜 -->
    <div class="skew">skew</div>

    /*------------------------*/

    .skew{
    background: orange;
    }
    .skew:hover{
    transform: skew(-10deg);
    }


    <!-- 只是上面倾斜-->
    <div class="skew-up"></div>

    /*----------------------------*/
    .skew-up{
    background: black;
    transform-origin: 0 100%;
    }
    .skew-up:hover{
    transform: skew(-10deg);

    }


    <!-- 盒子上下摆动 -->
    <div class="wobble-vertical"></div>

    /*----------------------------*/

    .wobble-vertical{
    background: green;
    }
    @keyframes wobble-vertical{
    20%{
    transform: translateY(8px);
    }
    40%{
    transform: translateY(-6px);
    }
    60%{
    transform: translateY(4px);
    }
    80%{
    transform: translateY(-2px);
    }
    100%{
    transform: translateY(0px);
    }
    }
    .wobble-vertical:hover{
    animation: wobble-vertical linear .4s 1;

    }


    <!--盒子横着摆动 -->
    <div class="wobble-horizontal"></div>

    /*-------------------*/
    .wobble-horizontal{
    background: blue;
    }
    @keyframes wobble-horizontal{
    20%{
    transform: translateX(8px);
    }
    40%{
    transform: translateX(4px);
    }
    60%{
    transform: translateX(-2px);
    }
    80%{
    transform: translateX(-8px);
    }
    100%{
    transform: translateX(0px);
    }
    }
    .wobble-horizontal:hover{
    animation:wobble-horizontal linear .4s 1;
    }


    <!-- 盒子斜着只有上下横着摆动 -->
    <div class="wobble-top"></div>

    /*---------------------------------*/
    .wobble-top{
    background: skyblue;
    transform-origin: 0 100%;
    }
    @keyframes wobble-top{
    20%{
    transform: skew(-12deg);
    }
    40%{
    transform: skew(-8deg);
    }
    60%{
    transform: skew(0);
    }
    80%{
    transform: skew(6deg);
    }
    100%{
    transform: skew(8deg);
    }
    }
    .wobble-top:hover{

    animation: wobble-top linear .4s 1;
    }


    <!-- 盒子斜着只有下面横着摆动 -->
    <div class="wobble-bottom"></div>

    /*-----------------------------*/
    .wobble-bottom{
    background: blue;
    transform-origin: 100% 0;
    }
    @keyframes wobble-bottom{
    20%{
    transform: skew(-12deg);
    }
    40%{
    transform: skew(-8deg);
    }
    60%{
    transform: skew(0);
    }
    80%{
    transform: skew(6deg);
    }
    100%{
    transform: skew(8deg);
    }
    }
    .wobble-bottom:hover{
    animation: wobble-bottom linear .4s 2;

    }


    <!-- 鼠标移上去 有边框出现是动态的慢慢出现 transition: box-shadow .3s;-->
    <div class="border-fade"></div>

    /*------------------*/
    .border-fade{
    background: #999;
    transition: box-shadow .3s;

    }
    .border-fade:hover{
    box-shadow: inset 0 0 0 4px red,0 0 0 2px #000;

    }

    <!--背景颜色逐渐消失 transition: background .4s; -->
    <div class="hollow"></div>

    /*----------------------------*/
    .hollow{
    background: pink;
    transition: background .4s;
    box-shadow: inset 0 0 0 4px red,0 0 0 2px #000;
    }
    .hollow:hover{
    background: none;
    }


    <!-- 透明动画 内框一样的东西 transition: opacity .4s; -->
    <div class="touming"></div>

    /*---------------------------------*/
    .touming{
    background: yellow;
    position: relative;
    }
    .touming:before{
    content: "";
    border:4px solid #fff;
    position: absolute;
    top:4px;
    right:4px;
    bottom:4px;
    left:4px;
    opacity: 0;
    transition: opacity .4s;
    }
    .touming:hover:before{
    opacity: 1;
    }


    <!-- 向外边有一个边框缓慢出现 -->
    <div class="outline"></div>

    /*---------------------------------*/
    .outline{
    background: red;
    position: relative;
    }
    .outline:before{
    content: "";
    border:4px solid black;
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom:0;
    transition-property: top right bottom left;
    /*transition: top right bottom left 2s;*/
    transition-duration: .3s;
    /*2个不能一起写。*/
    }
    .outline:hover:before{
    top:-8px;
    left:-8px;
    right:-8px;
    bottom:-8px;
    }


    <!-- 向里面有一个框缓慢出现 -->
    <div class="inline"></div>

    /*------------------------------*/
    .inline{
    background: skyblue;
    position: relative;
    }
    .inline:before{
    content: '';
    border:4px solid #ccc;
    position: absolute;
    top:-16px;
    left:-16px;
    right:-16px;
    bottom:-16px;
    opacity: 0;
    transition-property: top right bottom left;
    transition-duration: .3s;

    }
    .inline:hover:before{
    opacity: 1;
    top:-8px;
    left:-8px;
    bottom:-8px;
    right:-8px;


    }


    <!-- 边框缓慢变成圆角 -->
    <div class="toRadius"></div>

    /*---------------------------*/
    .toRadius{
    background: purple;
    transition:border-radius .3s;
    }
    .toRadius:hover{
    border-radius: 50%;
    }


    <!-- 边框阴影 -->
    <div class="shadow"></div>

    /*---------------------------------*/
    .shadow{
    background: orange;
    transition: box-shadow .4s;
    }
    .shadow:hover{
    box-shadow: 0 0 8px red;
    }


    <!-- 外边框阴影 outside -->
    <div class="outShadow"></div>

    /*-------------------------------*/
    .outShadow{
    background: blue;
    transition:box-shadow .4s;
    }
    .outShadow:hover{
    box-shadow: 2px 2px 8px purple;
    }


    <!-- 边框内阴影 inside -->
    <div class="inShadow"></div>

    /*----------------------------------*/
    .inShadow{
    background: yellow;
    transition: box-shadow .4s;
    }
    .inShadow:hover{
    box-shadow: inset 2px 2px 8px purple;
    }


    <!-- 鼠标移上去,下方出现阴影,盒子整体上上去 -->
    <div class="float-shadow"></div>

    /*-----------------------------------*/

    .float-shadow{
    background: red;
    position: relative;
    transition: transform .4s;

    }
    .float-shadow:before{
    content: '';
    90%;
    height:10px;
    background: radial-gradient(ellipse at center, red 50%,black 80%);
    position: absolute;
    top:100%;
    left:5%;
    opacity: 0;
    z-index: -1;
    transition: opacity .4s;
    }
    .float-shadow:hover{
    transform: translateY(-10px);

    }
    .float-shadow:hover:before{
    opacity: 1;

    }


    <!-- 鼠标移上去,上下都出现阴影 -->
    <div class="shadow-radial"></div>

    /*----------------------------------------------*/

    .shadow-radial{
    background: grey;
    position: relative;
    }
    .shadow-radial:after,
    .shadow-radial:before{
    content: '';
    90%;
    height: 10px;
    background: radial-gradient(ellipse at center,green 20% ,blue 80%);
    position: absolute;
    left:5%;
    opacity: 0;
    transition:opacity .4s;
    box-sizing: border-box;

    }
    .shadow-radial:after{
    bottom: 100%;
    }
    .shadow-radial:before{
    top:100%;
    }
    .shadow-radial:hover:after,
    .shadow-radial:hover:before{
    opacity: 1;
    }

    <!-- 鼠标移上去,下面出现一个小三角形 -->
    <div class="Bubble-bottom"></div>

    /*-------------------------------------*/
    .Bubble-bottom{
    background: green;
    position: relative;
    }
    .Bubble-bottom:before{
    content:'';
    border-10px 10px 0 10px;
    border-style:solid;
    border-color:#ccc transparent transparent transparent;
    position: absolute;
    left:calc(50% - 10px);
    bottom:0;
    z-index: -1;
    transition: bottom .4s;

    }
    .Bubble-bottom:hover:before{
    bottom:-10px;
    }

  • 相关阅读:
    L2R 三:常用工具包介绍之 XGBoost与LightGBM
    连续特征自动离散化
    优化算法
    L2R 一:基础知识介绍
    深度学习--pytorch安装
    vim实用操作指南
    小贴士--Python
    setInterval和clearInterval应用小实例
    表单应用举例
    容器
  • 原文地址:https://www.cnblogs.com/cswzl/p/7767487.html
Copyright © 2020-2023  润新知