第二十一周 -- 2019.08.12 - 2019.08.18 - Visual Design - 《技术每周一小步》

Text
width height
position
float
margin 调整水平居中
img 调整为水平居中
background
动画
- animation property
- @keyframes
响应式设计
- 创建media
- 图像响应式

Text

带边框的 text-align 例子

<style>
  h4 {
        text-align: center;
  }
  p {
    text-align: justify;
  }
  .links {
    margin-right: 0px;
    border: 1px solid #000;
  }
  .fullCard {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

width height

调整 width

通过 absolute, relative 或 percentage 的方式，限定 element 的宽度

img {
    width: 220px;
}
div.p {
    width: 50%;
}

调整 height

通过控制 viewpoint比例

vw ：占 xx% viewpoint’s width

vh ：占 xx% viewpoint’s height

vmin ： vw和vh中的 xx% 的较小值

vmax ： vw和vh中的 xx% 的较大值

通过控制 viewpoint 的比例来控制element的宽高

全屏

#elem {
    height: 100%;
}
-->
#elem {
    height: 100vh;
}

配置子元素不受父元素container限制，而受浏览器 viewpoint 控制

#parent {
    width: 400px;
} 
#child{ 
    /* This is equal to 100% of the parent width, not the whole page. */ 
    width: 100%;
}
-->
#child{
    /* 100% viewpoint's width, not the parent's width */
    width: 100vw;
}

设置响应垂直居中

#elem{ 
    width: 60vw; 
    height: 60vh; 
    margin: 20vh auto; 
}

等宽列

.column-2{ float: left; width: 50vw; } 
.column-4{ float: left; width: 25vw; } 
.column-8{ float: left; width: 12.5vw; }

position

position 布局方式有三种：relative ， absolute 以及 fixed

relative

Changing an element’s position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.

top， bottom，left，right 将控制 normal flow 位置时的item偏移

top：向下偏移

bottom：向上偏移

left：向右偏移

right：向左偏移

absolute

lock the element in place relative to its parent container.

Unlike the relativeposition, this removes the element from the normal flow of the document, so surrounding items ignore it.

absolute，是相对位置下的绝对位置

fixed

Similar to absolute, it also removes the element from the normal flow of the document.

Other items no longer “realize” where it is positioned, which may require some layout adjustments elsewhere.

One key difference between the fixedand absolutepositions is that an element with a fixed position won’t move when the user scrolls.

float

Floating elements are removed from the normal flow of a document and pushed to either the leftor rightof their containing parent element.

margin 调整水平居中

block类型的element配置margin属性值为 auto 可以将 element 的位置渲染为水平居中

img 调整为水平居中

img 默认为inline element，若将其display属性改为block，将margin配置为auto，则也可以使img渲染为水平居中

background

渐变色

background: linear-gradient(gradient_direction, color 1, color 2, color 3, …);

gradient_direction: 默认垂直渐变，单位 xxx deg，正度数为顺时针旋转，负度数为逆时针旋转

渐变条纹

background: repeating-linear-gradient(
    45deg,
    yellow 0px,
    red 30px,
    black 60px,
    blue 80px
);

使用图片

body {
    background:  url(https://i.imgur.com/MJAkxbh.png);
}

动画

animation property

The animation properties control how the animation should behave.

animation-name

sets the name of the animation, which is later used by @keyframesto tell CSS which rules go with which animations.

animation-duration

sets the length of time for the animation.

animation-fill-mode

specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

forwards : The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)

backwards : The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period

both : The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

animation-iteration-count

allows you to control how many times you would like to loop through the animation.

infinite 为一直循环下去

animation-timing-function

controls how quickly an animated element changes over the duration of the animation.

Value	Description
linear	The animation has the same speed from start to end
ease	Default value. The animation has a slow start, then fast, before it ends slowly
ease-in	The animation has a slow start
ease-out	The animation has a slow end
ease-in-out	The animation has both a slow start and a slow end
cubic-bezier	The animation goes along the P0->P3 as a cubic bezier curve

A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

cubic-bezier曲线的路径：P0(0, 0) —> P1(x1, y1) —> P2(x2, y2) —> P3(1, 1)

animation-timing-function: cubic-bezier(x1, y1, x2, y2);

特别值得注意的地方为，x∈[0, 1]，y>=0(不一定 <=1)

ease-out，与cubic-bezier对标，相当于

animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

ease-in，与cubic-bezier对标，几乎相当于

animation-timing-function: cubic-bezier(0.5, 0.1, 0.65, 0.6);

@keyframes

the @keyframesrule controls what happens during that animation.

This is done by giving CSS properties for specific “frames” during the animation, with percentages ranging from 0% to 100%.

create a class or id, set its property animation-name and other animation properties
set @keyframes with class or id
set x% animation action

未在 x% 中改变的项，与动作前保持一致

<style>
div {
    margin: auto;
    height: 40px;
    width: 70%;
    background: black;
    border-radius: 5px;
}
#anim {
    animation-name: colorful;
    animation-duration: 3s;
}
@keyframes colorful {
  0% {
    background-color: blue;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: yellow;
  }
}
</style>
  <div id="anim"></div>

通过 top，bottom，left，right 可以控制在动画中的位置变化

通过 opacity 可以通知在动画中的透明度

响应式设计

创建media

@media (max-width: 100px) { /* CSS Rules */ }
@media (min-height: 350px) { /* CSS Rules */ }

p {
    font-size: 20px;
}
/* Add media query below */
@media (max-height: 800px) {
    p {
        font-size: 10px;
    }
}

图像响应式

img {
    max-width: 100%;
    display: block;
    height: auto;
}

max-width 设置为 100% 使图像填充置container宽度

display 设置为 block 使图像由 inline 类型element 变为 block 类型element

height 设置为 auto，可以保证展示的图像按照原始图像的长宽比