CSS3
关注
分享
扫一扫
文章平均质量分 56
很小白的小白
励志成为前端架构师。
展开
-
CSS3 animation，好玩的动画
animation：demoMove A B C D E （keyframe 名 执行时间 速率函数 延迟时间 运动方式 运动次数 ）@keyframes demoMove{ 0%{ background-color:red;}10%{ background-color:green;}20%{ background-color:white;}...原创 2018-08-06 16:34:06 · 571 阅读 · 0 评论 -
CSS3之媒体查询（响应式布局）
为啥有媒体查询：移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。 Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满）什么是媒体查询：...原创 2018-09-02 12:58:25 · 30386 阅读 · 0 评论 -
CSS3性能优化
这篇文章主要讲的是怎样制作流畅动画，特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点；接着会着重介绍用css3制作动画的注意事项。1、用canvas、css3、jquery制作动画Canvas优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存为 .png 或者 .jpg的图形；缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动...转载 2018-08-13 23:33:06 · 921 阅读 · 0 评论 -
transition 过渡动画
transition：过渡动画transition 属性是css3的一个复合属性，主要包括一下几个子属性 transition-property:指定过渡或动态模拟的css属性transition-duration:指定过渡所需要的时间transition-timing-function:指定过渡函数transition-delay:指定开始出现的延迟时间例 transi...翻译 2018-08-03 15:20:05 · 349 阅读 · 0 评论 -
CSS3变形属性 transform
形状变换属性：transform ： 可以实现元素的形状、角度、位置等的变化。值： rotate(); 以x/y/z为轴进行旋转，默认为z rotatex(), rotatey(), rotatez(), rotate3d(x, y, z, angle)rotate3d(x, y, z, angle)（为三个方向的矢量和方向）例 transform: rotatex(45de...翻译 2018-08-03 14:41:40 · 704 阅读 · 0 评论 -
CSS3之优雅弹性布局
盒模型在 CSS 中盒模型被分为两种，第一种是w3c的标准盒模型，另一种是IE6混杂模式的传统模型。他们都是对元素计算尺寸的模型。但他们的不同是计算的方式不同。1.W3C标准盒模型 element空间高度（盒子） = width + padding + border; width 为内容高度。即width不包括padding 和 border2.IE6混杂模式盒模型 内容高度（盒子）=...原创 2018-08-08 01:38:38 · 240 阅读 · 0 评论 -
CSS3选择器和小demo无JS选项卡
属性选择器：（功能大于特性）例子：^（以什么开头） $（以什么结尾） *（一个或多个）li[class ^='demo']{} ---> 选中li中以demo开头的clas类名li[class $='demo']{} ---> 选中li中以demo结尾的clas类名li[class *='aa']{} ---> 选中li中以aa（一个或多个）...原创 2018-08-02 21:20:41 · 246 阅读 · 0 评论 -
CSS3小demo之阴影
做一个导航栏：<style> * { padding: 0; margin: 0; list-style: none; } .wrapper { margin: 100px; } .wrapper .ul-box ul{ display: inline-bl...原创 2018-08-02 16:59:24 · 440 阅读 · 0 评论 -
box-shadow好玩炫酷的阴影效果
话不多说，先上代码！根据内阴影和外阴影，最终组合成。根据阴影层级的关系。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w原创 2019-01-27 15:33:28 · 1318 阅读 · 1 评论