微码 2018
1、加一个类名自动变loading状态
按钮加一个类名自动变菊花loading状态无图片版，使用便捷，效果好，开销小，CSS3动画旋转，IE10+和其它现代浏览器支持
/* 按钮loading */
a[class*=-btn].loading,
label[class*=-btn].loading {
position: relative;
}
a[class*=-btn].loading::first-line,
label[class*=-btn].loading::first-line {
color: transparent;
}
a[class*=-btn].loading::before,
label[class*=-btn].loading::before {
width: 4px; height: 4px;
margin: auto;
content: '';
-webkit-animation: spinZoom 1s steps(8) infinite;
animation: spinZoom 1s steps(8) infinite;
border-radius: 100%;
box-shadow: 0 -10px 0 1px currentColor, 10px 0 currentColor, 0 10px currentColor, -10px 0 currentColor, -7px -7px 0 .5px currentColor, 7px -7px 0 1.5px currentColor, 7px 7px currentColor, -7px 7px currentColor;
/* center */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
/* loading动画 */
@-webkit-keyframes spinZoom {
0% {
-webkit-transform: scale(.75) rotate(0);
}
100% {
-webkit-transform: scale(.75) rotate(360deg);
}
}
@keyframes spinZoom {
0% {
transform: scale(.75) rotate(0);
}
100% {
transform: scale(.75) rotate(360deg);
}
}原帖作者没有调用，尝试简单调用一下
<!DOCTYPE html>
<html>
<head>
<title>例子</title>
<meta charset="UTF-8">
<style type="text/css">
/* 按钮loading */
a[class*=-btn].loading, label[class*=-btn].loading {
/*position: relative;*/
}
a[class*=-btn].loading::first-line, label[class*=-btn].loading::first-line {
color: transparent;
}
a[class*=-btn].loading::before, label[class*=-btn].loading::before {
width: 4px; height: 4px;
margin: auto;
content: '';
-webkit-animation: spinZoom 1s steps(8) infinite;
animation: spinZoom 1s steps(8) infinite;
border-radius: 100%;
box-shadow: 0 -10px 0 1px currentColor, 10px 0 currentColor, 0 10px currentColor, -10px 0 currentColor, -7px -7px 0 .5px currentColor, 7px -7px 0 1.5px currentColor, 7px 7px currentColor, -7px 7px currentColor;
/* center */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
/* loading动画 */
@-webkit-keyframes spinZoom {
0% {
-webkit-transform: scale(.75) rotate(0);
}
100% {
-webkit-transform: scale(.75) rotate(360deg);
}
}
@keyframes spinZoom {
0% {
transform: scale(.75) rotate(0);
}
100% {
transform: scale(.75) rotate(360deg);
}
}
</style>
</head>
<body>
<label class="loading -btn"></label>
<!--
自己尝试调用，两种标签任意一种都可以
<a href="javascript" class="loading -btn"></a>
-->
</body>
</html>转: http://www.zhangxinxu.com/php/microCodeDetail.php?id=5
2、Box Shadow(阴影)-Css3演示
用起来比挺方便的，直接生成css3样式
http://www.css88.com/tool/css3Preview/Box-Shadow.html
3、css文字两端对齐
css文字两端对齐，IE浏览器不兼容，可以用在移动端。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字两端对齐</title>
<style>
.box{
width:460px;
height:20px;
line-height:20px;
background:orange;
color:#fff;
font-family:"新宋体";
text-align:justify;
margin-bottom:10px;
}
.box:after{
width:100%;
display:inline-block;
content:'';
}
</style>
</head>
<body>
<div class="box">所有的结局都已写好</div>
<div class="box">所有的泪水也都已启程</div>
<div class="box">却忽然忘了是怎么样的一个开始</div>
<div class="box">在那个古老的不再回来的夏日</div>
</body>
</html>
Leave a comment
0 Comments.