Button Transition With Background-Position
button{
color:maroon;
border:1px solid maroon;
font-size:50px;
padding:20px 40px;
border-radius:15px;
transition-duration:0.5s;
position:relative;
overflow:hidden;
}
button:hover{
color:#fff;
}
.left{
background:-webkit-linear-gradient(left, maroon 50%, transparent 50%);
background-size:200% 100%;
background-position:100% 0%;
}
.left:hover{
background-position:0% 0%;
}
.angle{
background:-webkit-linear-gradient(225deg, maroon 50%, transparent 50%);
background-size ...
图片翻转+文字翻转特效
.box{
position:relative;
perspective: 1000px;
text-align:center;
}
.box img{
width:200px;
height:auto;
opacity:1;
transform:translateY(0) rotateX(0);
transition: all 1s ease-in-out 0s;
}
.box:hover img{transform: translateY(-100%) rotateX(90deg);transform-origin: center bottom 0;opacity:0;}
.box .over-layer{position:absolute;top:0;left:0;width:100%;height:100%;transform: translateY(100%) rotateX(-90deg);opacity:0;transform-origin:top center;transition: all 1s ease-in-out;}.box ...
转角跑马灯
.marquee{
margin-top:3rem;
perspective:500px;
font-size:0;
font-family:"Microsoft YaHei", "Segoe UI", "Lucida Granda", Helvetica, Arial;
}
.marquee div{display:inline-block;height:12rem;width:30rem;position:relative;}.marquee div{font-size:8rem;overflow:hidden;}.marquee div span{position:absolute;width:400%;line-height:1.4;}.marquee div:first-of-type{background:#e5233e;transform-origin: top right;transform: rotateY(-40deg);color:#fff;}.marquee div:last-of-type{background:#b31e31;trans ...
CSS Cube Transform
.container{
width:200px;
height:200px;
position:relative;
perspective:1000px;
margin:0 auto;
}
.cube{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;
}
.cube figure{
width:196px;
height:196px;
border:2px solid #ccc;
position:absolute;
font-size:20px;
line-height:196px;
font-weight:bold;
color:white;
text-align:center;
transition:transform 1s ease;
}
.cube:hover .front{
background: hsla( 0, 100%, 50%, 0.5 );
transform:transl ...
CSS Progress Bar
.wrapper{
position:relative;
overflow:visible;
width:500px;
margin:0 auto;
}
.bar{
border:1px solid maroon;
margin:40px 30px;
padding: 8px 0;
height:55px;
background: maroon;
background: -webkit-linear-gradient(left, maroon 50%, #fff 50%);
background-size:200% 100%;
background-position: 100% 0%;
-webkit-animation: AnimationName 10s ease infinite;
}
@keyframes AnimationName{
100%{
background-position:0% 0%;
}}
.text{
font-size:22px;
margin:15px 0;
text-ali ...
Text Gradient
.background{
background:#04161f;
font-family:"Lato", sans-serif;
margin:3em auto;
max-width:50em;
}
.grad1{
display:inline-block;
font-size: 96px;
margin:0;
opacity:0.9;
background:#fff;
color:black;
position:relative;
text-shadow:1px 1px 0px #04161f, 1px 1px 0px #04161f, -1px -1px 0px #04161f;
}
.grad1:before, .grad1:after{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
pointer-events:none;
}
.grad1:before{
background: -webkit-linear-gradient(left, ...
CSS3 中的 Pointer-Events 属性
功能:
阻止用户的点击产生任何效果
阻止默认鼠标指针样式的显示(比如放在<a>上不会变成pointer)
阻止 CSS 里的hover 和active状态的监听* 阻止触发 JS 事件(同上)
CSS3 Transitions Basics
Benefits of CSS 3
CSS3 Transitions are natively handled by the browser, which means they are always faster than a comparable JS animation.
JS animation is more difficult.
Bezier Timing FunctionsCSS3 has a transition-timing-function property which accepts keywords like ease, ease-in, and linear.
However we can define our own timing function using a cubic-bezier value. It sounds and looks complicated but can be explained with some simple diagrams.
linear curse
ease-in-out curseit starts slowly, ...
大公司怎么开发和部署前端代码
原文出处: fouber个人总结
图中 a.css 是页面 index.html 的样式, 对于高访问量的页面而言, 每次访问 index.html 都需要请求 a.css, 会很影响性能.
因此我们希望这样安排
利用 304, 让浏览器使用本地缓存: 304 叫协商缓存, 仍然需要和服务器通信一次
进一步优化, 强制浏览器使用本地缓存( cache-control/expires ), 不需要和服务器痛心了
新的问题: 浏览器不发送资源请求, 如何更新缓存?
通过更新页面中引用的资源路径, 让浏览器主动放弃缓存, 加载新资源
下次上线把链接地址改成新版本的, 就更新了资源
如果有很多样式引用, 但是仅仅改了其中一个呢?
解决方法: 让 url 的修改与文件内容关联, 即只有文件内容发生变化, 才会更新 url
利用数据摘要算法对文件请求摘要信息, 摘要信息和文件内容一一对应, 就有了一种可以精确到单个文件粒度的缓存控制依据.
把 URL 改成带摘要信息的格式:
以后如有文件修改, 就只更新对应的 URL 了
进一步提高网站性能把静态资源和动态网页分集群部署, 静态资源会被 ...
CSS 添加条纹背景
.bg{
height:300px;
width:300px;
color:#fff;
}
.type1{
background: linear-gradient(#fb3 20%, #58a 80%);
}
.type2{
background: linear-gradient(#fb3 50%, #58a 50%);
}
.type3{
background-size:100% 30px;
}
.type4{
background: linear-gradient(45deg, #fb3 50%, #58a 50%);
background-size:30px 30px;
}
.type5{
background: repeating-linear-gradient(45deg, #fb3, #58a 30px)
}
.type6{
background: #58a;
background-image: repeating-linear-gradient(45deg, hsla(0,0%,100%,.1),hsla(0,0%,100%,. ...
CSS 中的 Clear
为什么要清除浮动一个块级元素的如果没有设置 height, 则其高度由其子元素撑开. 如果所有子元素都是浮动的(脱离标准文档流), 那么父元素就会发生”坍塌”.
两种情况清除浮动包括清除子元素浮动和清除上级元素浮动, 如果要清除上级元素浮动, 只需要设置 clear:both 即可.如果要清除子元素浮动, 可以用空标签法, clearfix 法或者 overflow 法.
clear 的用法.subElement{
clear:both;
}
`</pre>
##### clearfix(最优浮动闭合方案)
父元素添加 class=clearfix
简洁版
<pre>`.clearfix:before, .clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
...
4 Simple Transitions of Button
4 Simple CSS Transition to Enchance Your ButtonsDarkenSet a darker shade background color when :hover is activated
Fade OutSet opacity to 1 by default, and reduce the opacity when :hover is activated.
Change ColorInset BorderTo create an inset of border,
button: hover{
box-shadow: inset 0 0 0 5px #darkderColor;
}
媒体查询
语法媒体查询包括一个媒体类型和至少一个媒体属性, 这些媒体属性会被解析成真或假.
当媒体查询为真时, 相关的样式表或样式规则就会按照正常的级联规则被应用.
即使媒体查询的结果为假, <link>标签上带有媒体查询的样式表仍然会被下载.
逻辑操作符操作符 not, and 和 only, 可以用来构建复杂的媒体查询
逗号分隔符相当于 or 操作符, 其中一个为真, 则媒体查询结果为真
一个基本的媒体查询, 即一个媒体属性与默认指定的 all 媒体类型, 可能是这样子:
@media (min-width: 700px) {...}
`</pre>
如果要添加横屏限制
<pre>`@media (min-width: 700px) and (orientation: landscape) {...}
`</pre>
### not
not 关键字应用于整个媒体查询, 如
<pre>`@media not all and (monochrome){...&# ...
学习 CSS 布局
Display 属性每个元素都有一个默认的 display 值, 这个与元素的类型有关.
大部分元素他们的 display 默认为 blcok 或 inline .
一个 blcok 元素通常称为 块级元素 , 一个 inline 元素通常称为 行内元素 .
Block一个 Block 元素会从新开始一行并盛满容器的宽度, 默认为 blcok 的元素有 p, form, header, footer, section等.
Inline一个 inline元素可以位于段落中, 包裹一些文字而不会打乱段落的布局.
None一些特殊元素的默认 display 是他, 例如 script. 用于不删除元素的情况下隐藏某些元素.
和 visibility 不同, display: none不会在文档流中占据空间, 但是 visibility: hidden 则会在文档流中占据空间.
inline-blcokinline 元素是可以位于段落内不导致换行的, 但是不可控制 height, width 属性
block 元素独立成段, 但是可以控制 height, width 属性
inline-blo ...
MDL-Tooltip
Default Tooltip
Title1
Follow
<!-- Simple Tooltip -->
<div class="icon material-icons" id="tt1">Title1</div>
<div class="mdl-tooltip" for="tt1">Follow</div>
`</pre>
### Large Tooltip
<!-- Simple Tooltip -->
<div class="icon material-icons" id="tt2">Title2</div>
<div class="mdl-tooltip mdl-tooltip--large" for="tt2& ...
MDL-Textfield
Text Field & Numeric Textfield
PlaceHolder..
<br>
<!-- Numeric Textfield -->
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input type="text" class="mdl-textfield__input" id="sample2" pattern="-?[0-9]*(.[0-9]+)?">
<label for="sample2" class="mdl-text ...
MDL-Table
Selectable Table
Material
Quantity
Unit Price
Acrylic(Transparent)
25
$2.90
Plywood(Birch)
50
$1.25
Laminate(Gold on Blue)
10
$2.35
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
& ...
MDL-Selection
Checkbox
Checkbox
<!-- Checkbox -->
<label for="checkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" class="mdl-checkbox__input" id="checkbox1">
<span class="mdl-checkbox__label">Checkbox</span>
</label>
`</pre>
### Radio Button
<!-- Radio Button -->
<label ...
MDL-Snackbar
Show Snackbar
(function(){
'user strict'
var snackbarContainer = document.querySelector('#snackbar');
var showSnackbarButton = document.querySelector('#show-snackbar');
var handler = function(event){
showSnackbarButton.style.backgroundColor = '';
};
showSnackbarButton.addEventListener('click', function(){
'user strict'
showSnackbarButton.style.backgroundColor = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
var data={
message: "Button Color Changed.",
timeou ...
MDL-Slider
Default Slider
<!-- Default Slider -->
<input type="range" class="mdl-slider mdl-js-slider" min="0" max="100" value="0" tabindex="0">
`</pre>
### Slider with Starting Value
<!-- Slider with Starting Value -->
<input type="range" class="mdl-slider mdl-js-slider" min="0" max="100" value="25" tabindex="0">
<pre>`&am ...
