web01

黄土地
52 阅读3分钟

1.双开门

  <div class="father">
        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>

*{
    padding: 0;
    margin: 0;
}

.father {
    background-color: yellowgreen;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: space-between;
}

.left {
    background-color: blue;
    width: 50%;
    height: 800px;
    transition: width  0.3;
}

.right {
    background-color: pink;
    width: 50%;
    height: 800px;
    transition: width  0.3;
}

  /* 2. 鼠标悬停的效果：左右移动 */
.father:hover .left {
    transform: translate(-100%);
}

.father:hover .right {
    transform: translateX(100%);
}

2.水平垂直居中

 <div class="father">
        <div class="son">
            
        </div>
    </div>

.father {
    background-color: yellow;
    width: 100px;
    height: 100px;
    position: relative;
}

.son {
    position: absolute;
    background-color: blue;
    width: 20px;
    height: 20px;
    margin:  0 auto;

    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/*   
    方法一：
    son在父亲水平垂直居中
    display: flex;
    align-items: center;

    方法二：
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
*/

3.旋转

     <div class="box">

        </div>



        <img src="./luntai.jpg" class="img1" alt="">


        <br>
        <img src="./luntai.jpg" class="img2" alt="">


.box {
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
    margin: 100px auto;
    transition: all 5s;
}

.box:hover {
    /* 1.旋转角度和方向的设置 */
    /* 旋转角度的单位是deg 如果是正数向右边旋转顺时针旋转，负数向左侧旋转逆时针旋转*/
    /* transform: rotate(360deg); */
    /* 默认是 以中心点来旋转 设置圆点*/
    /* 可以修改原点 可以设置坐标值，方位置*/
    /* transform-origin: 0 0; */

    /* 2.左手法则的旋转 */
    transform: rotateZ(60deg);

    /* 3.3d方向上的旋转 */
    transform: rotate3d(1,1,0,180deg);
}

img{
    width: 200px;
    height: 200px;
    transition: 10s;
}

/* 如果rotate放在移动的前面，x轴会变化了 复合属性，既滑动又旋转*/
img1:hover {
    transform: translateX(800px) rotate(720deg);
}

/* 大于1是放大，小于1是缩小 */
.img2:hover {
    transform: scale(0.4);
}

4.文字立方体切换

.father {
    width: 100px;
    height: 50px;
    margin: 100px auto;
    background-color: yellowgreen;
    transform-style: preserve-3d;
    transition: all 0.3s;
    position: relative;
    transform-style: preserve-3d;
}

.son1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    background-color: blue;
    transform: translateZ(25px);
}

.son2 {
    top: 0;
    left: 0;
    position: absolute;
    width: 100px;
    height: 50px;
    background-color: red;
    transform: translateY(-25px) rotateX(90deg);
}

.father:hover {
    transform: rotateX(-90deg);
}

<body>
    <div class="father">
        <div class="son1">

        </div>
        <div class="son2">

        </div>
    </div>
</body>

5.缩放

.box1 {
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    margin: 100px auto;
 
    overflow: hidden;
    display: flex;
    align-items: center;
}

img {
    margin: 0px auto;
    width: 80px;
    height: 80px;
    transition: all 3s;
    opacity: 0;
    transform: scale(10);
}


img:hover {
    opacity: 1;
    transform: scale(1);
}

<body>
        <div class="box1">
            <img src="../旋转/luntai.jpg" alt="">
        </div>
</body>

5.视距 perspective 一般加给body perspective 视距值越大 微小的， 视距值越小 越猛烈

.div1 {
    width: 100px;
    height: 100px;
    background-color: pink;
     transition: all 0.3s;
    margin: 0 auto;
}

body {
    perspective: 1000px;
    /* 一般加给body perspective 视距值越大 微小的， 视距值越小 越猛烈，*/
}

.div1:hover {
    transform: translateZ(100px);
}

  <div class="div1">
            
        </div>

6.渐变

.div1 {
    /* background-image: linear-gradient(transparent,red); */
    /* 上下渐变 */
    width: 100px;
    height: 100px;

    /*  左右渐变。 */
    /* background-image: linear-gradient(to right,transparent,red); */


    /* 角度渐变 */
    background-image: linear-gradient(90deg,transparent,red);

}

    <div class="div1">

    </div>

7.产品展示

    width: 300px;
    height: 212px;
    margin:  100px auto;
    background-color: yellow;
    position: relative;
    overflow: hidden;
}

img {
    width: 300px;
    height: 212px; 
}


.mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,0.5)
    );
    opacity: 0;
}

.box:hover .mask {
    opacity: 1;
}

.box:hover img {
    transform: scale(2);
}

.box:hover .info {
    bottom: 0px;
}

.info {
    position: absolute;
    width: 100%;
    bottom: -30px;
}


  <div class="box">
        <img src="转存失败，建议直接上传图片文件 https://img0.baidu.com/it/u=2513734713,4075989325&#x26;fm=253&#x26;fmt=auto&#x26;app=138&#x26;f=JPEG?w=889&#x26;h=500" alt="转存失败，建议直接上传图片文件"> 
        <div class="mask"></div>
        <div class="info">
            <p>职能体</p>
            <h2>后付款发货反馈哈开发贷款撒谎，和范德萨好的</h2>
            <a href="#">了解更多</a>
        </div></div>

    </div>

<!---->

      <div class="box">
            <img src="https://img0.baidu.com/it/u=2513734713,4075989325&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="" /> 
            <div class="mask"></div>
            <div class="info">
                <p>职能体</p>
                <h2>后付款发货反馈哈开发贷款撒谎，和范德萨好的</h2>
                <a href="#">了解更多</a>
            </div>
      
        </div>

8. 3d立方体

.body {
    perspective: 600px;
    /* 如果有孩子做3d转换 父设置3d呈现 */
}

.father {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 1px solid #000;
    transform-style: preserve-3d;
    margin: 100px auto;
}

.son1{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: pink;
    transform: translateZ(100px);
}

.son2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    transform: translateZ(-100px);

}

.father:hover {
    transform: rotateY(60deg);
}

  <div class="father">
        <div class="son1">
            A
        </div>

        <div class="son2">
            B
        </div>
     </div>
avatar
文章
阅读
粉丝