【纸张特效】

最新推荐文章于 2022-06-02 11:51:31 发布

marblack

最新推荐文章于 2022-06-02 11:51:31 发布

阅读量233

点赞数

分类专栏： css html

本文链接：https://blog.csdn.net/marblue_y/article/details/97824748

版权

css 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

HTML部分


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="text">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
            <span>F</span>
        </div>
    </body>
</html>

在class名为text的div中定义6个行内元素span，内容分别为A,B,C,D,E,F

CSS部分


body{
    margin: 0px;
    padding: 0px;
    background-color: #74b9ff;
}

定义背景色，内外边距为零


.text{
    margin: 250px 300px;
    text-align:center;
    display: inline-block;
}

将div定义在距上250px，距左300px的地方
文字居中并且定义为连续内联盒子
在这里插入图片描述


.text span{
    width: 120px;
    height: 120px;
    background-color: rgb(255, 255, 255);
    display: block;
    line-height: 120px;
    font-family: arial ;
    font-weight: bold;
    font-size: 40px;
    color: rgb(255, 116, 101);
    transition: 0.5s;
    float: left;
}

定义行内元素属性
每个文字块宽高120px，文字行高与盒子相同为120px，定义过度时间等。
在这里插入图片描述


.text:hover span:nth-child(odd){
    transform:skewY(-15deg);  /*定义沿着 Y 轴的 2D 倾斜转换15度。*//*单*/
    box-shadow: 0px 60px 10px #6ba8c7;
}

.text:hover span:nth-child(even){
    transform:skewY(15deg);  /*定义沿着 Y 轴的 2D 倾斜转换15度。*//*偶*/
    box-shadow: 0px 60px 20px#6ba8c7;
}

定义鼠标悬浮时，span下标为奇（odd）和偶（even）数时元素不同的倾斜转换状态。（沿Y轴的2D转换）
在这里插入图片描述


.text:hover{
    transform: rotateX(35deg);
}

定义text鼠标悬浮时的状态，整个沿x轴3D倾斜35度
效果即达成了。
在这里插入图片描述

marblack

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【纸张特效】

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div clas...
复制链接

扫一扫

专栏目录