西安户县建设厅网站,吾爱源码,知名的咨询行业网站制作,佛山高明网站建设设计CSS开发技巧——行为技巧 使用overflow-scrolling支持弹性滚动 iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)#xff0c;通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动#xff0c;增加页面滚动的流畅度 场景#xff1a;iOS页面滚动 使用t…CSS开发技巧——行为技巧 使用overflow-scrolling支持弹性滚动 iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动增加页面滚动的流畅度 场景iOS页面滚动 使用transform启动GPU硬件加速 有时执行动画可能会导致页面卡顿可在特定元素中使用硬件加速来避免这个问题 场景动画元素(绝对定位、同级中超过6个以上使用动画) 使用attr()抓取data-* 在标签上自定义属性data-*通过attr()获取其内容赋值到content上 场景提示框 div classbruce flex-ct-y data-title使用attr()抓取节点属性a classhover-tips btn-1 hrefhttps://www.baidu.com data-msgHello World提示框/aa classhover-tips btn-2 hrefhttps://www.baidu.com/a
/divstyle
.hover-tips {position: relative;padding: 0 20px;border-radius: 10px;height: 40px;background-color: #66f;line-height: 40px;color: #fff; .hover-tips {margin-top: 10px;}.btn-1 {::after {position: absolute;left: 0;top: 0;border-radius: 5px;width: 100%;height: 100%;background-color: rgba(#000, .5);opacity: 0;text-align: center;font-size: 12px;content: attr(data-msg);transition: all 300ms;}:hover::after {left: calc(100% 20px);opacity: 1;}}.btn-2:empty::after {content: attr(href);}
}
/style使用:valid和:invalid校验表单 使用伪类:valid和:invalid配合pattern校验表单输入的内容 场景表单校验 使用pointer-events禁用事件触发 通过pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)相当于的disabled 场景限时点击按钮(发送验证码倒计时)、事件冒泡禁用(多个元素重叠且自带事件、a标签跳转) div classbruce flex-ct-x data-title使用pointer-events禁用事件触发a classdisabled-trigger hrefhttps://www.baidu.com点我/a
/divstyle
.disabled-trigger {padding: 0 20px;border-radius: 10px;height: 40px;background-color: #66f;pointer-events: none;line-height: 40px;color: #fff;
}
/style使用或~美化选项框 使用或~配合for绑定radio或checkbox的选择行为 场景选项框美化、选中项增加选中样式 div classbruce flex-ct-x data-title使用或~美化选项表单ul classbeauty-selectionliinput idfed-engineer typeradio nameradioName hiddenlabel forfed-engineer/labelspan前端工程师/span/liliinput idbed-engineer typeradio nameradioName hiddenlabel forbed-engineer/labelspan后端工程师/span/liliinput idfsd-engineer typeradio nameradioName hiddenlabel forfsd-engineer/labelspan全栈工程师/span/li/ul
/divstyle
.beauty-selection {display: flex;li {display: flex;align-items: center; li {margin-left: 20px;}}input:checked label {background-color: #f90;}label {margin-right: 5px;padding: 2px;border: 1px solid #f90;border-radius: 100%;width: 18px;height: 18px;background-clip: content-box;cursor: pointer;transition: all 300ms;:hover {border-color: #09f;background-color: #09f;box-shadow: 0 0 7px #09f;}}span {font-size: 16px;}
}
/style使用:focus-within分发冒泡响应 表单控件触发focus和blur事件后往父元素进行冒泡在父元素上通过:focus-within捕获该冒泡事件来设置样式 场景登录注册弹框、表单校验、离屏导航、导航切换 div classbruce flex-ct-x data-title使用:focus-within分发冒泡响应form classbubble-distributionh3注册/h3div classaccoutinput typetext placeholder请输入手机或邮箱 pattern^1[3456789]\d{9}$|^[\w-](\.[\w-])*[\w-](\.[\w-])$ requiredimg srchttps://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png/divdiv classpasswordinput typepassword placeholder请输入密码(6到20位字符) pattern^[\dA-Za-z_]{6,20}$ requiredimg srchttps://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png/divdiv classcodeinput typetext placeholder请输入邀请码(6位数字) pattern^[\d]{6}$ maxLength6 requiredbutton typebutton查询/buttonimg srchttps://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png/divimg srchttps://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.pngulliinput idmale typeradio namesexlabel formaleBoy/label/liliinput idfemale typeradio namesexlabel forfemaleGirl/label/li/ulbutton typebutton注册/button/form
/divstyle
.bruce {background-color: #999;
}
.bubble-distribution {position: relative;margin-top: 50px;padding: 25px;border-radius: 2px;width: 320px;background-color: #fff;h3 {font-size: 16px;color: #333;}div {margin-top: 10px;}img {position: absolute;left: 50%;bottom: 100%;margin: 0 0 -20px -60px;width: 120px;}ul {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;height: 30px;line-height: 30px;}li {position: relative;width: 45%;transition: all 300ms;:focus-within {background: linear-gradient(90deg, #09f 50%, transparent 0) repeat-x,linear-gradient(90deg, #09f 50%, transparent 0) repeat-x,linear-gradient(0deg, #09f 50%, transparent 0) repeat-y,linear-gradient(0deg, #09f 50%, transparent 0) repeat-y;background-position: 0 0, 0 100%, 0 0, 100% 0;background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;animation: move 500ms infinite linear;}}input[typetext],input[typepassword] {padding: 10px;border: 1px solid #e9e9e9;border-radius: 2px;width: 100%;height: 40px;outline: none;transition: all 300ms;:focus:valid {border-color: #09f;}:focus:invalid {border-color: #f66;}}input[typeradio] {position: absolute;width: 0;height: 0;:checked label {border: 3px solid transparent;background-color: #09f;color: #fff;}}label {display: block;border-bottom: 1px solid #ccc;width: 100%;background-clip: padding-box;cursor: pointer;text-align: center;transition: all 300ms;}button {margin-top: 10px;border: none;border-radius: 2px;width: 100%;height: 40px;outline: none;background-color: #09f;cursor: pointer;color: #fff;transition: all 300ms;}.accout,.password,.code {img {display: none;margin-bottom: -27px;}:focus-within {img {display: block;} ~ img {display: none;}}}.code {display: flex;justify-content: space-between;button {margin-top: 0;}input {:not(:placeholder-shown) {width: 70%; button {width: 25%;}}:placeholder-shown {width: 100%; button {width: 0;opacity: 0;}}}}
}
keyframes move {to {background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;}
}
/style使用:hover描绘鼠标跟随 将整个页面等比划分成小的单元格每个单元格监听:hover通过:hover触发单元格的样式变化来描绘鼠标运动轨迹 场景鼠标跟随轨迹、水波纹、怪圈 .bruce(data-title使用:hover描绘鼠标跟随)ul.mouse-following- for (var i 0; i 500; i)listyle
function random-num($max, $min: 0, $u: 1) {return ($min random($max)) * $u;
}
.mouse-following {display: flex;overflow: hidden;flex-wrap: wrap;height: 100%;cursor: pointer;li {position: relative;width: 30px;height: 30px;::before {position: absolute;left: 0;right: 0;top: 0;bottom: 0;border-radius: 100%;background-color: transparent;content: ;transform: scale3d(.1, .1, 1);transition: all 500ms ease-in;}:hover {::before {transform: scale3d(1.8, 1.8, 1.8);transition: transform 0s;}}for $i from 1 through 500 {:nth-child(#{$i}):hover {::before {background-color: rgba(random-num(255), random-num(255), random-num(255), .8);}}}}
}
/style 使用max-height切换自动高度 通过max-height定义收起的最小高度和展开的最大高度设置两者间的过渡切换 场景隐藏式子导航栏、悬浮式折叠面板 div classbruce flex-ct-x data-title使用max-height切换自动高度ul classauto-heightlih3列表1/h3p内容1br内容2br内容3br内容4/p/lilih3列表2/h3p内容1br内容2br内容3br内容4/p/lilih3列表3/h3p内容1br内容2br内容3br内容4/p/li/ul
/divstyle
.auto-height {width: 300px;li {cursor: pointer; li {margin-top: 5px;}:hover p {border-bottom-width: 1px;max-height: 600px;}}h3 {padding: 0 20px;height: 40px;background-color: #f66;cursor: pointer;line-height: 40px;font-size: 16px;color: #fff;}p {overflow: hidden;padding: 0 20px;border: 1px solid #f66;border-top: none;border-bottom-width: 0;max-height: 0;line-height: 30px;transition: all 500ms;}
}
/style使用transform模拟视差滚动 通过background-attachment:fixed或transform让多层背景以不同的速度移动形成立体的运动效果 场景页面滚动、视差滚动文字阴影、视差滚动文字虚影 div classbruce data-title使用transform模拟视差滚动ul classparallax-scrollinglitranslateZ(-1px)/lilitranslateZ(-2px)/lilitranslateZ(-3px)/li/ulp内容/pul classparallax-scrollinglitranslateZ(-1px)/lilitranslateZ(-2px)/lilitranslateZ(-3px)/li/ul
/divstyle
$bg: https://static.yangzw.vip/codepen/lake.jpg;
.bruce {overflow-x: hidden;overflow-y: auto;perspective: 1px;transform-style: preserve-3d;p {height: 300px;line-height: 300px;text-align: center;font-size: 20px;color: #f66;}
}
.parallax-scrolling {display: flex;justify-content: center;align-items: center;height: 1000px;background: url($bg) no-repeat center fixed;li {width: 500px;text-align: center;font-weight: bold;font-size: 60px;:nth-child(1) {color: #f66;transform: translateZ(-1px);}:nth-child(2) {color: #09f;transform: translateZ(-2px);}:nth-child(3) {color: #3c9;transform: translateZ(-3px);}}
}
/style使用animation-delay保留动画起始帧 通过transform-delay或animation-delay设置负值时延保留动画起始帧让动画进入页面不用等待即可运行 场景开场动画 div classbruce flex-ct-x data-title使用animation-delay保留动画首帧ul classinitial-keyframeli/lili/lili/li/ul
/divstyle
.initial-keyframe {position: relative;width: 100px;height: 100px;li {position: absolute;border-radius: 100%;width: 100%;height: 100%;background-color: #3c9;transform: rotate(0) translate(-80px, 0);animation: rotate 3s linear infinite;:nth-child(2) {animation-delay: -1s;}:nth-child(3) {animation-delay: -2s;}}
}
keyframes rotate {to {transform: rotate(1turn) translate(-80px, 0);}
}
/style使用resize拉伸分栏 通过resize设置横向自由拉伸来调整目标元素的宽度 场景富文本编辑器、分栏阅读 div classbruce flex-ct-x data-title使用resize拉伸多列分栏div classstretching-columndiv classleftdiv classresize-bar/divdiv classresize-line/divdiv classresize-textABCDEFGHIJKLMNOPQRSTUVWXYZ/div/divdiv classrightABCDEFGHIJKLMNOPQRSTUVWXYZ/div/div
/divstyle
.stretching-column {overflow: hidden;border: 1px solid #09f;width: 600px;height: 300px;line-height: 20px;font-size: 16px;color: #f90;.left {overflow: hidden;float: left;position: relative;height: 100%;}.right {overflow: hidden;padding: 10px;height: 100%;background-color: #f0f0f0;word-break: break-all;}.resize-bar {overflow: scroll;width: 200px;height: 100%;opacity: 0;resize: horizontal;::-webkit-scrollbar {width: 200px;height: 100%;}:hover,:active { ~ .resize-line {border-left: 1px dashed #09f;}}}.resize-line {position: absolute;right: 0;top: 0;bottom: 0;border-left: 1px solid #ccc;border-right: 2px solid #f0f0f0;pointer-events: none;}.resize-text {overflow-x: hidden;position: absolute;left: 0;right: 5px;top: 0;bottom: 0;padding: 10px;word-break: break-all;}
}
/style
