CSS3 自定义控件
关注
分享
扫一扫
福州司马懿
大家如果觉得文章有帮助，给我个关注。谢谢大家 (+_+)，失业了球介绍工作
展开
-
CSS3 加载中对话框
```}/** 做一个圆心，辅助观察计算数值是否正确 /.loaderCenter {background-color:white;width:.3rem;height:.3rem;border-radius:.2rem;/* 控制圆心的显示与否 /display: none;}.blob {position: absolute;/* top/left决定了小圆点...原创 2019-09-03 20:43:54 · 1023 阅读 · 0 评论 -
CSS3 粘性定位实现吸顶 position: sticky
粘性定位 是 相对定位（relative）和 固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。著作权归作者所有。它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。注意：起作用的，除了 top...原创 2018-12-29 16:17:45 · 4686 阅读 · 0 评论 -
CSS3&JavaScript 仿视频直播中的点赞效果
<!DOCTYPE html><html><meta charset="utf8"><head><style>#loveContainer原创 2018-12-29 15:08:42 · 4231 阅读 · 0 评论 -
CSS3&JavaScript 仿京东加入购物车特效
<!DOCTYPE html><html><head><meta charset="utf8"><style>body { marg原创 2018-12-19 10:53:22 · 3455 阅读 · 0 评论 -
CSS3 文本修饰（两种方案实现 波浪线）
<!DOCTYPE html><html><head><meta charset="utf8"><style>/*text-tran原创 2018-12-06 15:55:28 · 1953 阅读 · 0 评论 -
CSS3 优惠券
<!DOCTYPE html><html><head><meta charset="utf8">&amp原创 2018-12-05 17:02:33 · 5964 阅读 · 0 评论 -
CSS3&JavaScript 瀑布流
实现方法概述html页面要实现瀑布流，目前有两种方案，它们的适用场景不同CSS3 的 column-count（适用于所有元素一次性加载，页面更新用分页来实现，且元素与位置依赖度不高的传统布局上）CSS2 的 flot 配合 JavaScript 动态测量（适用于所有元素分批加载，滑动到底部自动添加下一批元素的情况）当然，网上还有介绍 CSS3 的 grid 方案，很可惜，目前为止，所...原创 2018-11-28 11:10:50 · 1345 阅读 · 0 评论 -
CSS3&JavaScript 仿微信对话框和时间格式化处理
<!DOCTYPE html><html><meta charset="utf8"><head><style>* { margin: 0; padding: 0;}body { background-color: #EBEBEB;}.chat { padding-left: 1rem; padding-rig...原创 2018-11-21 16:57:00 · 3412 阅读 · 0 评论 -
CSS3&JavaScript 图片分隔切换
&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt;&amp;amp;amp;lt;meta char原创 2018-11-16 17:19:18 · 1188 阅读 · 0 评论 -
CSS3&Javascript marquee 滚动新闻
&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;meta charset=&amp;amp;a原创 2018-10-31 18:14:09 · 2361 阅读 · 0 评论 -
CSS3 Switch
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;&amp;lt;meta charset=&quot;utf8&quot;/&amp;gt;&amp;lt;style&amp;gt;:root { --原创 2018-10-31 10:27:08 · 1142 阅读 · 0 评论 -
CSS3 树形视图
&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt;&amp;amp;lt;meta charset='utf-8'&amp;amp;gt;&amp;amp;lt;style&amp;amp;gt;原创 2018-10-25 19:16:12 · 3408 阅读 · 0 评论 -
CSS3 二级菜单
<!DOCTYPE html><html><head><meta charset="UTF8"><style> body { margin: 0; } nav { font-size: 14px; /* 由于其下的菜单元素都是float的,如果不设置其width和position:relative,当宽度不够时,会变到下原创 2017-02-18 20:21:45 · 1624 阅读 · 0 评论 -
CSS3 自定义Table
<!DOCTYPE HTML><html> <head> <meta charset="utf8"> <style> body { font-family: 'trebuchet MS', 'Lucida sans', Arial; font-size: 18px;原创 2017-02-09 15:05:06 · 2018 阅读 · 0 评论