HTML+CSS应用问题笔记

IOUTSIDE仿建笔记—–问题及解决

前端小白准备作品集，仿建IOUTSIDE网站首页布局。最后,就当中出现的问题予以记录，以记录自己的技术成长。

问题一 —– logo动画+背景图片缩放

• logo动画
  使用animata与@keyframes搭配使用达到上图logo区域动画效果

.class {        animation: myMove-2 1s;    animation-delay:1s;    animation-fill-mode:forwards;}@keyframes myMove-2 {    0% {top:86%;opacity: 0}    100% {top:70%;opacity: 1}}       

animation中定义动画name+time（持续时间），animation-delay属性则是延迟几秒执行，animation-fill-mode是动画执行完毕class保持何种属性。

@keyframes中将调用该动画的name，并在网页中呈现出class在某节点处于什么状态，节点建议用百分数表示。

• 背景图片
  使用background中的属性来达到上图缩放效果

.class {    width: 100%;    background: url(../img/bg-pic.jpg) no-repeat scroll center top;    background-size:cover;    min-height: 540px;}

重点在于scroll center top以及background-size：cover上。
scroll使背景图片随div变化而滚动，然后将center和top固定，并使得背景cover，从而得到这种效果。

问题二 —– transition&transform

• 旋转图片
  使用css3中transition和transform属性。

.class {    width: 42px;    height: 42px;    display: block;    margin:0 auto;    transition: all 0.5s;}.class:hover {    transform:rotate(360deg);}

transition，设置动画时间，然后在：hover中设置transform：rotate（），即可完成设置。

问题三 —– 图片垂直居中问题与img 5px问题

• 图片居中
  图片居中的问题自己遇到的比较多，解决方案也比较多，此处只记录自己应用到的一种方案。

<div class="class">    <span></span>    <img></div>.class {    width:100%;    height:100%;    text-align:center;}.class span {    height: 100%;    display: inline-block;    vertical-align: middle;}.class img {    vertical-align: middle;}

外层div添加text-align：center属性（水平居中），然后span与img同时添加vertical-align:middle（垂直居中）。

• img 5px问题
  img 5px问题同样是比较经典的一个问题。div里面放置img在地下总有个5px左右的空白。

PLAN A:父级容器float，并将img的display设置为block；<div>    <img></div>div {    float:left;}img {    display:block;} PLAN B:将img的vertical-align设置为bottom；img {    vertical-align:bottom;}