正文

常用css动画制作技巧及踩坑总结

kuro-p  2022-02-09  384

关键词：

1. CSS 3d透视

perspective 属性都是加给父元素的
transform-style：preserve-3d; 这个属性必须与transform一同使用，它使被转换的子元素保留其 3D 转换（即设置给父元素）

<!--这里是一个简单的透视的例子-->
<div class="door-border">
    <div class="door">我是门</div>
</div>

.door-border{
    border: 3px solid #aaa;
    width: 150px;
    height: 200px;
    perspective-origin: top;
    perspective: 200px;
    transform-style: preserve-3d;
}

.door-border .door{
    border: 1px solid brown;
    width: 100%;
    height: 100%;
    background-color: wheat;
    transform: rotate3d(0,1,0,45deg);
    transform-origin: left;
}

2. 元素本身有animation的属性时，transition 中在animation改变的属性会失效

　　　　有一次制作一个类似于上下浮动的小波浪动画，动画从界面下方进入，由于同时设置的transition和animate对元素的同一个属性进行了更改，触发了此问题。

　　　　解决办法：用伪元素或者嵌套父元素的方式将这两个行为分开原理就是让transition和animation分别作用于不同的容器。

3. 表单标签没有伪元素

　img标签也没有伪元素

4. z-index失效

伪元素z-index失效参考链接
z-index遇上transform失效参考链接

5. 抖动动画制作

　　制作类似钱包抖动动画时，动画旋转角度可以从 -3deg -> 3deg -> -3deg -> 3deg 看起来比较顺畅

　　如果是 6deg -> 0deg -> -6deg -> 0deg 会在 0deg 时，动画有卡顿现象（即不要把中间值设置为关键帧）

6. 循环滚动动画原理

　　原理（一）：第一张与最后一张图完全相同，动画重复播放时没有时间间隔（纯CSS）

　　　　a. transformX(0) -> transformX(-50%) 浏览器正常移动端(Safari)不播放动画页面隐藏后才播放切换时图片会闪一下原因未知

　　　　b. transformX(0) -> transformX(-width(px)/2) 浏览器正常移动端(Safari)播放动画切换时图片会闪一下原因未知

　　　　c. 用 margin-left: 0 -> margin-left: -50%（用left亦可，二者百分比值都是基于父元素宽度计算的）浏览器正常移动端(Safari)播放动画会卡顿（可能是性能导致）

　　　　目前采取c方案控制卡顿在可接受范围内（由于书写循环动画时并没有考虑到浏览器重排带来的性能问题，故没有用绝对定位的元素来做测试）

　　　　a、b方案的应用场景可适当斟酌

　　原理（二）：三张相同的图片原理与轮播图类似三张图无限轮播效果（主JS）

　　　　PC端正常（要注意当前页面隐藏时取消定时器，否则会出bug），移动端未进行测试

7. 动画中需要用到background-image时，尽量用雪碧图

　　在工作中，有一个两张图相互切换的效果，最开始是用keyframe from background-image to background-image （即来回切换两张图片）来实现背景切换的效果非常差，还会触发离开页面一张图片失效的bug，后来更换雪碧图后，得到流畅的两张图切换的效果。

css总结常用技巧

css一行显示　　display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;css多行显示display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2; 查看详情

食堂app-项目开发及踩坑记录（10）

------------恢复内容开始------------实现APP中远程访问调用servlet并返回数据， privatevoidsend(){//开启线程，发送请求newThread(newRunnable(){@Overridepublicvoidrun(){HttpURLConnectionconnection=null;BufferedReaderreader=null;tr 查看详情

tensorflow保存加载模型参数|原理描述及踩坑经验总结(代码片段)

写在前面我之前使用的LSTM计算单元是根据其前向传播的计算公式手动实现的，这两天想要和TensorFlow自带的tf.nn.rnn_cell.BasicLSTMCell()比较一下，看看哪个训练速度快一些。在使用tf.nn.rnn_cell.BasicLSTMCell()进行建模的时候，遇到了模型... 查看详情

jenkinspipeline的语法实例介绍及踩坑记录(代码片段)

本文介绍一下Jenkinspipeline的语法实例介绍及踩坑记录废话不多说，直接上案例pipelineagentanystagesstage(‘download‘)stepsecho‘Thisisabuildstep‘gitcredentialsId:‘0c3d0852-8a03-42e2-a893-a445308a257b‘,url:‘http://192.168.0.6/softwa 查看详情

mac下node安装、配置及踩坑

参考技术AMac下安装node环境，这里介绍的只是其中一种1、打开终端，输入/usr/bin/ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"安装管理平台homebrew执行之后报错curl:(7)Failedtoconnecttoraw.githubusercontent.comport44... 查看详情

fastlane一键打包/发布app-使用记录及踩坑(代码片段)

最近有空,搞一搞fastlane一键打包发布Appstore/testflight/fir.com相关资料安装fastlanebrewinstallfastlanefastlane的安装和使用Fastlane官方文档fastlane自动化打包(android)fastlane-fastfile一些基础idea使用vscode,可以安装一些代码片段插件,快速上手如何... 查看详情

源码学习成功运行resd代码及踩坑记录-pytorch版

目录运行结果简介论文简介环境准备准备文件修改部分运行结语运行结果简介Hello！非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ ଘ(੭ˊᵕˋ)੭昵称：海轰标签：程序猿｜C++选手｜学生简介：因C语言结... 查看详情

源码学习成功运行rdaa代码及踩坑记录-pytorch版

目录运行结果简介论文简介环境准备准备文件运行结语运行结果简介Hello！非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ ଘ(੭ˊᵕˋ)੭昵称：海轰标签：程序猿｜C++选手｜学生简介：因C语言结识编程，... 查看详情

vue-cli搭建uniapp项目过程及踩坑记录

首先来到uniapp官网，找到以下页面然后就可以跟着步骤创建项目了……下面我说下我的创建方式第一步：全局安装vue-clinpminstall-g@vue/cli@4第二步：创建正式版uni-appvuecreate-pdcloudio/uni-preset-vue你的项目名第三步࿱... 查看详情

vue-cli搭建uniapp项目过程及踩坑记录

android全屏状态下弹出输入法adjustresize无效的修复方案及踩坑指南(代码片段)

Android全屏状态下弹出输入法adjustResize无效的修复方案及踩坑指南输入框被输入法遮挡的问题相信很多人都遇见过，这次记录的是Activity在全屏FullScreen状态下windowSoftInputMode的adjustResize不生效问题。下面是WindowManager类关于SOFT_IN... 查看详情

微信小程序使用towxml解析html流程及踩坑记录

参考技术A towxml相对于wxParse还是有一定优势的，首先一些废弃或者过新的标签wxParse是不能解析的，会导致整个页面不能显示，其次towxml对于界面的排版优化是比较美观的，对于开发者还算比较友好，个人是建议... 查看详情

常用前端布局，css技巧介绍(代码片段)

常用前端布局，CSS技巧介绍对前端常用布局的整理总结，并对其性能优劣，兼容等情况进行介绍css常用技巧之可变大小正方形的绘制1：若通过设置width为百分比的方式，则高度不能通过百分比来控制.在这个地方可以使用padding来... 查看详情

《css动画实用技巧》课程笔记

概述这是我学习CSS动画实用技巧的课程笔记常用动画属性——transition.changeimg{display:block;width:300px;height:284px;opacity:0;-webkit-transform:translate(-100px,-100px);-webkit-transition:opacity1sease-in-out0.5s,-webkit-transf 查看详情

go包管理工具-glide使用方法及踩坑记录(代码片段)

前言大学以来一直想做一个OJ，终于可以开始，而且是用新学的Go来写，心里还是挺兴奋的。项目启动，要搭架子，第一件事，当然是选择一个包管理工具。Go的包管理还是挺混乱的，没有一个能像Java的... 查看详情

android全屏状态下弹出输入法adjustresize无效的修复方案及踩坑指南(代码片段)

css动画制作的12个技巧

作为前端的设计师和工程师，我们用CSS去做样式、定位并创建出好看的网站。我们经常用CSS去添加页面的运动过渡效果甚至动画，但我们经常做的东西不会超过这些。动效是一个有助于访客和消费者理解我们设计的强有... 查看详情

element-uiform表单校验小结及踩坑(代码片段)

1、要验证输入只能为数字时、如果使用type=“number”样式这边去掉type=number时自带的属性/*去除webkit中input的type="number"时出现的上下图标*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button-webkit-appearance:none;input[type=... 查看详情