• 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;
    }

  • 相关阅读:
    .NET Interop 工具集
    关于正弦波的算法
    Windows Phone 系列 本地数据存储
    Xaml cannot create an instance of “X”
    Windows Phone 系列 使用 MVVM绑定时无法获取当前值
    Windows Phone 系列 应用程序图标无法显示
    Windows Phone 系列 WPConnect无法上网的问题
    Windows Phone 系列 使用 Windows Phone 保存铃声任务
    WP7.5提交应用
    Windows Phone 系列 动态删除ObservableCollection
  • 原文地址:https://www.cnblogs.com/cswzl/p/7767487.html
Copyright © 2020-2023  润新知