哎!突然发现天天更新意外的好难啊!
这回作的是三列的板块效果,由于不会描述,所以看图片吧!
至于内容,就别太在意了,毕竟是看着这个效果作的.
而效果则是鼠标悬浮,图片放大,利用transform: scale(1.2);
在通过css3的过渡,transition: transform 1s;
以及鼠标悬浮:hover
阴影box-shadow: 10px 10px 10px #ccc;
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width= ???, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ???<title></title> ???<style> ???????????.kuai{ ???????????width: 100%; ???????????????margin: 0 auto; ???????????overflow: hidden; ???????????} ???????.kuai>h1{ ???????????margin-top: 50px; ???????????text-align: center; ???????} ???????.kuai>p{ ???????????text-align: center; ???????????margin-bottom: 50px; ???????} ???????.kuai p span:hover{ ???????????color: #284f86; ???????} ???????.kuai ul li{ ???????????list-style-type: none; ???????????width: 33.33%; ???????????float: left; ???????????/* border: 1px solid #ccc; */ ???????????overflow: hidden; ???????????padding: 10px; ???????????????box-sizing: border-box; ???????} ???????.kuai ul li img{ ???????????width: 100%; ???????????transition: transform 1s; ???????} ???????.div1{ ???????????overflow: hidden; ???????????border: 1px solid #ccc; ???????} ???????.div1 a{ ???????????display: block; ???????????color: #000; ???????????text-decoration: none; ???????} ???????.div1:hover{ ???????????box-shadow: 10px 10px 10px #ccc; ???????} ???????.tu{ ???????????width: 100%; ???????????overflow: hidden; ???????} ???????.tu img:hover{ ???????????transform: scale(1.2); ???????} ???</style></head><body> ???<div class="kuai"> ???????<h1>大咖云集，知识分享的开发者技术社区</h1> ???????<p><span>实战干货、在线直播、专家问答、技术论坛，学习，成长，分享，共建</span></p> ???????<ul> ???????????<li> ???????????????<div class="div1"><a href=""> ???????????????????<div class="tu"><img src="images/li.jpg" alt=""></div> ???????????????????<p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a> ???????????????</div> ???????????????<div class="div2"> ???????????????<p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> ???????????????<p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> ???????????????</div> ???????????</li> ???????????<li> ???????????????<div class="div1"><a href=""><div class="tu"><img src="images/li.jpg" alt=""></div> ???????????????????<p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a> ???????????????</div> ???????????????<div class="div2"> ???????????????????<p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> ???????????????<p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> ???????????????</div> ???????????</li> ???????????<li> ???????????????<div class="div1"><a href=""><div class="tu"><img src="images/li.jpg" alt=""></div> ???????????????????<p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p></a> ???????????????</div> ???????????????<div class="div2"> ???????????????????<p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> ???????????????<p>【聚能聊】怎样的持续交付工具和平台最适合你的组织？</p> ???????????????</div> ???????????</li> ???????</ul> ???</div></body></html>这是全部的代码,作为日后的储备吧!也就不加那么多的注释了
三列板块 js效果
原文地址：https://www.cnblogs.com/yinwangyizhi/p/9109358.html