前端设计技巧
安和同学
这个作者很懒,什么都没留下…
展开
-
css借助伪元素实现水波效果
不BB,上代码,拉走看<!DOCTYPE HTML><html><head><meta charset="utf-8"><style>.btn { margin: 100px auto; width: 100px; height: 50px; position: relative; ...原创 2019-07-11 18:51:22 · 202 阅读 · 0 评论 -
实现最外层盒子高度100%
很多人都知道width属性可以继承100%,不设置绝对宽度就可以占满整个浏览器;但是height设置100%无法占满整个浏览器高度;原因:最外层的盒子需要继承父级元素的width和height, 它的父级为html和body,并不是其中一个, html和body的width为100%,但是height默认为auto, ...原创 2019-02-20 00:10:17 · 1830 阅读 · 0 评论 -
css伪元素实现关闭和选项按钮
原理很简单;关闭按钮:通过盒子的伪元素(::before和::after)实现关闭那俩叉;选项按钮:同上,不同的是要借用一个i标签;直接写好demo拉走,很短,包含两个按钮样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <ti原创 2019-02-19 23:44:38 · 1724 阅读 · 0 评论 -
js实现滚动条自动滚动(scrollTop)
效果类似于直播网站的评论,会一条接着一条向上 go out ; js部分很简单:通过控制scrollTop的值来实现自动滚动效果; 很重要两点: 1、scrollTop的值不可以加单位,谨记! 2、网页缩放比例会影响效果实现(下面具体...原创 2019-02-19 23:08:28 · 71143 阅读 · 12 评论 -
css滚动条-webkit-scrollbar
介绍之前,先穿插一个小知识点,大神略过;经常看见 在css属性前加上-webkit之类的代码,也就是兼容不同浏览器的代码;-webkit 兼容chrome(谷歌)、safari(MacOS端浏览器);-moz 兼容firefox(火狐);-ms 兼容ie;为什么讲这个,因为:修改滚动条样式只有谷歌支持;所以:以下css属性直接根据需求带走;::-webkit-scr...原创 2019-02-19 22:00:23 · 2815 阅读 · 0 评论 -
纯CSS3带遮罩的弹出层插件
dome直接拉走看重点几个CSS3属性注释标的很清熟练运用这几个属性可以做各种层次界面<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"></head><style>*{ padding: 0;原创 2019-01-25 16:05:12 · 745 阅读 · 0 评论 -
线性渐变实现蒙版遮罩
线性渐变、背景尺寸、定位、混合模式综合实现蒙版遮罩实现CSS3主要属性:background: linear-gradient( dir, color1, color2,...); //先定义一个线型渐变background-size: 400% 400%; // 把线型渐变扩大,默认可视盒子的颜色就是线性渐变其中的一部分颜色transition: .5s all; //增加过渡效果...原创 2019-01-25 15:35:12 · 1469 阅读 · 0 评论 -
CSS3滤镜系统(filter)
拉走代码看效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <style> *{ padding: 0; margin: 0; } body{ width原创 2019-01-25 15:29:02 · 256 阅读 · 0 评论 -
纯CSS实现3D立方体
废话不多说,上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2019-01-25 15:23:10 · 214 阅读 · 0 评论 -
原生JS实现tab,简单原理dome
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; *{原创 2018-09-23 15:50:01 · 539 阅读 · 0 评论 -
最简单的拖拽效果
咱也不多BB,上代码,拉走看<!DOCTYPE html><html lang="en"><head> <style> .box1, .box2 { width: 300px; height: 400px; border: 2px solid #...原创 2019-07-11 18:54:38 · 151 阅读 · 0 评论