css3-伪类、居中、2D3D转换、动画、粘贴布局

没错就是我哎呀

已于 2022-06-23 16:58:12 修改

阅读量151

点赞数

文章标签： css3 前端 css

于 2022-06-09 16:27:30 首次发布

本文链接：https://blog.csdn.net/he3236220/article/details/125200387

版权

:before和:after放图片

在这里插入图片描述

垂直水屏居中(table)

父元素
display:table;
子元素
display:table-cell;
vertical:middle;

3D效果旋转

<style>
    #div1{
      width: 150px;
      height: 150px;
      margin: 100px auto;
      /* 如果想看到3D效果，需要在动的父元素，增加该属性 */
      perspective: 150px;
    }
    img{
      transition: all 2s;
      /* 沿着bottom移动 */
      transform-origin: bottom;
    }
    img:hover{
      /* 移动的度数 */
      transform: rotateX(60deg);
    }
  </style>
</head>
<body>
  <div id="div1">
    <img src="a.png" />
  </div>
</body>

旋转动画

福字匀速旋转，可用于以后的旋转效果
在这里插入图片描述

 <style>
    .rotate {
      background: #eee;
      height: 100px;
      width: 100px;
      border-radius: 50%;
      margin: 25px auto;
      color: red;
      text-align: center;
      line-height: 100px;
      animation: mymove 2s infinite linear;
    }

    @keyframes mymove {
      from {
        transform: rotate(0);
      }

      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="rotate">福</div>
</body>

圆圈从小到大放大

在这里插入图片描述

<style>
    div {
      display: inline-block;
      background: transparent;
      border-radius: 50%;
      border: 1px solid #000;
      text-align: center;
      margin: 50px auto;
      animation: mymove 2s infinite linear;
      opacity: 0;
    }

    .cicle1 {
      height: 500px;
      width: 500px;
      animation-delay: .75s;
    }

    .cicle2 {
      height: 400px;
      width: 400px;
      animation-delay: .5s;
    }

    .cicle3 {
      height: 300px;
      width: 300px;
      animation-delay: .25s;
    }

    .cicle4 {
      height: 200px;
      width: 200px;
      position: relative;
      opacity:1;
    }


    @keyframes mymove {
      0% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <div class="cicle1">
    <div class="cicle2">
      <div class="cicle3">
        <div class="cicle4">
        </div>
      </div>
    </div>
  </div>
</body>