1.31学习

最新推荐文章于 2024-10-02 21:20:07 发布

zcann

最新推荐文章于 2024-10-02 21:20:07 发布

阅读量112

点赞数

文章标签：学习 css css3

本文链接：https://blog.csdn.net/zcann/article/details/128823470

版权

案例复习

波纹图（动态的，有空再去弄动态图）

    <style>
         .map{
             width: 747px;
             height: 616px;
             background: url(eightsix.webp) no-repeat;
             margin: 0 auto;
         }
         .city{
             position: absolute;
             top: 40px;
             right: 558px;
         }
         .dotted{
             width: 150px;
             height: 20px;
             background-color:transparent;
             border-radius: 50%;
         }
         /* 属性选择器记得复习 */
         .city div[class^="pulse"]{
             position: absolute;
             /* 保证在中心发散 */
             top: 50%;
             left: 50%;
             transform: translate(-50%,-50%);
             width: 150px;
             height: 20px;
             border-radius: 50%;
             box-shadow: 0 0 12px rgb(206, 26, 26);
             animation: pulse 1.2s linear infinite;
         }
         /* 注意权重,让它延迟播放 */
         .city div.pulse2{
             animation-delay: 0.6s;
         }
         @keyframes pulse{
             0%{
 
             }
             70%{
                 height: 50px;
                 width: 200px;
                 /* 透明度 */
                 opacity: 1;
             }
             100%{
                 height: 70px;
                 width: 250px;
                 opacity: 0;
             }
         }
     </style>
 </head>
 <body>
     <div class="map">
         <div class="city">
             <div class="dotted"></div>
             <div class="pulse1"></div>
             <div class="pulse2"></div>
         </div>
     </div>
 </body>

速度曲线

steps类似分段表现

可以实现文字逐个显示。

多个动画的实现，逗号隔开。

CSS 3D转换

多个注意是否有逗号。简写中xyz不能省略，如果没有就0.

透视(perspective)

记得是父盒子！

透视数值越小越近越大。

translateZ越大（越往外突出）物体越大

一个主要改变观察点，一个主要改变物体位置

3D旋转（rotate3d）

可以加透视凸显立体感

有个判断旋转方向的左手准则，想象力比较好就不记了（）

算了还是记一下

一般旋转都是绕中心(轴/点)旋转。

多矢量时可以合成方向再旋转。

3D呈现（transform-style）

鼠标移上去后翻转

     <style>
         .box{
             position: relative;
             width: 300px;
             height: 300px;
             margin: 100px auto;
             transition: all 1.4s;
             transform-style: preserve-3d;
         }
         .box:hover{
             transform: rotateY(180deg);
         }
         .front,
         .back{
             position:absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             border-radius: 50%;
             font-size: 30px;
             color:#Fff;
             text-align: center;
             line-height: 300px;
         }
         .front{
             background-color: pink;
             transform: translateZ(1px);
         }
         .back{
             background-color: purple;
             transform: rotateY(180deg);
         }
     </style>
 </head>
 <body>
     <div class="box">
         <div class="front">黑马程序员</div>
         <div class="back">pink老师</div>
     </div>
 </body>

盒子翻转

鼠标移上去会向上翻转

    <style>
         *{
             padding:0;
             margin:0;
         }
         ul{
             margin: 100px;
         }
         ul li{
             width: 120px;
             height: 35px;  
             list-style: none;
             perspective: 500px;
         }
         .box{
             position: relative;
             height: 100%;
             width: 100%;
             transform-style: preserve-3d;
             transition: all .4S;
         }
         .front,
         .bottom{
             position: absolute;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
         }
         .box:hover{
             transform: ROTATEX(90deg);
         }
         .front{
             background-color:PINK;
             z-index: 1;
             transform: translateZ(17.5px);
         }
         .bottom{
             background-color: purple;
             /* 先位移 */
             transform:translateY(17.5px) rotateX(-90deg);
         }
     </style>
 </head>
 <body>
     <ul>
         <li>
             <div class="box">
                 <div class="front"></div>
                 <div class="bottom"></div>
             </div>
         </li>
     </ul>
 </body>

要是先旋转再移动注意根据坐标系的改变进行改正。