一个小的翻转的效果,与无序列表结合去写,还有一些padding margin diaplay 属性的应用
翻转要结合:hover鼠标悬浮、transition;过渡属性去写
transform:rotatey(180deg)
在重新写这个效果的时候,因为隔了一段时间了,竟然把翻转属性的用法给忘了,由此,温故知新真的很重要,要时常复习。
最近在写页面的时候经常遇到因为尺寸导致的一些效果没法实现,只能一点一点去调尺寸,唉,不知道问题出在哪。
效果图 翻转效果,鼠标移动到图片和文本框时图片垂直翻转180度
HTML结构 这里就复制了一段,其他段内容都是一致的;
<body>
<div class="page">
<ul type="none">
<li>
<img src="../11.12text.html/pic.jpg" alt="">
<div class="main">
<div class="title">
<h4>6/02<span>2021</span></h4>
<a href="#">美丽新世界共创美好家园</a>
</div>
<div class="writer">
<p>陈某毕业于某名牌大学信息安全专业,毕业后一直从事相关工作。2020年,他入职一家知名科技公司信贷平台的运营部从事数据分析,拥有客户数据查询权限。2020年底,陈某的好朋友、被告人张某找到他,提出以每条1.7元左右的价格购买该公司贷款项目中贷款客户个人信息。虽然知道是违法行为,但经不住诱惑的陈某还是答应了这桩生意。</p>
</div>
</div>
</li>
css样式
*{
margin: 0;
padding: 0;
}
.page{
width: 1000px;
margin: 0 auto;
background: #999;
}
.page ul li{
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
.page ul li:hover img{
transform: rotatey(180deg);
}
.page img{
vertical-align: middle;
transition: 1s;
}
.main{
width: 278px;
border: 1px black solid;
padding: 10px;
}
.main:hover{
border: solid #f00 1px;
}
.title h4{
float: left;
background: lightgrey;
font-size: 20px;
padding: 10px;
}
.title h4 span{
display: block;
font-size: 16px;
text-align: center;
}
.title a{
padding-left: 10px;
text-decoration: none;
font-size: 18px;
color: black;
border-bottom: black 1px solid;
padding-bottom: 42px;
float: left;
}
.title a:hover{
color: #f00;
}