耶梦加德 - 博客园

2018年11月14日

摘要：在项目中，颜色，图片，等等数据都保存在数组中动画使元素从一种样式逐渐变化到另一种样式的 animation: name ; 无顺序要求，但是必须先写持续时间，再写延迟时间原理人眼在看到画面的0.34 秒内，画面不会消失在一幅画面还没消失之前，播放下一张画面关键帧 @keyframe 阅读全文

posted @ 2018-11-14 14:52 耶梦加德阅读(244) 评论(0) 推荐(0) 编辑

CSS3_天猫商品墙

摘要：天猫商品墙网格状布局： 1. ul li 布局 2. float: left; 使得元素在一行。注意：父元素解决高度塌陷 3. ul 设置固定宽，使得元素挤下去 4. 给父元素加一个 padding-left 和 padding-top 使得背景色缝隙充当网格最左边的边线 5. 给 li 阅读全文

posted @ 2018-11-14 11:59 耶梦加德阅读(217) 评论(0) 推荐(0) 编辑

2018年11月13日

CSS3_3D 变换

摘要： 3D 变换 1. 在 2D 父元素中，绕轴旋转，效果需要想象 #ele_3d { width: transform: rotateX(2deg); } rotateX 为正，元素左上角往里跑。。。对象在 x 轴上的旋转角度，正方向向右 rotateY 为正，元素左上角往外跑。。。对象在 x 轴上的旋阅读全文

posted @ 2018-11-13 18:30 耶梦加德阅读(319) 评论(0) 推荐(0) 编辑

CSS3_扇形导航_transitionend 事件

摘要：扇形导航圆形按钮，切换一系列图片导航的显示与隐藏。如果涉及过渡动画，定位的 top 和 left 必须写 Math.sin(弧度) 一圈弧度 = 2π，一圈角度 = 360 弧度 = (deg*2π)/360 = (deg*π)/180 <!DOCTYPE html> <html> <head> 阅读全文

posted @ 2018-11-13 14:49 耶梦加德阅读(367) 评论(0) 推荐(0) 编辑

2018年11月12日

CSS3_过渡_2D 变换_瓶体旋转_动态时钟

摘要： 1. 过渡 transition 允许 CSS 的属性值在一定时间内平滑的过渡，在鼠标点击，鼠标滑过或对属性改变中触发，并圆滑的改变 CSS 的属性值简写属性： #box { width: 300px; height: 200px; background-color: red; transiti 阅读全文

posted @ 2018-11-12 09:42 耶梦加德阅读(252) 评论(0) 推荐(0) 编辑

2018年11月10日

CSS3_多列布局

摘要： CSS3 多列布局可以随屏幕大小自适应布局能够创建多个列对文本进行布局属性 column-count: 5; 将文本分成 5 列注意：用户的屏幕大小 column-fill: balance / auto; 规定如何填充列默认值 balance ，不管 height 设置多少，列始终均等阅读全文

posted @ 2018-11-10 16:35 耶梦加德阅读(119) 评论(0) 推荐(0) 编辑

CSS3_线性渐变_径向渐变----背景

摘要：渐变的本质：绘制一张背景图片，所以使用 background 或者 background-image background 的诸多属性，渐变都是可以使用的（repeat，position）百分比：把元素渐变方向的整体长度看成 100% 线性渐变背景使用：（至少三个参数，从第二个参数开始，都阅读全文

posted @ 2018-11-10 12:00 耶梦加德阅读(396) 评论(0) 推荐(0) 编辑

CSS3_盒子背景

摘要：盒子背景盒子背景：content padding 特殊的 boder 背景背景绘制从 padding 开始绘制背景裁剪 background-clip（默认值 border-box）特殊：在指定文字背景时 -webkit-background-clip: text; 可选值： borde 阅读全文

posted @ 2018-11-10 10:57 耶梦加德阅读(252) 评论(0) 推荐(0) 编辑

CSS3_盒阴影_倒影_盒子大小可调

摘要： 1. 盒阴影会产生一个或者多个阴影使用：（多个阴影，以逗号隔开） /* （不能为负值）（可以负值） */ /* 水平方向偏移量垂直反向偏移量模糊程度扩散程度颜色是否是内阴影; */ box-shadow: 20px 20px 20px 10px yellowgreen; /* 外阴阅读全文

posted @ 2018-11-10 10:10 耶梦加德阅读(911) 评论(0) 推荐(0) 编辑

2018年11月9日

CSS3_文本样式

摘要： 1. 文字阴影 text-shadow 使用： text-shadow: 水平方向偏移量垂直方向偏移量模糊程度颜色; #box { text-shadow: 10px 10px 3px deeppink; // 1个阴影 } 多个阴影加一个逗号写第二个阴影的样式 #box { text-s 阅读全文

posted @ 2018-11-09 16:49 耶梦加德阅读(283) 评论(0) 推荐(0) 编辑

我即狂澜，且力不可挽

公告