
CSS
文章平均质量分 60
吃鱼吐泡泡
有问题可以私聊我,看见会回复
展开
-
css 实现满屏升空的气球动画
css 实现满屏升空的气球动画实现步骤step1 定义气球的样式,并在气球上添加白色椭圆形。step2 定义气球棒和气球口。step3 设置气球动画:实现气球从下到上匀速移动就可以升空了。step4 设置气球颜色、大小、位置变量。step5 生成多个气球盒子,将变量传入。原创 2023-12-22 17:56:12 · 1588 阅读 · 0 评论 -
常见经典动效实现总结(老虎机、打字机、纸牌翻转等等)
常见动效老虎机、打字机、纸牌翻转等等效果实现1、老虎机 2、打字机 3、纸牌翻转 4、水波纹原创 2023-04-08 14:37:00 · 4007 阅读 · 1 评论 -
requestAnimationFrame 请求动画帧
requestAnimationFrame动画请求帧-----它是一个浏览器的宏任务。 requestAnimationFrame的用法与setTimeout、setInterval很相似,只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。它返回一个整数,表示定时器的编号,这个值可以传递给cancelAnimationFrame用于取消这个函数的执行原创 2023-04-02 22:55:45 · 3681 阅读 · 0 评论 -
css变量用法(原生js、小程序)
微信小程序-css变量用法: var()定义变量原创 2022-12-15 11:43:26 · 6955 阅读 · 3 评论 -
css 实现三角形
一.实心三角形 .filled-triangle1 { width: 100px; height: 100px; border: 1px solid #FF0000; } .filled-triangle2 { border-top: 50px solid #FF0000; border-right: 50px solid #23ab3f; border-bottom: 50px solid #D6D6D6; bord原创 2021-08-12 17:37:47 · 183 阅读 · 0 评论 -
vue css作用域---深度选择器
前置条件:使用 scoped 后,父组件的样式将不会渗透到子组件中。如果希望scoped样式中的选择器“深”,即影响子组件,您可以使用>>>组合器(可用于項目中的css原生样式):<style scoped>.a >>> .b { /* ... */ }</style>某些预处理器,例如 Sass,可能无法>>>正确解析。在这些情况下,您可以改用/deep/or::v-deep组合器 - 两者都是别名>&g原创 2021-08-06 13:52:29 · 327 阅读 · 0 评论 -
CSS设置边框的四个角的样式
效果图:html:<div class="other-people"> <div class="image-border image-border1"></div> <div class="image-border image-border2"></div> <原创 2018-11-08 16:35:54 · 18080 阅读 · 1 评论 -
垂直水平居中的四种方式
方案1:position 元素已知宽度 父元素设置为:position: relative; 子元素设置为:position: absolute; 距上50%,据左50%,然后减去元素自身宽度的距离就可以实现 效果图:代码:div class="box"> <div class="content"> </div></di...原创 2018-10-30 18:37:08 · 1908 阅读 · 0 评论 -
web前端面试-------CSS实现水平居中的六种方法
效果图:html:<div class="parent"> <div class="child"></div></div>1.通过margin: 0 auto; text-align: center实现CSS水平居中。.parent{ width: 600px; height: 200px; background: ...原创 2018-09-14 11:20:16 · 2123 阅读 · 0 评论 -
web前端面试-------input与textarea的区别以及用div模拟textarea
1.input与textarea的区别<input>是单行文本框,不会换行。通过size属性指定显示字符的长度,注意:当使用css限定了宽高,那么size属性就不再起作用。 value属性指定初始值,Maxlength属性指定文本框可以输入的最长长度。可以通过width和height设置宽高,但是也不会 增加行数。<...原创 2018-09-13 19:08:36 · 9924 阅读 · 0 评论 -
web前端面试-------css实现左侧固定宽度,右侧宽度自适应的五种方式
1.浮动布局 左侧设置固定宽并且左浮动,右侧加个margin-left;.box1{ background: red; width: 200px; float: left;}.box2{ background: darkcyan; margin-left: 200px;}2.calc()计算属性设置固定宽并且左浮动,右侧宽度为calc(100% - 宽...原创 2018-09-13 17:40:48 · 6049 阅读 · 0 评论 -
纯CSS实现点击图片触发select下拉框使之展开
如下图,下拉框最右边的箭头是一个图片,代码为: <span class="rightRegion">客户<font color="#EA609D">*</font></span> <select name="advertiserId" required class="ipt"&a原创 2018-07-30 15:38:47 · 9284 阅读 · 5 评论 -
jquery+css制作tab页面
本文介绍除了table之外的方法,用jQuery和css完成,主要z-index设置层级。 完成效果图:将上方的三个文字块绝对定位,定义好宽度width和高度height,用margin-left摆放好三个div块的位置,然后将最下方的div用margin-top向下移动height-1像素即可,刚好遮挡住上方div的border-bottom,给下方div设置高层级,确保能遮挡住上...原创 2018-07-20 11:13:31 · 305 阅读 · 0 评论 -
css设置datatable表格奇偶数行或者奇偶数列背景色不同
奇偶数行背景色不同:/*设置表格奇偶数行背景色不同*/.table-responsive table tbody tr:nth-child(even){ background: rgba(250,250,255,1)}.table-responsive table tbody tr:nth-child(odd){ background:rgba(255,255,255,...原创 2018-07-19 10:17:04 · 8318 阅读 · 0 评论