css
文章平均质量分 68
啥时候能干全栈
一个想要成为全栈工程师的默默奋斗小憨憨
展开
-
移动端/PC端适配实践
第一种方案amfe-flexible/lib-flexible和postcss-pxtorem,是阿里手淘系开源的一个库,用于设置font-size,同时处理一些窗口缩放的问题。我们使用的vant-ui,他的viewport适配方案,是按照设计稿375px去做的。所以第二种postcss-px-to-viewport更适合使用,postcss-px-to-viewport将px转换成视口单位vw。使用amfe-flexible/lib-flexible和postcss-pxtorem。原创 2023-08-14 14:51:26 · 1047 阅读 · 0 评论 -
animation实现一个搜索扩散动效
上gif简单分析一下1.旋转的线,我们设置他的旋转位置从他的左下开始转动就ok了,再把最中的的圆层级设置高一点,就可以遮挡住线的一部分,看起来就是旋转的线在绕着中心的圆旋转。2.闪现的点,控制百分比来实现展示顺序,比如我设置的3s要执行完一次闪烁。上代码html结构如下<div class="no-warning" v-show="true"> //这是最外层圆形扩散 <div class="ou原创 2021-09-16 18:24:22 · 280 阅读 · 0 评论 -
原生js+css3实现点击图片正方体旋转展现图片
--------------武汉加油!!中国加油!!陕西也给我加油!!2020-02-16------------点击图片,正方体中图片对应的面会旋转过来。上图:上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="...原创 2020-02-16 18:34:25 · 1148 阅读 · 1 评论 -
css3实现转轴展开照片列表
*{ margin: 0; padding: 0;}ul{ list-style: none;}.wrap{ width: 100vw; height: 100vh; background-color:black; display: flex; /* x轴居中 */ justify-content: center; ...原创 2020-02-04 18:04:10 · 272 阅读 · 0 评论 -
CSS3系统学习
2020-01-21----------------------study--------------------------------------------------------------------------------1.bief introductio of css3两个学习时的查询网站reference manual website:http://css.doyoe.c...原创 2020-01-21 23:27:35 · 223 阅读 · 0 评论 -
多列布局
①多列布局column-count 将创建指定数量的列:.container { column-count: 3;}column-width将改变每一列的宽度.container { column-width: 200px;}使用 column-gap 改变列间间隙。用 column-rule 在列间加入一条分割线。column-width: 200px; col...原创 2019-11-19 17:46:00 · 102 阅读 · 0 评论 -
css/html/js
Html①Doctype作用?标准模式与兼容模式各有什么区别?(1)、声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。(2)、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容②HTML5 为什么只需要写 ?HTML5 不基于 SG...原创 2019-11-17 21:51:19 · 119 阅读 · 0 评论 -
css flex布局
一、默认情况下,元素的布局盒模型;外边距叠加:相邻两个元素都设置了margin并且两个margin有重叠,更大的设置会被保留,小的消失二、弹性盒子首先,我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 display 设置一个特定值。section { display:flex}当元素表现为 flex 框时,它们沿着两个轴来布局:主轴...原创 2019-11-15 20:42:57 · 340 阅读 · 0 评论