ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS效果:焦点图片

2019-04-25 16:39:35  阅读:215  来源: 互联网

标签:repeat 焦点 screen content background position section CSS 图片


HTML:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.font.im/css?family=Indie+Flower" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <section class="split">
        <div class="screen">
            <div class="content">
                <h2>西江月·世事一场大梦</h2>
                <h4>宋代:苏轼</h4>
                <p>世事一场大梦,人生几度秋凉?<br>夜来风叶已鸣廊。<br>看取眉头鬓上。<br>
                    酒贱常愁客少,月明多被云妨。<br>中秋谁与共孤光。<br>把盏凄然北望。
                </p>
            </div>

        </div>
        <div class="screen">
            <div class="content">
                <h2>蝶恋花·庭院深深深几许</h2>
                <h4>宋代:欧阳修</h4>
                <p>庭院深深深几许,杨柳堆烟,帘幕无重数。<br>玉勒雕鞍游冶处,楼高不见章台路。<br>
                        雨横风狂三月暮,门掩黄昏,无计留春住。<br>泪眼问花花不语,乱红飞过秋千去。
                </p>
            </div>

        </div>
        <div class="screen">
            <div class="content">
                <h2>浪淘沙令·帘外雨潺潺</h2>
                <h4>五代:李煜</h4>
                <p>帘外雨潺潺,春意阑珊,罗衾不耐五更寒。<br>梦里不知身是客,一晌贪欢。<br>
                    独自莫凭栏,无限江山,别时容易见时难。<br>流水落花春去也,天上人间。
                </p>
            </div>

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

</html>

CSS:

body{
    margin:0;
    padding:0;
    font-family: 'Indie Flower', cursive;
}
section{
    position: relative;
    height:100vh;
    display: flex;
    background:#000;
}
section .screen{
    position: relative;
    flex-grow: 2;
    display: flex;
    overflow: hidden;
    transition: 0.5s;
    opacity: .3;
}
section:hover .screen{
    opacity: .3;
}
section .screen:hover{
    flex-grow: 4;
    opacity: 1;
}
section .screen:nth-child(1){
    background: url(./img/1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}
section .screen:nth-child(2){
    background: url(./img/2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}
section .screen:nth-child(3){
    background: url(./img/3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}
section .screen .content{
    position: absolute;
    bottom:0;
    right:0;
    width:400px;
    height:auto;
    background:#fff;
    padding:40px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: 0.5s;
    text-align:justify;
}
section .screen:hover .content{
    transform: translateX(0);
    transition-delay: 0.5s;
}
section .screen .content h2{
    font-size:25px;
    color:#3c6382;
}
section .screen .content h4{
    font-size:20px;
    color:#3c6382;
}
section .screen .content p{
    color:#60a3bc;
}

效果图:

 

标签:repeat,焦点,screen,content,background,position,section,CSS,图片
来源: https://www.cnblogs.com/humengxiangfeng/p/10769273.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有