Html鼠标 滑过特效
2017-02-08 10:13
99 查看
URL:链接
http://www.webhek.com/css3-animation-example?1486518420247
CSS小技巧
使用
使用负的
使用 “形似猫头鹰” 的选择器
使用
利用 Flexbox 去除多余的外边距
利用属性选择器来选择空链接
给 “预设” 链接定义样式
用 rem 来调整全局大小;用 em 来调整局部大小
隐藏没有静音、自动播放的影片
使用选择器
将
CSS重置帮助实施用干净的石板为造型元素在不同的浏览器风格的一致性。您可以使用CSS复位库像 Normalize 等,也可以使用一个更简化的复位方法:
现在的元素将被剥离利润率和填充和
注意:如果按照尖下面你可能会选择不包含在你的CSS复位
从
如此在插件或其它组件里改变
与其加上边框……
……然后去掉最后一个元素的边框……
……不如使用
当然,也可以使用
不必为每一个
文本元素可以很自然地继承
这不是黑魔法,真的可以垂直居中任何元素:
这还不够?垂直方向,水平方向……任何元素,任何时间,任何地方?CSS-Tricks 有篇好文讲到了各种居中的技巧。
注意:IE11 对 flexbox 的支持 有点
bug 。
列表的每项都由逗号分隔:
使用了
注意:这一技巧对于无障碍,屏幕阅读器而言并不理想,需要注意。
使用负的
或许你已经掌握了,试下这个:
就是这么简单。
没有理由不使用 SVG 图标:
SVG 在所有分辨率下都可以良好缩放,IE9+ 及其它所有浏览器都支持,丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。
注意:针对仅有图标的按钮,如果 SVG 没有加载成功的话,以下样式对无障碍有所帮助:
这个名字可能比较陌生,不过全局选择器 (
一起使用,效果非凡:
在此示例中,遵循其他元素的文档流中的所有元素将都接收上边距
更多 “形似猫头鹰” 的选择器,可参考 A List Apart 上面 Heydon
Pickering 的文章
移入滑块元素时增大它的
无痛的 table 布局。
与其使用
和
列之间的间隙相等,并且首尾没有多余的间隙。
当
相当简便。
给 “预设” 链接定义样式:
通过 CMS 系统插入的链接,通常没有
通用选择器 (
一致的垂直节奏可以提供视觉美感,增强内容的可读性。
要创建具有内在比一个盒子,所有你需要做的就是应用顶部或底部填充,从一个div:
使用20%的填充使得框等于其宽度的20%的高度。不管视口的宽度,子元素的div将保持其宽高比(100%/ 20%= 5:1)。
只要一点CSS就可以美化破碎的图象:
以添加伪元素的法则来显示使用者信息和虚线图像URL的引用:
了解更多关于这类样式的技巧 Ire
Aderinokun 的 原帖 .
在根设置基本字体大小后 (
然后设置字体大小的模块
现在,每个模块变得条块分割,更容易、灵活的样式,以便于维护。
这是一个自定义的使用者样式表一个伟大的把戏。避免在加载页面时自动播放。如果没有静音,则不显示视频:
再次,我們趁著使用的偽類。
在响应式布局的类型字体大小应能与每个视区进行调整。你可以计算的基础上视区高度的字体大小和宽度,使用
现在,您可以利用基于计算的值
为了避免在HTML表单元素缩放移动浏览器(Safari浏览器的iOS, et AL 。)当一个
:dancer:
这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。
http://www.webhek.com/css3-animation-example?1486518420247
CSS小技巧
目录
专业的技巧
使用 :not()选择器来决定表单是否显示边框
使用负的
nth-child来选择元素
使用 “形似猫头鹰” 的选择器
使用
max-height来建立纯 CSS 的滑块
利用 Flexbox 去除多余的外边距
利用属性选择器来选择空链接
给 “预设” 链接定义样式
用 rem 来调整全局大小;用 em 来调整局部大小
隐藏没有静音、自动播放的影片
使用选择器
:root来控制字体弹性
将
font-size关于表单元素为更好的移动体验
使用CSS复位
CSS重置帮助实施用干净的石板为造型元素在不同的浏览器风格的一致性。您可以使用CSS复位库像 Normalize 等,也可以使用一个更简化的复位方法:* { box-sizing: border-box; margin: 0; padding: 0; }
现在的元素将被剥离利润率和填充和
box-sizing,您可以管理与CSS盒模型布局。
演示
注意:如果按照尖下面你可能会选择不包含在你的CSS复位 box-sizing财产。
继承 box-sizing
从 html元素继承
box-sizing就好:
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
如此在插件或其它组件里改变
box-sizing变得简单。
使用 :not()
选择器来决定表单是否显示边框
与其加上边框……/* 添加边框 */ .nav li { border-right: 1px solid #666; }
……然后去掉最后一个元素的边框……
/* 去掉边框 */ .nav li:last-child { border-right: none; }
……不如使用
:not()伪类来达成同样的效果:
.nav li:not(:last-child) { border-right: 1px solid #666; }
当然,也可以使用
.nav li + li或者
.nav li:first-child ~ li来达成,但是
:not()选择器的方式更清晰明了,一目了然。
演示
为 body
元素添加行高
不必为每一个 <p>,
<h*>,等元素逐一添加
line-height,为
body元素添加就好了:
body { line-height: 1.5; }
文本元素可以很自然地继承
body的样式。
演示
垂直居中任何元素
这不是黑魔法,真的可以垂直居中任何元素:html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }
这还不够?垂直方向,水平方向……任何元素,任何时间,任何地方?CSS-Tricks 有篇好文讲到了各种居中的技巧。
注意:IE11 对 flexbox 的支持 有点
bug 。
演示
逗号分隔的列表
列表的每项都由逗号分隔:ul > li:not(:last-child)::after { content: ","; }
使用了
:not()伪类,因此最后一项没加逗号。
注意:这一技巧对于无障碍,屏幕阅读器而言并不理想,需要注意。
使用负的 nth-child
来选择元素
使用负的 nth-child可以选择 1 至 n 个元素。
li { display: none; } /* 选择第 1 至第 3 个元素并显示出来 */ li:nth-child(-n+3) { display: block; }
或许你已经掌握了,试下这个:
/* 选择第 1 至第 3 个元素并显示出来 */ li:not(:nth-child(-n+3)) { display: none; }
就是这么简单。
演示
使用 SVG 图标
没有理由不使用 SVG 图标:.logo { background: url("logo.svg"); }
SVG 在所有分辨率下都可以良好缩放,IE9+ 及其它所有浏览器都支持,丢掉你的 .png, .jpg, 或 .gif-jif-whatev 文件吧。
注意:针对仅有图标的按钮,如果 SVG 没有加载成功的话,以下样式对无障碍有所帮助:
.no-svg .icon-only:after { content: attr(aria-label); }
使用 “形似猫头鹰” 的选择器
这个名字可能比较陌生,不过全局选择器 ( *) 和 相邻兄弟选择器 (
+)
一起使用,效果非凡:
* + * { margin-top: 1.5em; }
在此示例中,遵循其他元素的文档流中的所有元素将都接收上边距
margin-top: 1.5em的样式。
更多 “形似猫头鹰” 的选择器,可参考 A List Apart 上面 Heydon
Pickering 的文章
演示
使用 max-height
来建立纯 CSS 的滑块
max-height与 overflow hidden 一起来建立纯 CSS 的滑块:
.slider { max-height: 200px; overflow-y: hidden; width: 300px; } .slider:hover { max-height: 600px; overflow-y: scroll; }
移入滑块元素时增大它的
max-height的值,便可以显示溢出部分。
创造格子等宽的表格
table-layout: fixed可以让每个格子保持等宽:
.calendar { table-layout: fixed; }
无痛的 table 布局。
演示
利用 Flexbox 去除多余的外边距
与其使用 nth-,
first-,
和
last-child去除列之间多余的间隙,不如使用 flexbox 的
space-between属性:
.list { display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }
列之间的间隙相等,并且首尾没有多余的间隙。
利用属性选择器来选择空链接
当 <a>元素没有文本内容,但是有
href属性的时候,可以显示它的
href链接:
a[href^="http"]:empty::before { content: attr(href); }
相当简便。
演示
给 “预设” 链接定义样式
给 “预设” 链接定义样式:a[href]:not([class]) { color: #008000; text-decoration: underline; }
通过 CMS 系统插入的链接,通常没有
class属性,以上样式可以甄别它们,而且不会影响其它样式。
一致的垂直节奏
通用选择器 ( *) 跟元素一起使用,可以保持一致的垂直节奏:
.intro > * { margin-bottom: 1.25rem; }
一致的垂直节奏可以提供视觉美感,增强内容的可读性。
内在比例盒
要创建具有内在比一个盒子,所有你需要做的就是应用顶部或底部填充,从一个div:.container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
使用20%的填充使得框等于其宽度的20%的高度。不管视口的宽度,子元素的div将保持其宽高比(100%/ 20%= 5:1)。
演示
为破碎图象定义样式
只要一点CSS就可以美化破碎的图象:img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; }
以添加伪元素的法则来显示使用者信息和虚线图像URL的引用:
img:before { content: "We're sorry, the image below is broken :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; }
了解更多关于这类样式的技巧 Ire
Aderinokun 的 原帖 .
用 rem
来调整全局大小;用 em
来调整局部大小
在根设置基本字体大小后 ( html { font-size: 100%; }), 请设置为文本元素的字体大小
em:
h2 { font-size: 2em; } p { font-size: 1em; }
然后设置字体大小的模块
rem:
article { font-size: 1.25rem; } aside .module { font-size: .9rem; }
现在,每个模块变得条块分割,更容易、灵活的样式,以便于维护。
隐藏没有静音、自动播放的影片
这是一个自定义的使用者样式表一个伟大的把戏。避免在加载页面时自动播放。如果没有静音,则不显示视频:video[autoplay]:not([muted]) { display: none; }
再次,我們趁著使用的偽類。
使用选择器 :root
来控制字体弹性
在响应式布局的类型字体大小应能与每个视区进行调整。你可以计算的基础上视区高度的字体大小和宽度,使用 :root:
:root { font-size: calc(1vw + 1vh + .5vmin); }
现在,您可以利用基于计算的值
root em单位:
root:
body { font: 1rem/1.6 sans-serif; }
演示
将 font-size
关于表单元素为更好的移动体验
为了避免在HTML表单元素缩放移动浏览器(Safari浏览器的iOS, et AL 。)当一个 <选择>下拉被窃听,加上
字体size的选择规则:
input[type="text"], input[type="number"], select, textarea { font-size: 16px; }
:dancer:
支持情况
这些技巧适用于最新版的 Chrome, Firefox, Safari, Opera, Edge, 以及 IE11。
相关文章推荐
- HTML鼠标滑过特效教程
- jQuery实现鼠标滑过图片移动特效
- js鼠标滑过图片震动特效的方法
- JQ鼠标滑过特效
- javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果
- 鼠标滑过图层或图片时,显示TITLE标题提示特效
- CSS3鼠标滑过动画线条边框特效
- 【原创】datalist repeater 控件的行鼠标单击 以及 滑过特效
- CSS3鼠标滑过渐变颜色旋转图标特效
- jquery特效 table鼠标滑过变色的实现代码
- 【HTML】鼠标特效
- jquery鼠标滑过特效
- 使用jQuery实现鼠标滑过图片移动特效
- JS特效之 仿淘宝商城 图片集 鼠标滑过改变透明度 (内含Mootools和jQuery版)
- jQuery实现的鼠标滑过弹出放大图片特效
- css特效:鼠标滑过图片出现一道闪光效果
- jquery实现全文检索与鼠标滑过工具栏特效
- Jquery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
- jquery特效 table鼠标滑过变色的实现代码
- 纯CSS3鼠标滑过按钮动画过滤特效