css
关注
分享
扫一扫
css3 笔记，案例，等
twinkle||cll
More interest，less interests (多一些兴趣爱好的向往，少一些功名利禄的追求)
展开
-
项目重置样式 reset.scss
项目重置样式 reset.scss简单的效果代码如下：html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u,原创 2021-01-04 11:13:50 · 2345 阅读 · 0 评论 -
css 实现 title的效果，并且自己写修改类似title样式
效果如下：代码如下：/**使用data-tip来实现title的效果 */// 通过属性选择器获取到标签，加上相对定位[data-tip] { position: relative; display: inline-block;}// 统一设置伪类的样式[data-tip]::before,[data-tip]::after { position: absolute; visibility: visible; opacity: 0; z-index: 2020原创 2020-06-18 11:45:04 · 6800 阅读 · 2 评论 -
css 修改默认滚动条的样式 小工具
/**修改滚动条的默认样式 *//*滚动条 start*/::-webkit-scrollbar { width: 10px; height: 4px; background-color: #F5F5F5;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background: #fff ;}/*定义滑块 内阴影+圆角*/:原创 2020-06-18 11:50:43 · 201 阅读 · 0 评论 -
你不知道的css3 transition animation transform
transition： 过渡，状态改变的时候触发,前提是css属性支持动画 transition-property：监听动画的属性 默认 all， 有all, 或者是css的属性,width，height等 transition-duration: 动画时长， 1s 单位是s transition-timing-function: 运动的曲线(默认 ease)， 有linear（线性平滑）, ease(平滑过渡), ease-in（由慢到快） ease-out(由快到慢 ...原创 2020-05-10 21:54:29 · 261 阅读 · 0 评论 -
css 实现旋转照片墙自动旋转
<style> * { margin: 0; padding: 0; } :root, html, body { height: 100%; width: 100%; } body { perspective: 3000px; transform-style: preserve-3d; } @keyframes img..原创 2020-05-10 18:05:05 · 2203 阅读 · 1 评论 -
css3 实现打字效果 小工具
<style> * { margin: 0; padding: 0; } @keyframes cursors { 0% { border-left-color: rgba(0, 0, 0, 0); } 50% { border-...原创 2020-05-08 17:24:11 · 427 阅读 · 0 评论 -
css3实现正方体 纯css
<!-- 样式 --><style> * { margin: 0; padding: 0; } :root, html, body { width: 100%; height: 100%; background-color: bisque; ...原创 2020-05-08 17:17:35 · 456 阅读 · 0 评论 -
css3 transition 实现炫酷钢琴键 炫酷
<style> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper { width: 100vw; height: 100vh; background: #000; ...原创 2020-05-07 17:47:54 · 520 阅读 · 0 评论 -
css, css3, flex实现圣杯布局
<style> .wrapper { width: 500px; height: 540px; margin: 50px auto; border: 1px solid #dedede; resize: both; overflow: hidden; } .w...原创 2020-05-05 18:05:25 · 435 阅读 · 0 评论 -
flex实现流式布局， css3
<style> .wrapper { width: 400px; height: 340px; margin: 50px auto; border: 1px solid #dedede; resize: both; overflow: hidden; }...原创 2020-05-05 17:34:20 · 2116 阅读 · 0 评论 -
你不知道的flex布局 css3 flex 基础
ie6混杂模式的盒模型: css2 的boxwidth = width = border * 2 + padding *2 ie6 的boxWidth = width; contentWidth = width - border *2 - padding * 2 使用ie6混杂模型(怪异模型) box-sizing: border-box ie6的解决问题...原创 2020-05-05 16:55:28 · 270 阅读 · 0 评论 -
css3 使用cloumns实现小说翻页功能
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>小说翻...原创 2020-05-04 14:27:19 · 1015 阅读 · 0 评论 -
css3 制作镂空的文字效果
.lou-kong { width: 500px; height: 200px; margin: 100px auto; font-size: 100px; background-color: #000; line-height: 200px; ...原创 2020-05-03 20:54:02 · 1052 阅读 · 0 评论 -
你不知道的border-style border-radius background
border-style 一个小技巧如果设置border-style 里面没有设置颜色， 直接使用color： 边框的颜色会改变成对应的颜色原因：css1-css2 会传承color的颜色， css3 用了中转变量currentColor（了解） 圆角 border-radius border-radius ：10px 四个圆角都圆角了,相当于 border-radius 1...原创 2020-05-03 16:02:05 · 638 阅读 · 0 评论 -
css3 选择器总结，基本的用法
<!-- 一. css3 简短介绍CSS3 的历史CSS2 —》 CSS3-webkit chrome / safari-ms ie-moz firefox-o opera注： 一开始每家浏览器在css提出标准的时候，每个浏览器实现版本的时间不齐，所以每个浏览器有一个自己实现的标准。所以就会有前端之称。 在后面每家浏览器商发现大家都支持css3后，所以都遵守C...原创 2020-05-02 15:39:29 · 322 阅读 · 0 评论 -
css calc() 的使用方法，里面包含bug
在做后台管理系统的时候吗，我们通常会发现，左侧的菜单需要出去顶部后自动布满整个屏幕，并且加上背景颜色。但是实现起来有的时候却是挺难受的。所以在这里我们就是用calc() 来使用。calc() 是css 里面的一个计算长度的公式。里面可以进行加减乘除。 但是用的不好的话，会发现没有作用。如下图：代码如下图：检查后发现：calc（100% - 70px） 里面的100%,是回去找父级的高度，当...原创 2020-03-30 12:45:06 · 691 阅读 · 0 评论