CSS

灵活运用CSS开发技巧(66个实用技巧，值得收藏)

https://juejin.im/post/5d4d0ec651882549594e7293

灵活运用JS开发技巧

https://juejin.im/post/5cc7afdde51d456e671c7e48

灵活运用PS切图技巧

https://juejin.im/post/5ce68402f265da1b7a4b4d4d

移动端的坑

https://juejin.im/post/5d8eebdfe51d4578364f6fbc

使用text-align-last对齐两端文本

• 要点：通过text-align-last:justify设置文本两端对齐
• 场景：未知字数中文对齐
• 兼容：text-align-last
• 代码：在线演示

使用attr()抓取data-*

• 要点：在标签上自定义属性data-*，通过attr()获取其内容赋值到content上
• 场景：提示框
• 兼容：data-*、attr()
• 代码：在线演示

<div class="bruce flex-ct-y">
    <a class="tooltips" href="https://www.baidu.com" data-msg="Hello World">提示框</a>
    <a class="tooltips" href="https://www.baidu.com"></a>
</div>

.tooltips {
    position: relative;
    margin-top: 10px;
    padding: 0 20px;
    border-radius: 10px;
    height: 40px;
    background-color: $purple;
    line-height: 40px;
    color: #fff;
    &::after {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 5px;
         100%;
        height: 100%;
        background-color: rgba(#000, .5);
        opacity: 0;
        text-align: center;
        font-size: 12px;
        content: attr(data-msg);
        transition: all 300ms;
    }
    &:first-child {
        margin-top: 0;
    }
    &:hover::after {
        left: calc(100% + 20px);
        opacity: 1;
    }
    &[href]:empty::before {
        content: attr(href);
    }
    &[href]:empty:hover::after {
        display: none;
    }
}

1、让图片在容器中显示的更舒适：

设置图像在其容器内的适合度和位置，同时保留其宽高比。 以前只能使用背景图像和background-size属性来实现。

HTML

<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />

CSS

.image {
  background: #34495e;
  border: 1px solid #34495e;
   200px;
  height: 200px;
}
.image-contain {
  object-fit: contain;
  object-position: center;
}
.image-cover {
  object-fit: cover;
  object-position: right top;
}

DEMO

可在 CodePen 上查看真实效果和编辑代码

说明

object-fit: contain 容器内显示整个图像，并且保持宽高比
object-fit: cover 用图像填充容器，并保持宽高比
object-position: [x] [y] 对图像的显示部位进行调整

浏览器支持程度

95.5% caniuse

2、将元素垂直居中于另一个元素：

HTML

<div class="ghost-trick">
  <div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
</div>

CSS

.ghosting {
  height: 300px;
  background: #0ff;
}
.ghosting:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
p {
  display: inline-block;
  vertical-align: middle;
}

DEMO

可在 CodePen 上查看真实效果和编辑代码

说明 使用 ：before伪元素的样式垂直对齐内联元素而不更改其position属性。

浏览器支持程度

99.9% caniuse

3、使最后一项占满剩余高度

通过为最后一个元素提供当前视口中剩余的可用空间，即使在调整窗口大小时，也可以利用可用的视口空间。

HTML

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container > div:last-child {
  background-color: tomato;
  flex: 1;
}

DEMO

可在 CodePen 上查看真实效果和编辑代码

说明

height: 100% 将容器的高度设为视口的高度
display: flex 启用 flex
flex-direction: column 将项目的顺序设置成从上到下
flex-grow: 1 flexbox会将容器的剩余可用空间应用于最后一个子元素。 父级必须具有视口高度。 flex-grow：1可以应用于第一个或第二个元素，它将具有所有可用空间。

浏览器支持程度

99.5% 需要使用前缀 caniuse

4、自定义滚动条：

HTML

<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

CSS

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}
/* To style the document scrollbar, remove `.custom-scrollbar` */
.custom-scrollbar::-webkit-scrollbar {
   8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

DEMO

可在 CodePen 上查看真实效果和编辑代码

浏览器支持程度

90.7% caniuse

5、自定义文本选择的样式：

HTML

<p class="custom-text-selection">Select some of this text.</p>

CSS

::selection {
  background: aquamarine;
  color: black;
}
.custom-text-selection::selection {
  background: deeppink;
  color: white;
}

DEMO

可在 CodePen 上查看真实效果和编辑代码

浏览器支持程度

86.5% caniuse、

6、创建动态阴影

创建类似于box-shadow的阴影，但基于元素本身的颜色。

HTMl

<div class="dynamic-shadow"></div>

CSS

.dynamic-shadow {
  position: relative;
   10rem;
  height: 10rem;
  background: linear-gradient(75deg, #6d78ff, #00ffb8);
  z-index: 1;
}
.dynamic-shadow::after {
  content: '';
   100%;
  height: 100%;
  position: absolute;
  background: inherit;
  top: 0.5rem;
  filter: blur(0.4rem);
  opacity: 0.7;
  z-index: -1;
}

DEMO

可在 CodePen 上查看真实效果和编辑代码

说明

::after 定义一个伪元素
position: absolute 使伪元素脱离文档流并相对于父级定位
 100% and height: 100% 对伪元素进行大小调整以填充其父元素的大小，使其大小相等。
background: inherit 使伪元素继承父级的线性渐变
top: 0.5rem 将伪元素相对于其父元素略微偏移。
filter: blur(0.4rem) 设置伪元素模糊效果，以创建下方阴影效果。
opacity: 0.7 设置伪元素透明度
z-index: -1 将伪元素定位在父元素后面但在背景前面。

浏览器支持程度

94.2% 需要使用前缀 caniuse

7、渐变跟踪

一种悬停效果，其中渐变跟随鼠标光标。

HTML

<button class="button">
    <span>Hover me I'm awesome</span>
</button>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: white;
}

.button {
    position: relative;
    appearance: none;
    background: #f72359;
    padding: 1em 2em;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 100px;
    
    span {
        position: relative;
        pointer-events: none;
    }
    
    &::before {
        --size: 0;

        content: '';
        position: absolute;
        left: var(--x);
        top: var(--y);
         var(--size);
        height: var(--size);
        background: radial-gradient(circle closest-side, #4405f7, transparent);
        transform: translate(-50%, -50%);
        transition: width .2s ease, height .2s ease;
    }
    
    &:hover::before {
        --size: 400px;
    }
}

document.querySelector('.button').onmousemove = (e) => {

    const x = e.pageX - e.target.offsetLeft
    const y = e.pageY - e.target.offsetTop

    e.target.style.setProperty('--x', `${ x }px`)
    e.target.style.setProperty('--y', `${ y }px`)
    
}

DEMO

可在 CodePen 上查看真实效果和编辑代码

浏览器支持程度

91.6% 需要使用 js caniuse

8、css 开关

只使用 css 来实现

HTMl

<input type="checkbox" id="toggle" class="offscreen" /> <label for="toggle" class="switch"></label>

CSS

.switch {
  position: relative;
  display: inline-block;
   40px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  transition: all 0.3s;
}
.switch::after {
  content: '';
  position: absolute;
   18px;
  height: 18px;
  border-radius: 18px;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}
input[type='checkbox']:checked + .switch::after {
  transform: translateX(20px);
}
input[type='checkbox']:checked + .switch {
  background-color: #7983ff;
}
.offscreen {
  position: absolute;
  left: -9999px;
}

DEMO

CodePen上预览和编辑代码

浏览器支持程度 97.7% 需要使用前缀

动画

1、弹跳 loading 动画

HTML

<div class="bouncing-loader">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

@keyframes bouncing-loader {
  to {
    opacity: 0.1;
    transform: translate3d(0, -1rem, 0);
  }
}
.bouncing-loader {
  display: flex;
  justify-content: center;
}
.bouncing-loader > div {
   1rem;
  height: 1rem;
  margin: 3rem 0.2rem;
  background: #8385aa;
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}
.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

DEMO

CodePen上预览和编辑代码

浏览器支持程度97.4% caniuse

2、按钮边框动画

创建一个鼠标悬停的边框动画

HTML

<div class="button-border"><button class="button">Submit</button></div>

CSS

.button {
  background-color: #c47135;
  border: none;
  color: #ffffff;
  outline: none;
  padding: 12px 40px 10px;
  position: relative;
}
.button:before,
.button:after {
  border: 0 solid transparent;
  transition: all 0.25s;
  content: '';
  height: 24px;
  position: absolute;
   24px;
}
.button:before {
  border-top: 2px solid #c47135;
  left: 0px;
  top: -5px;
}
.button:after {
  border-bottom: 2px solid #c47135;
  bottom: -5px;
  right: 0px;
}
.button:hover {
  background-color: #c47135;
}
.button:hover:before,
.button:hover:after {
  height: 100%;
   100%;
}

DEMO

CodePen上预览和编辑代码

说明 使用：before和：after伪元素作为在悬停时设置动画的边框。

浏览器支持程度 100%.

交互

1. 弹出菜单

在悬停和焦点上弹出交互式菜单。

可在CodePen上预览效果和编辑代码

HTML

<div class="reference" tabindex="0"><div class="popout-menu">Popout menu</div></div>

CSS

.reference {
  position: relative;
  background: tomato;
   100px;
  height: 100px;
}
.popout-menu {
  position: absolute;
  visibility: hidden;
  left: 100%;
  background: #333;
  color: white;
  padding: 15px;
}
.reference:hover > .popout-menu,
.reference:focus > .popout-menu,
.reference:focus-within > .popout-menu {
  visibility: visible;
}

说明

left: 100% 弹出菜单从左侧偏移其父级宽度的100％。
visibility: hidden
.reference:hover > .popout-menu 鼠标悬停时，.popout-menu 显示
.reference:focus > .popout-menu 聚焦时，.popout-menu 显示
.reference:focus-within > .popout-menu 确保在焦点位于参考范围内时显示弹出窗口。

浏览器支持程度 100%;

2.兄弟元素淡化

悬停时兄弟节点淡化显示.

DEMO

可在CodePen上预览效果和编辑代码

HTML

<div class="sibling-fade">
  <span>Item 1</span> <span>Item 2</span> <span>Item 3</span> <span>Item 4</span>
  <span>Item 5</span> <span>Item 6</span>
</div>

CSS

span {
  padding: 0 1rem;
  transition: opacity 0.2s;
}
.sibling-fade:hover span:not(:hover) {
  opacity: 0.5;
}

说明

transition: opacity 0.2s 设置0.2秒的淡化动画。
.sibling-fade:hover span:not(:hover)当父级悬停时，选择当前未悬停的span子项并将其透明度更改为0.5。

浏览器支持程度 97.5%；