yun_shuo的博客

flex弹性布局常用属性详解CSS3弹性布局，可以轻松的排控制元素的排列、对齐和顺序的控制。上篇利用css弹性布局中的justify-content和align-self属性很便捷的完成了骰子点数的布局。在flex弹性布局中还有很多常用的属性，下面来依次看看吧~声明弹性盒子定义为弹性盒子（容器）display: flex;定义为内联级弹性盒子display:inline-flex;在不定义弹性容器宽度时，在弹性容器受到缩小时，容器里的元素也会缩小。内联级盒子与弹性盒子不同在容器大小会根据容器内容（

详解flex布局做骰子案例上次案例用到了css3的3D特效，3D特效做正方体也是很常用的，所有我想到了利用css3做一个骰子，而骰子每一面的点数利用定位做起来很麻烦，利用css3的flex布局是很方便的，这次来看看如何利用flex弹性盒子的一些属性完成骰子点数的布局~首先，建立一个3D空间元素，做成正方体，是上一篇中详细介绍过如何创建一个3D空间元素，这里就不细说了~实现一个正方体的原理是，在一个父元素中包含六个子元素，transform:rotate和translate来转变好每一个的面，在编写过程中

CSS3简单特效–transform实现翻书效果上一篇介绍了animation如何实现流光按钮效果，现给大家介绍一下如何利用css3的transform属性实现鼠标停留实现翻书的效果，下图是鼠标停在div上，“书页”翻动后的效果。可以看出这有一种3D的效果，css3中让元素变成3D空间元素，通常来说分为以下三步：1、父级中加入视距：perspective:800px;2、在需要显示3D效果的元素加上一个3D层：transform-style:preserve-3d;3、设置观看视角：perspe

CSS3简单特效–animation实现流光按钮在学习css3的过程中，发现很多看着炫酷的效果，利用css3的属性能很简单的实现，animation是css3动画效果中常见的属性。下面让我们了解一下如何利用这个属性做出以下鼠标停在按钮上有流光按钮效果~在此之前简单介绍一下animation属性的用法。animation：[ animation-name(检索或设置对象所应用的动画名称) ] || [ animation-duration(检索或设置对象动画的持续时间) ] || [ animatio

示例详解CSS3属性选择器CSS3中使用了很多的属性选择器，通过这些属性选择器，对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。可以根据我们自己的设计来定义元素的样式，制作精美的网页。下面让我们看看有哪些属性选择器~以下用E代表要选择的标签（可以为标签名、类名、id名等）；用attr代表属性名；val代表属性值。E[attr~=“val”]选中条件：1、标签内有这个属性，属性值只有"val"。2、标签内有这个属性，属

CSS中浮动塌陷的解决办法及分析下面，首先通过一个小案例来了解浮动元素对父级元素带来的影响（浮动塌陷）。 <div class="div1"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> /*css代码*/ .div1{

CSS实现三角形原理及过程在开发中，遇到很多的列表都需要用到三角形的箭头，可以直接用一个图片作背景铺垫，但这样占用一定的内存，对于这种简单的图形纯CSS也能实现，它占用的内存相对图片较小,所以相比而言，比图片更好用。下面是具体实现步骤~1、首先，创建一个div。给它设置一个宽高和背景颜色，并给它一个较大的边框,将每一边的边框设置不同的颜色。/*html代码*/<div class="div1"></div>/*css代码*/.div1{ widt