CSS3之好看的特效

我们在网站上浏览时都会或多或少地出现一些炫酷的网页效果，看着很高大上的小小特效，这些特效一般使用HTML、CSS和JS结合做出来的。
但是某些简单的特效可以直接用HTML和CSS3就能做出想要的，而且有时候用CSS3比用JS简单。话不多说，现在我就来介绍HTML和CSS3做的特效（因为不能传视频，所以只能用图片解释了）。

1. 左右切换特效

网页初始的样子

鼠标移入到目标元素上的样子

代码：

<!-- 网页结构 -->
<div>
    <p></p>
    <h1>文字</h1>
</div>
<!-- CSS3核心代码 -->
        p{
            /* 相对于内容框来定位背景图像：*/
            background-origin: border-box;
            /*规定两个并排的带边框的框*/
            box-sizing: border-box;
            /*绝对定位*/
            position: absolute;
            left: 0;
            top: 0;
            /* 动画效果过渡，让动画效果看起来不突兀 */
            transition: all 1s;
            /*设置元素的堆叠顺序*/
            z-index: 2;
        }
        h1{
            position: absolute;
            left: -100px;
            top: 0;
            z-index: 1;
            /*被隐藏*/
            opacity: 0;
            color: #fff;
            transition: all 1s;
            background-color: #eee;
        }
        div:hover p{
            /*scale缩放 p标签缩小50%*/
            transform: scale(.5,.5);
            left: 100px;
        }
        div:hover h1{
            left: 0px;
            opacity: 1;
        }

2. 旋转切换特效

网页初始的样子

鼠标移入到目标元素上的样子，其中的小圈是会被缩小直至消失的

代码：

<!-- CSS3核心代码 -->
        p{
            background-origin: border-box;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 0;
            transition: all 1s;
            z-index: 2;
        }
        h1{
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            opacity: 1;
            color: #fff;
            /* 缩放  旋转 */
            transform: scale(0,0) rotate(0deg);
            transition: all 1s;
            background-color: #eee;
        }
        div:hover p{
            /* 缩放到消失  旋转360度 */
            transform: scale(0,0) rotate(360deg);
        }
        div:hover h1{
            /* 缩放到出现  旋转360度 */
            transform: scale(1,1) rotate(360deg);
        }

3. 旋转的正方体特效

网页初始的样子，这是一个正方体，它在网页中可以不断的旋转，每个面都可以放上喜欢的图片，

鼠标移入到目标元素上的样子，正方体的六个面会被分解，形成了不是封闭的正方体。

代码：

<!-- 网页结构 -->
    <div class="main">
        <div class="cub">
            <!-- 正面的 -->
            <span class="num_positive"></span>
            <!-- 后面的 -->
            <span class="num_behind"></span>
            <!-- 左面的 -->
            <span class="num_left"></span>
            <!-- 右面的 -->
            <span class="num_right"></span>
            <!-- 上面的 -->
            <span class="num_top"></span>
            <!-- 下面的 -->
            <span class="num_bottom"></span>
        </div>
    </div>
<!-- CSS3核心代码 -->
        .main .cub{
            width: 300px;
            height: 300px;
            /*指定嵌套元素如何在3D空间中呈现，必须要写的，而且要写在指定元素的直接父级上才有效果*/
            transform-style: preserve-3d; 
            position: relative;
            transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);
            animation: run 10s infinite linear;
        }
        .main .cub span{
      width: 100px;
   height: 100px;
      display: block;
      border: 2px solid blueviolet;
      border-radius: 10px;
      position: absolute;
    }
        /*不断旋转的代码*/
        @keyframes run{
            0%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
            100%{transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);}
        }
        /*把六个平面的正方形设置成立体的正方体的代码*/
        .cub span.num_positive{
            /*设置前面的一面在z轴上的移动*/
            transform:translateZ(50px);
        }
        .cub span.num_behind{
            /*设置后面的一面在z轴上的移动*/
            transform:translateZ(-50px);
        }
        .cub span.num_left{
            /*设置左面的一面在x轴上的移动*/
            transform:translateX(-50px) rotateY(-90deg);
        }
        .cub span.num_right{
            /*设置右面的一面在x轴上的移动*/
            transform:translateX(50px) rotateY(90deg);
        }
        .cub span.num_top{
            /*设置上面的一面在y轴上的移动*/
            transform:translateY(-50px) rotateX(90deg);
        }
        .cub span.num_bottom{
            /*设置下面的一面在y轴上的移动*/
            transform:translateY(50px) rotateX(-90deg);
        }
        /*hove的效果*/
        .main:hover .num_positive{
            transform:translateZ(100px);
        }
        .main:hover .num_behind{
            transform:translateZ(-100px);
        }
        .main:hover .num_left{
            transform:translateX(-100px) rotateY(90deg);
        }
        .main:hover .num_right{
            transform:translateX(100px) rotateY(90deg);
        }
        .main:hover .num_top{
            transform:translateY(-100px) rotateX(90deg);
        }
        .main:hover .num_bottom{
            transform:translateY(100px) rotateX(-90deg);
        }

PS:这些特效的代码中我只贴了核心代码，没有贴css基础样式的代码，所以要实现的话还需自己写基础样式。

原文地址：https://blog.csdn.net/weixin_45846241/article/details/105756306?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168940081216782427411035%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168940081216782427411035&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-105756306-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88