https://jsfiddle.net/17khba/2…
分类:未分类
CSS效果篇--CSS3实现5种预载动画效果
实现如图所示的动画效果: 预载动画一:双旋圈 在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。实现如图所示:html代码: <body style="background:…
3D转换立方体搭建
查看 webpack 官网文档,一直觉得官网中间的这个旋转的立方体非常契合webpack这款打包工具的理念。由一个大的立方体包围一个小立方体,转向却相反。经过这样的转换后一推凌乱的文件就被打包成整齐的资源。 动画非常棒,…
css之多行文本输出
css之多行文本输出 需求 本小白拿着设计师给的带标注的设计稿,看到简介标注为只能显示3行文本,多于3行显示3行,本准备采取字符串截取蒙混过关(不能原谅的事情是对自己没有要求,简直没有下限),后查看了网上的解决方案,特此…
css3 的animationend 会执行多次
-webkit-keyframes banner-slide-70 { 0%{ opacity:0;-webkit-transform:translateY(70px) } 100%{ opacity:1; }} @-m…
box-shadow实现不同角度的投影
先看看看box-shadow的参数说明: h-shadow 水平阴影的位置。允许负值。 v-shadow 垂直阴影的位置。允许负值。 blur 模糊距离 spread 阴影的尺寸 为了实现不同角度的投影,需要借助四个参数…
css 3 3d box
使用CSS3的属性制作一个3d的盒子 <p data-height=”265″ data-theme-id=”0″ data-slug-hash=”kkj…
使用grid来进行常见布局
grid 布局是W3C提出的一个二维布局系统,通过 display: grid 来设置使用,对于以前一些复杂的布局能够得到更简单的解决。本篇文章通过几个布局来对对 grid 布局进行一个简单的了解。目前,grid 仅仅只…
css3 border怎么就可以画图了
一直没有在意border,众所周知border就是边框,大概就是定义一个宽度,样式,颜色。就可以了,最大的作用可能就是美观了。最近发现,其实还有一个重要的作用–画图.在谈及这个功能之前,必须要先明确borde…
CSS3总结系列1
过渡 通过改变CSS属性,它提供了一种控制动画速度的方式.属性改变没有立刻结束,而是需要一定的时间.你可以直接列出哪些属性需要进行动画过渡,可以设置when–delay,how long-duration,h…
CSS3总结系列0
媒体查询 媒体查询包括一种媒体类型(以及通过使用宽高,颜色等媒体特征来限制样式表作用域的表达式).作为新增在CSS3中的特性,可以使得内容个性定制化呈现在不同特定输出设备上面,而不必改变内容本身. 语法 一行代码胜千言:…
[译] box-shadow 属性
原文地址:https://bitsofco.de/the-box-shadow-property PS:非直译。有翻译不当的地方,请指出。 CSS3 引入的 box-shadow 属性用来创建阴影效果。阴影效果给我们的二…