在群里无意看到了盆友想要布局一个图文环绕的布局，问有没有什么办法实现，上网查了下，都感觉忽悠人的。 js 方面学的不怎么好，但是页面这块是不服输的。 于是就进行了研究，需求如下： 起先看到这张需求我是有点无奈的，想到了各种css3的方法 旋转、转换 、定位等等等等最后做成了这样: 最后做成了这样，明 ...
分类：
Web程序 时间：
2019-05-20 13:43:21
阅读次数：
439
预览图： 实现原理：将图片切割构建一个和ul（电脑屏幕）同一个轴的立方体，利用延时旋转实现切割效果 知识点：transform-style属性（必须搭配transform属性使用） 节流阀，transitionend 空间布局： 将一张图片分成五份li，每份li放4个span折叠成正方体 轴：轴是整 ...
分类：
其他好文 时间：
2019-05-19 11:50:57
阅读次数：
129
一、CSS3弹性盒子 弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分 ...
分类：
Web程序 时间：
2019-05-13 19:05:55
阅读次数：
138
要点： 1 页面旋转使用css3的rorateY(180deg) 实现页面的翻转 2 使用backface-visibility 实现正面元素翻转之后背面不可见，显示出反面的元素 demo： html <div> <div class="oppsite">反面的内容</div> <div class ...
分类：
Web程序 时间：
2019-05-08 20:25:14
阅读次数：
1158
3.css3的特效 1.2D转换 属性是transform 属性值 translate() rotate() scale() skew() Translate 平移 语法 translate(x,y) Rotate 旋转 语法 transform:rotate() Scale 缩放 语法 trans ...
分类：
Web程序 时间：
2019-05-07 19:43:34
阅读次数：
3301
封装Animte 动画函数 虽然可能以后的开发中可能根本不需要自己写，Jquery 给我们封装好了，或者用CSS3的一些属性达到这样的效果可能更简单。 我比较喜欢底层的算法实现，万变不离其中，这个逻辑思路，也是需要锻炼的。也跟着做了一遍 ...
分类：
编程语言 时间：
2019-05-03 11:41:29
阅读次数：
116
以前常用的页面布局是浮动和定位；后来css3的flex布局解决了浮动的一些主要缺点(无法撑起父元素，需要清除浮动) 任何一个容器都可以指定为 Flex 布局。 flex 主要属性表现： (1). 指定为flex display:flex; (2). 指定 方向 flex-direction: row ...
分类：
其他好文 时间：
2019-04-17 15:08:03
阅读次数：
131
CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的，关于animation属性可以参阅CSS3的animation属性用法详解一章节。 一.基本知识: keyframes翻译成中文，是"关键帧"的意思，如果用过flash应该对这个比较好理解，当然不会flash也没有 ...
分类：
数据库 时间：
2019-04-13 11:00:42
阅读次数：
167
1、css3过渡 注意：记住多属性设置的方式；若把过渡写在了hover里面的话鼠标移走时不会有过渡效果！；不同属性同时变时用 all 就可以实现了。 2、css3 transform属性 1、移动 translate 2、旋转 rotate 不同旋转点旋转案例 3、css3--3D变形 rotate ...
分类：
Web程序 时间：
2019-04-12 01:03:35
阅读次数：
212
课程地址：http://www.imooc.com/learn/33 第1章 初识CSS3 CSS3课程列出第一站，先带领大家进入CSS3的世界，探索CSS3的魅力！你做好准备了吗？ 第2章 边框 本课程主要解说border-color 、border-image 、border-radius 及b ...
分类：
Web程序 时间：
2019-04-05 09:29:57
阅读次数：
218
