css
wl_
这个作者很懒,什么都没留下…
展开
-
伸缩盒(flex布局)
一、属性flex 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。flex-grow 扩展比率flex-shrink 收缩比率flex-basis 伸缩基准值flex-flow 排列方式flex-direction 排列方向flex-wrap 该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向align-content 对齐方式align-items原创 2017-06-29 17:34:20 · 963 阅读 · 0 评论 -
boostrap中使用的css选择器
1.元素选择器 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }2.类选择器 .input-block-level { displ原创 2017-07-24 15:52:10 · 388 阅读 · 0 评论 -
css3-360体检旋转特效(一)
本文描述使用css3的渐进属性linear-gradient实现类似360资源检查时的特效一、模拟实现效果参考 二、html代码<div class="container"> <div class="status-circle status-1"> <div class="circle rotary-circle"&g..原创 2018-04-11 11:31:54 · 2298 阅读 · 0 评论 -
CSS实现圆环百分比进度效果
原理:红色背景圆为主题,在其上覆盖左右两个灰色半圆,然后在最上面放上用于显示百分比的黑色圆,通过交替旋转两个灰色半圆露出下面的红色背景,在视觉上实现百分比进度效果。一、效果图 二、代码:https://codepen.io/wlei/pen/RyNPKE...原创 2018-04-19 18:52:20 · 19428 阅读 · 2 评论 -
css3-旋转的立方体
一、实现步骤实现六个面的布局将六个面包含在一个容器中对这个容器运用旋转动画二、核心点:页面 x,y,z 坐标系的构建(以正对屏幕方向参考方向,向左为 + x, 向下为+y, 向外为 +z)rotateX,rotateY,rotateZ角度方向判断,以对应轴正方向为参考,逆时针旋转为正角度顺时针为负角度。注意,旋转时,坐标轴是跟着一起做旋转的。旋转中心默认为元素的中心点,可以通...原创 2018-05-20 15:32:46 · 951 阅读 · 0 评论