运用纯css完成缩略图悬停实际效果案例编码

日期：2021-01-20 类型：科技新闻我要分享

关键词：html网页制作，php网页制作，网页设计稿，网页编辑工具，学生网页设计模板

序言

前端开发自身很杂，想必在学前端开发的大伙儿都懂，前端开发专业技能的各种各样学习培训心得，各种各样实例教程，要是你有1颗学习培训的心都可以以搞定，重要在于你有木有要求剖析的工作能力，处理难题的工作能力，这两个才是决策薪水高矮的本领，就那末点专业知识嘛，大伙儿都懂了，拼的還是这两点工作能力。

本文将详尽详细介绍运用纯css怎样来完成缩略图悬停实际效果，共享出来供大伙儿参照效仿，下面话很少说了，来1起看看详细的案例编码吧。

缩略图悬停实际效果以下：

👇源代码：

<!doctype html>
<html>
<head>

<meta charset="UTF⑻">

<meta name="Keywords" content="重要词,重要词">
<meta name="Description" content="叙述">
<title>网页页面的题目</title>
<style type="text/css">
{/通配符 全部元素/
margin:0;
padding:0;
}
a{
text-decoration:none;
}
.content{
width:680px;
margin:20px auto 0;/*上右下左 上 上下 下 左右 上下 auto全自动*/
}
.view{
width:300px;
height:200px;
border:10px solid #fff;
position:relative;
overflow:hidden;
float:left;
margin:10px;
}
.view .info{
width:300px;
height:200px;
background:rgba(219,127,8, 0.7);
position:absolute;
top:0;
left:0;
text-align:center;
}
.view .info h2{
font-size:16px;
background:rgba(0,0,0,0.8);
padding:10px;
color:#fff;
text-align:center;
margin-top:20px;
}
.view .info p{
font-size:12px;
padding:10px 20px;
line-height:18px;
text-align:left;
color:#fff;
}
.view .info a{
color:#fff;
font-size:12px;
background:#000;
padding:5px 15px;
display:inline-block;
}
.view-frist .info{
opacity:0;
transition:all 0.4s linear;
}
.view-frist .info h2{
transform:translateY(⑴00px);
opacity:0;
transition:all 0.2s linear;/*过渡 all 時间 linear 速率 匀速 ease*/
}
.view-frist .info p{
transform:translateY(100px);
opacity:0;
transition:all 0.2s linear;
}
.view-frist .info a{
transform:translateX(⑵00px);
opacity:0;
transition:all 0.2s linear;
}
/*数据 重要（odd even） 公式*/
.view-frist:nth-child(2n) .info a{
transform:translateX(200px);
opacity:0;
transition:all 0.2s linear;
}
.view-frist:hover .info{
opacity:1;
}
.view-frist:hover .info h2,.view-frist:hover .info p{
opacity:1;
transform:translateY(0);/*歪斜 转动 占比放缩 位移*/
}
.view-frist:hover .info p{
transition-delay:0.2s;/*延时*/
}
.view-frist:hover .info a{
opacity:1;
transform:translateX(0);
transition-delay:0.3s;
}

    </style>
</head>
<body>
    <div class="content">
        <div class="view view-frist">
            <img src="images/1.jpg" alt="" width="" height="" />
            <div class="info">
                <h2>HTML5 + CSS3</h2>
                <p>建立HTML5文本文档，实战演练HTML5表单，实战演练HTML5美术绘画，HTML5声频与视頻，Web储存，线下运用，Workers线程同步解决，Geolocation自然地理部位等技术性。</p>
                <a href="">Read More</a>
            </div>
        </div>
        <div class="view view-frist">
            <img src="images/2.jpg" alt="" width="" height="" />
            <div class="info">
                <h2>HTML5 + CSS3</h2>
                <p>建立HTML5文本文档，实战演练HTML5表单，实战演练HTML5美术绘画，HTML5声频与视頻，Web储存，线下运用，Workers线程同步解决，Geolocation自然地理部位等技术性。</p>
                <a href="">Read More</a>
            </div>
        </div>
        <div class="view view-frist">
            <img src="images/3.jpg" alt="" width="" height="" />
            <div class="info">
                <h2>HTML5 + CSS3</h2>
                <p>建立HTML5文本文档，实战演练HTML5表单，实战演练HTML5美术绘画，HTML5声频与视頻，Web储存，线下运用，Workers线程同步解决，Geolocation自然地理部位等技术性。</p>
                <a href="">Read More</a>
            </div>
        </div>
        <div class="view view-frist">
            <img src="images/4.jpg" alt="" width="" height="" />
            <div class="info">
                <h2>HTML5 + CSS3</h2>
                <p>建立HTML5文本文档，实战演练HTML5表单，实战演练HTML5美术绘画，HTML5声频与视頻，Web储存，线下运用，Workers线程同步解决，Geolocation自然地理部位等技术性。</p>
                <a href="">Read More</a>
            </div>
        </div>
    </div>
</body>
</html>

总结

以上便是这篇文章内容的所有內容了，期待本文的內容对大伙儿的学习培训或工作中具备1定的参照学习培训使用价值，假如有疑惑大伙儿能够留言沟通交流，感谢大伙儿对脚本制作之家的适用。

上一篇：手机微信营销推广手机软件应用实例教程返回下一篇：没有了