文章分类 - css
css 动画那些事
摘要：效果： 思路： 不想分析了，能用就行 <!DOCTYPE html> <html lang="en"> <head> <link rel="shortcout icon" href="#" /> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Comp
阅读全文
摘要：flex布局 1、基本概念：flex-container ，flex-item main axis ，cross axis，main start ，main end ，cross start，cross end 2、flex-direction ：main axis 的方向，row（默认），row-
阅读全文
摘要：正反翻页效果： 把书籍翻页的动画看懂了之后再来看这个动画就很简单了。主要的还是backface-visibility属性，保证书页翻转到背面时可以隐藏前面的页面。 完整的代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title
阅读全文
摘要：多彩的天空动画效果： 代码出处: 代码感觉看懂了，又好像没有看懂。先放在这里，记录一下。以后对css了解得更透彻再来分析。 完整的代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style typ
阅读全文
摘要：流星雨动画效果： 代码出处: https://www.bilibili.com/video/BV1N5411a7hf?t=819 流星雨的动画分为两部分，第一个是明暗交错的背景，第二个是不断下滑的流星。最终在浏览器中看起来有些模糊，但大体上没什么问题，练练手还是不错的。 背景完全是由css控制。星星
阅读全文
摘要：书籍翻页动画一般有两种效果，第一种就是整页翻动，还有一种就是从边缘翻动。 ##实现效果： 设计思路： 准备好书籍框架（dom元素） 准备好第一页和最后一页，这两页为固定页不翻动 准备几张可以翻动的书页，书页包含前翻动前后的两页（左、右），所有书页都使用绝对定位。在准备框架（dom）时前面先写，后页后
阅读全文
