Skip to content

Instantly share code, notes, and snippets.

@notnotype

notnotype/snippet.md

Last active April 13, 2021 05:21
Show Gist options
  • Save notnotype/7f1181f7e76abc2e157ba45ce3b585c3 to your computer and use it in GitHub Desktop.
Save notnotype/7f1181f7e76abc2e157ba45ce3b585c3 to your computer and use it in GitHub Desktop.
Download ZIP
[css动画参数] css动画参数 #css
Raw
snippet.md

常用css动画参数

(1)贝塞尔曲线

transition: transform 1000ms cubic-bezier(0.7, 0, 0.3, 1) 0ms;

(2)阴影

box-shadow: 0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)

(3)阴影

.hoverable {
  -webkit-transition: -webkit-box-shadow .25s cubic-bezier(.4,0,.2,1);
  transition: -webkit-box-shadow .25s cubic-bezier(.4,0,.2,1);
  transition: box-shadow .25s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .25s cubic-bezier(.4,0,.2,1);
  will-change: box-shadow;
}
.hoveerable:hover{
    box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%), 0 8px 10px 1px rgb(0 0 0 / 14%), 0 3px 14px 2px rgb(0 0 0 / 12%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment