墨痕的前端知识体系

# 常用 css 片段

# 垂直居中

.item
  position absolute
  top 50%
  left 50%
  transform translate3d(-50%,-50%)
.item
  position absolute
  top 50%
  left 50%
  width 100px
  height 100px
  margin -50px 0 -50px

# 全屏显示

page
  position fixed
  width 100%
  height 100%
  div
    height 100%

背景图 background 拓展

  • 多个背景图叠加

    效果图: logo和title均为 image

    **分析:**分为三部分 header 盒下: bg 盒(蒙层) logo 盒(底部背景) title 标题图

    .header
  position relative
  width 100%
  height 200px
  box-sizing border-box
  overflow hidden
  display flex
  align-items center
  justify-content center
  .bg
    position absolute
    left 0
    top 0
    bottom 0
    background #888
    width 100%
    height 100%
    z-index 2
    opacity .2
  .logo
    position absolute
    top 0
    left 0
    width 100%
    height 200px
    z-index 1
    filter blur(15px)
  .title
    position relative
    width 300px
    height 100px
    z-index 3
    opacity .95

  • 整屏显示一张背景图

效果图: 

page
  width 100%
  height 100%
  .bg
    position fixed
    left 0
    top 0
    bottom 0
    width 100%
    height 100%
    z-index 2

  • 全屏背景

    html
  background url('') no-repeat center center fixed
  background-size cover

# 图片制为灰色

.image
  filter hray
  -webkit-filter grayscale(1)

# 背景渐变动画(雪碧图原理)

   .bg
    background-image: linear-gradient(#5187c4, #1c2f45)
    background-size: auto 200%
    background-position: 0 100%
    transition: background-position 0.5s
    &:hover
      background-position 0

拓展

box-shadow 效果

.item{
      display: flex;
      margin-left: 20px;
      flex-direction: column;
      width: 230px;
      height:300px;
      align-items: center;
      transition: all .3s linear;

    }
    .image-wrapper{
      margin-top: 20px;
    }
    .image-wrapper img {
      display: block;
    }
    .title{
      margin-top: 18px;
      font-size: 14px;
      line-height: 21px;
    }
    .sub-title{
      margin-top: 3px;
      font-size: 12px;
      color:#B0B0B0;
      line-height: 18px;
    }
    .price{
      margin-top: 10px;
      font-size: 14px;
      color:#FF6700;

    }
    .item:hover{
      box-shadow: 0px 4px 8px #0000001f;
      transform: translate3d(0,-3px,0);
    }

多行文字截断

.text
  display -webkit-box
  -webkit-line-clamp n
  text-overflow ellipsis
  -webkit-box-client vertical
  overflow hidden


.item-text{
      margin-left: 20px;
      width: 476px;
      height: 76px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      font-size: 14px;
      color:#545c63;
      line-height: 28px;
      transition: all .1s linear;
      -webkit-transition: all .1s linear;
    }
    .item-text:hover{
      background-color: #fff;
      height: auto;
      min-height: 84px;
      z-index: 5;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 8px 16px rgba(7,17,27,.2);
      -webkit-line-clamp: inherit;
    }

# 文字截断

单行文本

overflow hidden
text-overflow ellipiss
white-sapce nowrap

多行文本

display -webkit-box
-webkit-box-orient: vertical;
-wekit-line-clamp n
text-overflow ellpisis
overflow hidden

line-height

控制文字只展示两行
line-height 16.5px
max-height 33px

控制文字折行
font-size 12px
width 12px
word-break:break-wrod

# 清除浮动

.clearfix
  display inline-block
  &:after
    content ""
    clear both
    display box
    height 0
    line-height 0
    visibility: hidden

# 全局文本

body, html
  line-height: 1
  font-weight: 200
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif

# 扩展点击区域

.item
  position relative
  &:before
    position absolute
    content ""
    left -10px
    right -10px
    bottom -10px
    top -10px

# 根据分辨率设置不同的背景图

bg-image($url)
  background-image: url($url + "@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png")

....
.icon
  display inline-block
  width 30px
  height 40px
  background-size 30px 40px

# 通用媒体查询


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}

@media only screen and (min-width : 321px) {
  /* Styles */
}

@media only screen and (max-width : 320px) {
  /* Styles */
}

/* iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}

/* 桌面 */
@media only screen and (min-width : 1224px) {
  /* Styles */
}

@media only screen and (min-width : 1824px) {
  /* Styles */
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}

# 文本选择样式

::selection
  /*stylus*/

# 盒阴影

内盒阴影

box-shadow: inset 2px 0 4px #000;

外盒阴影

box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.5);

# 三角形绘制

.bg
  width 0
  height 0
  box-sizing border-box
  border 100px solid
.bg-left
  border-color transparent pink transparent transparent
  ...

# 表单输入效果

  • 边框阴影
input[type=text] {
    transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #ddd;
}
input[type=text]:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}

  • label 跳动

    .els-input {
  margin-left: 20px;
  display: inline-block;
  height: 50px;
  line-height: 50px;
  color: #606266;
  border: 1px solid #dcdfed;
  outline: none;
  padding: 0 15px;
  font-size: 13px;
  border-radius: 4px;
  transition: all 0.2s;
}
.input-wrapper {
  position: relative;
}
.label {
  position: absolute;
  font-size: 13px;
  left: 35px;
  top: 18px;
  transition: all 0.2s;
}
.els-input:focus {
  border: 1px solid #409eff;
}
.els-input:focus + .label {
  top: 5px;
  left: 25px;
  font-size: 10px;
  font-weight: 600;
  opacity: 1;
}
Last update: 7/20/2021, 8:53:54 AM

← less 笔记 →