CSS 3 中二维三维以及渐变过程简单总结 及效果(动图不好发)

        .testb{

background-image: url(img/5.jpg);

height: 200px;

/*方向 间距  渐变*/

立即学习“前端免费学习笔记（深入）”；

/*上 above  下below*/

/*1 倒影不占文档流的空间  层级高于文档流

          2 倒影是针对标签(宽高)进行的*/

          -webkit-box-reflect: above 20px -webkit-linear-gradient(top,rgba(0,0,0,0) 0% ,rgba(0,0,0,0.5) 100%);

}

         4      边框比较宽并且4个边框颜色不一样,在相遇的角会形成颜色不一的三角形,(内容为0做圆后可以制作吃豆豆,)

         5     border-radius: 50px 0 50px 50px;用于切圆角

             椭圆的制作

                 .textG{

width: 200px;

height: 100px;

border-radius: 100px 100px 100px 100px/50px 50px 50px  50px;

}

  二.二维平面内的移动

           .test{ transform:rotate(0deg) translate(0px,0px) scale(1);(旋转 平移 缩放 )

                  transition: all 3s ease .5s;(变化过程)}

              .test:hover{transform:rotate(720deg) translate(500px,300px) scale(2);}

剪映

一款全能易用的桌面端剪辑软件

下载

                三种效果也可分开单独用,并且不同先后顺序效果不同

 三.三维空间内的动画效果

             body{perspective:1000px;}/*在body中加透视点*/

             .父标签{ transform-style:preserve-3d;}/*在其父标签中开3D效果*/

           .test{ transform:rotate(0deg) translate(0px,0px) scale(1);(旋转 平移 缩放 )              (没动之前的初始值,可以不加,有默认值)

                  transition: all 3s ease .5s;(变化过程必须有)}

           .test:hover{transform:rotate(720deg) translate(500px,300px) scale(2);}(变化后的位置)

              /*在开3D效果下  可以设置Z轴效果*/

四.帧动画

         @keyframes 动画名(自取){

                0%(from){transform:…}

                ?%      {transform:…}

                ?%      {transform:…}

                100%(to){transform:…}

}

       .test:hover{

/*动画效果的赋值方式和transition一样*/

animation:movet 1s ease;

/*动画执行的字数无限循环  infinite */

animation-iteration-count: infinite;

}