“钉钉官网首页的炫酷动效” 被我用css新特性轻松破解啦～

经过我十几分钟的分析，将这个复杂的特效切割成了三部分：

logo部分向上，向屏幕外移动，滚动一段时间后不透明度逐渐降低，最终从上方消失；色块有3d的深度效果，滚动时逐渐向屏幕外扩散，并最终都移动到屏幕外；菜单面板在logo快消失时，从屏幕中心一个点逐渐扩散开来，并在快扩散成型时出现灰色背景；

分析结束后，开始动工✊。

2. 整体布局

首先创建一个宽高满屏的div，为了方便后面描述，我们叫这个div为【滚动盒子】，并设置黑色背景。

然后添加一个子元素，设置高度大于100%，这样父元素就能滚动了，不然无法驱动动画执行，这里我随便设置了高度200%。

那么有动效的元素（我暂且叫它【动效盒子】）在滚动盒子中如何定位呢，总不能就在文档流中吧，那岂不是滚动区域滚动的时候，整个动效盒子也会被来回滚动，甚至滚出可视区域。这样显然是不行的，并且设置 absolute 绝对定位也是不行的，同样会跟随滚动。

得出结论： 为了让动效盒子不在滚动盒子内滚动，只能考虑 fixed 固定定位和 sticky 粘性定位，两者都可以实现，但是 fixed 定位不太灵活，一旦修改滚动盒子的位置，就得跟着调整动效盒子的位置。所以最终我给动效盒子设置宽高100%，并粘性定位于滚动盒子顶部。

布局结构大致如下：

:root {
  --mainHeight: 100vh;
}
#container {
  position: relative;
  height: var(--mainHeight);
  overflow-x: hidden;
  overflow-y: scroll;
  background: #040506;
}
#stretcher {
  height: calc(2 * var(--mainHeight));
}
main {
  pointer-events: none;
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--mainHeight);
  overflow: hidden;
}
//滚动盒子
 

    //动效盒子
    

       //这里面是实现动效的元素
    
    
    //撑开父元素高度，让父元素可以滚动
    

 

3. logo动效

因为动效是 3D动效，所以我们先在动效盒子设置下3D效果和视距：

main{
    transform-style: preserve-3d;
    perspective: 500px;
}

然后就是设置lodo的动画了，运动轨迹很简单，translate3d向上向屏幕外移动就行了，因为logo在消失之后还会继续面板动效，所以我假定logo动效大概占总动效时长 2/3。将动画绑定了滚动时间线后，只需要观察在logo从顶部消失时，滚动条大概滚动了 2/3 即可，慢慢调整参数。

❗需要注意的是：因为logo是在快移动出屏幕时才逐渐变透明，所以需要单独设置个透明度变化的animation。

.logo {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  transform: translateX(-50%);
  animation-name: logo,logohide;
  animation-fill-mode: forwards;
  animation-timeline: --squareTimeline;
}
@keyframes logo {
  100% {
    transform: translate3d(-50%, -400px, 500px) scale(.6);
  }
}
@keyframes logohide {
  55%{
    opacity: 1;
  }
  63%,100% {
    opacity: .2;
  }
}

4. 色块动效

色块动效和logo动效差不多，也是 translate3d 的变化。因为他们作为一个整体在运动，新建个色块盒子，所有色块都扔里面设置绝对定位，通过 translateZ 呈现3d效果。

.blocks {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  animation-name: block;
  animation-fill-mode: forwards;
  animation-timeline: --homeTimeline;
  transform-style: preserve-3d;
  perspective: 500px;
}
.blocks span {
  --color: red;
  --left: 10%;
  --top: 10%;
  --z: 0;
  position: absolute;
  left: var(--left);
  top: var(--top);
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: var(--color);
  transform: translateZ(var(--z));
}
@keyframes block {
  100% {
    transform: translate3d(-50%, -500px, 300px);
    width: 270%;
  }
}
    
 
  

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  

5. 面板动效

面板动效是最复杂的，整体呈现为从中心点扩散成列表模式。逆向思维一下，其实这个动画的实质是先设置成列表形式，然后在动画 0% 时将所有元素移动缩小到中心点。

麻烦点来了，怎么确定每个元素移动的距离就能移动到面板中心点呢？我想了个办法，我先在面板中心显示了一个小点，如下：

然后在控制台不断设置元素的 translte 移动距离，直至和小点重合（先把元素scale成一个小点）。这样就可以很轻松获取到每个元素位移到中心点的距离。（ps：因为每行有7个元素，其实只需要调试获取到第一行的前四个元素的tanslate距离就行，第一行后面的三个就是把前面三个点x改为负值，第二行则负复制第一行，把y全部改为负值）

可以看到，已经成功实现了图标从中心点扩散，但似乎叮叮的图标像是一个一个出来的，所以还需要改进。 观察叮叮的面板动效得知，图标是从最外侧的两列开始出现，然后再是里面的两列，以此类推。

简单，只需要设置动画延迟就行。但是被绑定滚动时间线的动画无法设置 animation-delay 动画延迟，那只能在动画内容里下文章，1,7列是45%开始移动，2,6列是50%开始移动，3,5列55%开始移动，最中心第4列60%开始移动。

面板背景色显示逻辑差不多，在动画70%时再开始设置背景色。

emmmm，差不多了，就这样吧～ 完结撒花

效果体验

点击码上掘金右上角“查看详情” 滚动鼠标滚轮查看效果。只是实现了大体动效，没有调整细节，多调调参数应该可以做到和钉钉首页99%相似度。

钉钉应该是用js监听滚动实现的这个复杂效果，可以看到，当我们使用css新特性 scroll-timeline 之后，这个动效完全就可以用纯css实现了，简单了很多

最后

更新补充一下兼容性：目前这个css属性还是项实验性技术，真要应用在生产环境可能还需要些时日，但是不得不说，css越来越强大了！我们要做一个骄傲的前端仔！

开源OpenShot Video编辑器 Mac 构建说明

入门

开始使用 libopenshot 的最佳方法是了解我们的构建系统、获取所有源代码、安装开发 IDE 和工具，并更好地了解我们的依赖项。因此，请阅读以下部分并按照说明进行操作。请记住，您的计算机可能与编写这些说明时使用的计算机不同。您的文件路径和应用程序版本可能略有不同，因此请留意您键入的命令中细微的文件路径差异。

构建工具

CMake 是我们构建系统的支柱。它是一个跨平台构建系统，可检查依赖项、定位头文件和库、生成 makefile，并支持 libopenshot 和 libopenshot-audio 的跨平台编译。CMake 使用源外构建概念，其中所有临时构建文件（例如 makefile、目标文件，甚至最终二进制文件）都是在源代码文件夹之外的 /build/ 子文件夹中创建的。这可防止构建过程弄乱源代码。这些说明仅使用 GNU 编译器（包括适用于 Windows 的 MSYS2/MinGW）进行了测试。

依赖项

构建 libopenshot 需要以下库。有关如何安装这些依赖项的说明因操作系统而异。以下列表中已标记库和可执行文件，以帮助区分它们。

ImageMagick++（libMagick++、libMagickWand、libMagickCore）OpenShot 音频库 (libopenshot-audio)Qt 5（libqt5）CMake（CMake）swig（swig）Python 3（libpython）Doxygen（doxygen）单元测试++ (libunittest++)ZeroMQ (libzmq)OpenMP（-fopenmp）CMake 标志（可选）

有许多不同的构建标志可以传递给 cmake 来调整 libopenshot 的编译方式。在某些操作系统上编译时可能需要其中一些标志，具体取决于您的构建环境的设置方式。要添加构建标志，请遵循以下一般语法：$ cmake -DMAGICKCORE_HDRI_ENABLE=1 -DENABLE_TESTS=1 ../

获取源代码

安装 libopenshot 的第一步是获取最新的源代码。源代码可在GitHub上找到。使用以下命令获取最新的 libopenshot 源代码。

git clone https://github.com/OpenShot/libopenshot.git
git clone https://github.com/OpenShot/libopenshot-audio.git

文件夹结构（libopenshot）

源代码分为以下文件夹。

CMake/文件/包括/源码/测试/第三者/安装依赖项

为了实际编译 libopenshot 和 libopenshot-audio，我们需要在您的系统上安装一些依赖项。libopenshot 所需的大多数软件包都可以通过 Homebrew 轻松安装。但是，首先使用以下选项安装 Xcode（“UNIX 开发”、“系统工具”、“命令行工具”或“命令行支持”）。请务必使用“brew update”命令刷新您的 Homebrew 软件包列表。

注意：对于大多数用户来说，Homebrew 似乎效果更好（与 MacPorts 相比），因此在本指南中我将重点介绍 brew。

使用 Homebrew 软件包安装程序 () 安装以下软件包。密切注意这些 brew 安装过程中的任何警告或错误。注意：您的 /usr/local/ 文件夹中可能存在一些冲突的库，因此如果检测到这些库，请按照 brew 的指示进行操作。

# Download packages using Homebrew
$ brew install ffmpeg librsvg swig doxygen unittest-cpp qt5 cmake zeromq libomp python@3.7 librsvg mktorrent

# Download ZMQ C++ header file manually
$ curl https://raw.githubusercontent.com/zeromq/cppzmq/master/zmq.hpp --output /usr/local/include/zmq.hpp

Mac 构建说明 (libopenshot-audio)

由于 libopenshot-audio 在 Homebrew 或 MacPorts 软件包中不可用，我们需要执行一些额外步骤来手动构建和安装它。启动终端并输入：

$ cd [libopenshot-audio repo folder]
$ mkdir build
$ cd build
$ cmake -d -G "Unix Makefiles" -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_C_COMPILER=clang -DCMAKE_EXE_LINKER_FLAGS="-stdlib=libc++" -DCMAKE_SHARED_LINKER_FLAGS="-stdlib=libc++" -D"CMAKE_BUILD_TYPE:STRING=Release" ../
$ make
$ make install
$ ./src/openshot-audio-test-sound  (This should play a test sound)

Mac 构建说明 (libopenshot)

运行以下命令来构建 libopenshot：

注意：这些路径名已经过时，应该更新以匹配依赖项的当前可用版本。

$ cd [libopenshot repo folder]
$ mkdir build
$ cd build
$ cmake -d -G "Unix Makefiles" -DCMAKE_CXX_COMPILER=clang++ -DCMAKE_C_COMPILER=clang -DCMAKE_PREFIX_PATH=/usr/local/opt/qt/ -DCMAKE_EXE_LINKER_FLAGS="-stdlib=libc++" -DCMAKE_SHARED_LINKER_FLAGS="-stdlib=libc++" -D"CMAKE_INSTALL_RPATH_USE_LINK_PATH=1" -D"ENABLE_RUBY=0" -D"CMAKE_BUILD_TYPE:STRING=Release" ../
$ make

如果您缺少 libopenshot 的任何依赖项，此时您将收到错误消息。只需安装缺少的依赖项，然后再次运行上述命令。重复此操作，直到没有显示错误消息并且构建过程完成。

此外，如果您在构建时遇到问题，请参阅上面的 CMake Flags 部分，因为它可能提供查找丢失的文件夹路径、丢失的 Python 3 库等的解决方案...

要运行所有单元测试（并验证一切是否正常工作），启动终端并输入：

make test

要自动生成 libopenshot 的文档，请启动终端并输入：

make doc

这将使用 doxygen 生成一个 HTML 文件夹，其中包含所有类和方法的文档。该文件夹位于 build/doc/html/。成功构建 libopenshot 后，我们需要安装它（即，将其复制到正确的文件夹，以便其他库可以找到它）。

make install

这应该将二进制文件复制到 /usr/local/lib/，将头文件复制到 /usr/local/include/openshot/... 这是其他项目在构建时查找 libopenshot 文件的地方。此时还安装了 Python 3 绑定。让我们验证一下 Python 绑定是否正常工作：

python3 (or python)
>>> import openshot

>> import openshot" tabindex="0" role="button" style=" box-sizing: border-box; display: inline-block; padding: 0px !important; font-size: 14px; font-weight: var(--base-text-weight-medium, 500); line-height: 20px; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border-width: 1px; border-style: solid; border-color: var(--button-default-borderColor-rest, var(--color-btn-border)); border-image: initial; border-radius: 6px; appearance: none; color: var(--button-default-fgColor-rest, var(--color-btn-text)); background-color: var(--button-default-bgColor-rest, var(--color-btn-bg)); box-shadow: var(--button-default-shadow-resting, var(--color-btn-shadow)),var(--button-default-shadow-inset, var(--color-btn-inset-shadow)); transition: color 80ms cubic-bezier(0.33, 1, 0.68, 1) 0s, background-color, box-shadow, border-color; margin: var(--base-size-8, 8px) !important; ">

如果没有显示任何错误，则表示您已成功在系统上编译并安装了 libopenshot。恭喜您，请务必阅读我们的 wiki 以了解如何成为 OpenShot 开发人员！欢迎加入 OpenShot 开发人员社区！我们期待与您见面！

Mac 构建说明（可选 openshot-qt）

正在进行的工作

如果您还计划构建 openshot-qt repo（我们基于 Qt5 的用户界面），则需要与上述计划略有不同。首先，我们需要最新版本的 Qt5 和 PyQt5（以及 QtWebEngine 模块）。而且由于 Homebrew 不支持其 PyQt 版本的 QtWebEngine，因此我们必须自行构建。

以下版本用于官方 Mac 构建服务器（较新的版本也可以使用，但以下命令可能无法在未经修改的情况下使用）。

$ mkdir /usr/local/qt5.15.x/
$ cd /usr/local/qt5.15.x/
# Extract the Qt, Sip, PyQt, and PyQtWebEngine folders to this location.

# Update Mac Deployment Target
# sudo nano qt5.15/clang_64/mkspecs/macx-clang/qmake.conf
# sudo nano qt5.15/clang_64/mkspecs/macx-g++/qmake.conf
QMAKE_MACOSX_DEPLOYMENT_TARGET = 10.13
QMAKE_MAC_SDK = macosx10.13
load(qt_config)

# Compile SIP with PyQt5 support (and specific deployment target)
# SIP 4.19.23 required
python3 configure.py --deployment-target 10.13 -p macx-g++ --sip-module PyQt5.sip
make
make install

# Compile PyQt5 (with custom SIP and custom Qt install locations)
QMAKESPEC="macx-g++" ARCHFLAGS="-arch x86_64" MACOSX_DEPLOYMENT_TARGET=10.13 python3 configure.py -q /usr/local/qt5.15.x/qt5.15/5.15.0/clang_64/bin/qmake --disable "QtWebKitWidgets QtWebKit QtPositioning QtTest EngionIo" --sip "/usr/local/Cellar/python@3.7/3.7.9_2/Frameworks/Python.framework/Versions/3.7/bin/sip"

make 
make install

# Compile PyQtWebEngine (separate download)
QMAKESPEC="macx-g++" ARCHFLAGS="-arch x86_64" MACOSX_DEPLOYMENT_TARGET=10.13 python3 configure.py -q /usr/local/qt5.15.x/qt5.15/5.15.0/clang_64/bin/qmake --sip "/usr/local/Cellar/python@3.7/3.7.9_2/Frameworks/Python.framework/Versions/3.7/bin/sip"

# Remove port_v2/__init__.py
rm /usr/local/lib/python3.7/site-packages/PyQt5/uic/port_v2/__init__.py

# Fix RPath for installed PyQt5 libraries
# by creating symlinks inside the /site-packages/PyQt5/lib/ folder
cd [openshot-qt repo folder]
python3 installer/fix_qt5_rpath.py

接下来，我们需要从源代码安装 opencv。

git clone https://github.com/opencv/opencv
cd opencv/
git checkout '4.3.0'
cd ..
git clone https://github.com/opencv/opencv_contrib
cd opencv_contrib/
git checkout '4.3.0'
cd ..
cd opencv
mkdir build
cd build/   # NOTE: If re-building DELETE THE CONTENTS OF THIS FOLDER

# Install Python build server dependencies
python3 -m pip install numpy zmq tinys3 github3.py cx_Freeze

# Install opencv
cmake -DCMAKE_VERBOSE_MAKEFILE:BOOL=ON -DCMAKE_CXX_FLAGS=-I\ /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.15.sdk/usr/include -DCMAKE_PREFIX_PATH=/usr/local/qt5.15.X/qt5.15/5.15.0/clang_64/ -D CMAKE_BUILD_TYPE=RELEASE -D CMAKE_INSTALL_PREFIX=/usr/local -D INSTALL_C_EXAMPLES=ON -D INSTALL_PYTHON_EXAMPLES=ON -D WITH_TBB=OFF -D WITH_V4L=ON -D OPENCV_PYTHON3_INSTALL_PATH=/usr/local/lib/python3.7/site-packages/ -D WITH_QT=ON -D WITH_CUDA=ON -D WITH_OPENGL=ON -D -DENABLE_PRECOMPILED_HEADERS=OFF -DBUILD_opencv_text=OFF OPENCV_EXTRA_MODULES_PATH=../../opencv_contrib/modules -D OPENCV_GENERATE_PKGCONFIG=ON -D BUILD_EXAMPLES=ON -D"CMAKE_OSX_SYSROOT=/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.15.sdk" -D"CMAKE_OSX_DEPLOYMENT_TARGET=10.9" ..

# New Improved
cmake -DCMAKE_VERBOSE_MAKEFILE:BOOL=ON -DCMAKE_CXX_FLAGS=-I\ /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.15.sdk/usr/include -DCMAKE_PREFIX_PATH=/usr/local/qt5.15.X/qt5.15/5.15.0/clang_64/ -D CMAKE_BUILD_TYPE=RELEASE -D CMAKE_INSTALL_PREFIX=/usr/local -D INSTALL_C_EXAMPLES=ON -D INSTALL_PYTHON_EXAMPLES=ON -D WITH_TBB=OFF -D WITH_V4L=ON -D OPENCV_PYTHON3_INSTALL_PATH=/usr/local/lib/python3.7/site-packages/ -D WITH_QT=ON -D WITH_CUDA=ON -D WITH_OPENGL=ON -D  OPENCV_EXTRA_MODULES_PATH=../../opencv_contrib/modules -D OPENCV_GENERATE_PKGCONFIG=ON -DENABLE_PRECOMPILED_HEADERS=OFF -DBUILD_opencv_text=OFF -D"CMAKE_OSX_SYSROOT=/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.15.sdk" -D"CMAKE_OSX_DEPLOYMENT_TARGET=10.9" ..

# Verify OpenCV modules to be built...
# Sometimes I had to run the cmake command twice for 
# all the modules to show up.
--   OpenCV modules:
--     To be built:                 aruco bgsegm bioinspired calib3d ccalib core cvv datasets dnn dnn_objdetect dnn_superres dpm face features2d flann freetype fuzzy gapi hfs highgui img_hash imgcodecs imgproc intensity_transform line_descriptor ml objdetect optflow phase_unwrapping photo plot python2 python3 quality rapid reg rgbd saliency shape stereo stitching structured_light superres surface_matching tracking ts video videoio videostab xfeatures2d ximgproc xobjdetect xphoto
--     Disabled:                    text world

make -j9
make install

# Install custom version of ffmpeg (if you are attempting to package and distribute a Mac version of OpenShot)
# libavdevice has a dependency on tesseract, which depends on a conflicting libgif.dylib file which 
# makes packaging impossible
brew uninstall ffmpeg
brew edit ffmpeg        # remove lines related to tesseract
brew install ffmpeg -s  # install ffmpeg from source (with no tesseract dependency)

历史文章