CSS&HTML特效

最新推荐文章于 2024-08-23 10:02:01 发布

YD先生

最新推荐文章于 2024-08-23 10:02:01 发布

阅读量705

点赞数

本文链接：https://blog.csdn.net/qq_45659738/article/details/103368481

版权

css&html5 的组合使用（1）

HTML


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>biaoqian</title>
    <link rel="stylesheet" href="../src/css/style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <h2>从你的全世界路过</h2>
                    <p>我希望有个如你一般的人，如山间清爽的风，
                        如古城温暖的光。从清晨到夜晚，由山野到
                        书房。只要最后是你，就好。
                       
                    </p>
                </div>
            </div>
            <div class="face face2">
                <h2>01</h2>
            </div>
        </div>
        
        <div class="card">
                <div class="face face1">
                    <div class="content">
                        <h2>从你的全世界路过</h2>
                        <p>我希望有个如你一般的人，如山间清爽的风，
                            如古城温暖的光。从清晨到夜晚，由山野到
                            书房。只要最后是你，就好。
                            
                        </p>
                    </div>
                </div>
                <div class="face face2">
                    <h2>02</h2>
                </div>
            </div>
        
            <div class="card">
                    <div class="face face1">
                        <div class="content">
                            <h2>从你的全世界路过</h2>
                            <p>我希望有个如你一般的人，如山间清爽的风，
                                如古城温暖的光。从清晨到夜晚，由山野到
                                书房。只要最后是你，就好。
                                
                            </p>
                        </div>
                    </div>
                    <div class="face face2">
                        <h2>03</h2>
                    </div>
                </div>
                    
        
    </div>

</body>
</html>

CSS代码


body{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Poppins',sans-serif;
    background: linear-gradient(45deg,#24006b,#f42f8c);
}
.container
{
    width:1200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px,1fr));
    grid-gap: 15px;
    margin: 0 auto;
   
}
.container .card
{
    position: relative;
    width: 300px;
    height: 400px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 15px 60px rgba(0, 0, 0,.5);

}
.container .card .face
{
    position: absolute;
    bottom: 0;
    left:0;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .card .face.face1
{
    box-sizing: border-box;
    padding: 20px;
}
.container .card .face.face1 h2
{
    margin: 0;
    padding: 0;

}
.container .card .face.face2
{
    background: #111;
    transition:0.5s;
}
.container .card:nth-child(1) .face.face2
{
    background:linear-gradient(45deg,#3503ad,#f7308c);
}
.container .card:nth-child(2) .face.face2
{
    background:linear-gradient(45deg,#ccff00,#09afff);
}
.container .card:nth-child(3) .face.face2
{
    background:linear-gradient(45deg,#e91e63,#ffeb3b);
}
.container .card:hover .face.face2
{
    height: 60px;
}
.container .card .face.face2:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,.1);
}

.container .card .face.face2 h2
{
    margin: 0;
    padding: 0;
    font-size: 10em;
    color: #fff;
    transition: 0.5s;
    text-shadow: 0 2px 5px rgba(0, 0, 0,.1);
}
.container .card:hover .face.face2 h2
{
    font-size: 2em; 
}

对一些css代码的解释

linear-gradient(deg,#111,#fff)//这个是css颜色渐变标签，能够设置从某个角度（deg）开始渐变

display: grid;//继flex布局之后另一个强大的布局方式

repeat()//repeat函数repeat（x,ypx 1fr）重复x次/其中的1fr = flex:1/

auto-fit //自动填充次数,达到完全弹性的效果

minmax // 最小宽度350px 最大1fr

grid-gap// 间隙15px

:nth-child(n) //选择器，匹配属于父元素的第n个子元素，不论元素的类型，n可以是数字，关键词和公式

transition // css3动画效果，可以理解为0.5秒后完成

grid布局教程链接