Css – 苏demo的别样人生 https://www.libaocai.com 行走于凡尘俗世,活得别样人生 Tue, 12 Jan 2021 07:29:59 +0000 zh-CN hourly 1 https://wordpress.org/?v=6.2.4 loaders.css使用纯粹的css实现的开源loading动画库 https://www.libaocai.com/7155.html Tue, 12 Jan 2021 07:29:59 +0000 http://www.libaocai.com/?p=7155
loaders.css是Github上一个使用纯粹的css实现的开源loading动画库,完全用CSS编写的加载动画的集合。每个动画仅限于CSS属性的一小部分,以避免复杂的绘画和布局计算。

访问地址:

https://github.com/ConnorAtherton/loaders.css

安装方式:

bower install loaders.css
npm i --save loaders.css

使用方法:

1.包裹文件 2.使用 ,示例:<div class=”loader-inner ball-pulse”></div> 3.将适当数量的<div>s插入该元素

扩展:

jquery混合使用

包括loaders.min.css,jQuery和loaders.css.js

创建一个元素并添加动画类(例如<div class=”loader-inner ball-pulse”></div>)

loaders.js 是为每个动画注入正确数量的div元素的简单帮助库

要初始化页面加载后添加的加载器,请选择div并调用loaders它们(例如$(‘.loader-inner’).loaders())

更改背景色:

.ball-grid-pulse > div {
  background-color: orange;
}

更改尺寸:

.loader-small .loader-inner {
  transform: scale(0.5, 0.5);
}

兼容性:

  • IE11
  • Chrome 41+
  • FireFox 36+
  • Safari 8+

转载请注明:苏demo的别样人生 » loaders.css使用纯粹的css实现的开源loading动画库

]]>
h5站点图片 自适应大小样式写法 https://www.libaocai.com/5804.html https://www.libaocai.com/5804.html#respond Wed, 01 Mar 2017 07:00:33 +0000 https://www.libaocai.com/?p=5804 css样式代码:

img{height: auto; width: auto\9; width:100%; }

截图示例:

QQ图片20170301150009

转载请注明:苏demo的别样人生 » h5站点图片 自适应大小样式写法

]]>
https://www.libaocai.com/5804.html/feed 0
css3 实现酷炫加载中特效 https://www.libaocai.com/5525.html https://www.libaocai.com/5525.html#respond Thu, 13 Oct 2016 06:42:09 +0000 http://www.libaocai.com/?p=5525 废话不多说,上代码:

示例下载:test

 

<html>
<head>
    <title>css3动画实现超酷loading特效</title>
    <style type="text/css">
        .loading {
            -webkit-animation: fadein 2s;
            -moz-animation: fadein 2s;
            -o-animation: fadein 2s;
            animation: fadein 2s;
        }
        .spinner-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 300;
            height: 100%;
            min-width: 100%;
            min-height: 100%;
            background: rgba(255,255,255,0.93);
        }
        .spinner {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            animation: 1.5s ease 0s normal none infinite running spin;
            border-color: rgba(255, 0, 0, 1) transparent;
            border-image: none;
            border-radius: 50px;
            border-style: solid;
            border-width: 20px;
            display: block;
            height: 1px;
            left: 50%;
            margin-left: -160px;
            position: absolute;
            top: 45%;
            width: 1px;
        }
        .spinner-text {
            color: #000;
            font-family: Arial;
            font-size: 20px;
            left: 50%;
            letter-spacing: 1px;
            margin-left: -100px;
            margin-top: 2px;
            position: absolute;
            top: 45%;
        }
        @keyframes spin {
            0%, 100% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(720deg) scale(0.6);
            }
        }
        @keyframes spin {
            0%, 100% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(720deg) scale(0.6);
            }
        }
    </style>
</head>
<body>
<div class="loading">
    <div class="spiner-wrapper">
        <div class="spinner-wrapper">
            <span class="spinner-text">数据加载中,请稍候...</span>
            <span class="spinner"></span>
        </div>
    </div>
</div>
</body>
</html>

转载请注明:苏demo的别样人生 » css3 实现酷炫加载中特效

]]>
https://www.libaocai.com/5525.html/feed 0
CSS实现圆形头像 https://www.libaocai.com/5455.html https://www.libaocai.com/5455.html#respond Mon, 26 Sep 2016 01:32:58 +0000 http://www.libaocai.com/?p=5455 代码示例:

<style>
  .avatar{width:100px;height:100px;border-radius:100px}
</style>
<div class="avatar"></div>

注意:

border-radius:100px;宽度多少   这个也要多少

效果示例:

20160926093233

转载请注明:苏demo的别样人生 » CSS实现圆形头像

]]>
https://www.libaocai.com/5455.html/feed 0
CSS 去除图片上下的间距或者间隙 https://www.libaocai.com/5361.html https://www.libaocai.com/5361.html#respond Fri, 12 Aug 2016 08:50:12 +0000 http://www.libaocai.com/?p=5361 <div class=”padding-10p width-100 goodDetail ng-binding” ng-bind-html=”product.content”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_559343018a484.jpg” width=”100%”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_55934301e1e14.jpg” width=”100%”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_559343033d547.jpg” width=”100%”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_5593430440bf8.jpg” width=”100%”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_55934305a730b.jpg” width=”100%”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_55934306b239d.jpg” width=”100%”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_55934307f294f.jpg” width=”100%”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_55934308d3b90.jpg” width=”100%”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_55934309d7242.jpg” width=”100%”><img src=”http://7xj380.com1.z0.glb.clouddn.com/2015-07-01_5593430b32974.jpg” width=”100%”></div>

以上图片上下存在缝隙,可利用 :

 style="vertical-align : bottom"  使得图片上下的边距去除。

 

或者

<style type="text/css">
img {
   outline-width:0px;
   vertical-align:top;
}
</style>

转载请注明:苏demo的别样人生 » CSS 去除图片上下的间距或者间隙

]]>
https://www.libaocai.com/5361.html/feed 0
CSS选择器,标签限定 https://www.libaocai.com/5353.html https://www.libaocai.com/5353.html#respond Tue, 09 Aug 2016 14:27:55 +0000 http://www.libaocai.com/?p=5353 CSS选择器,标签限定
例子:ul#nav, ul li#nav和 #nav ul, #nav ul li
注意空格,没有空间隔开的就可以理解为限定
区别
1.ul#nav:表示id=’nav’的ul;(ul限定#nav标签类型)(ID是唯一的,ul感觉多余了)
2.ul li#nav:表示 ul 的子标签id=‘nav’的li;(可以写成 ul #nav)
3.#nav ul:表示 id=’nav’标签的子标签ul;
4.#nav ul li:表示 id=’nav’标签的子标签ul 的子标签li

作者:头条号 / 抹茶果果
链接:http://toutiao.com/a6310862119667777794/
来源:头条号(今日头条旗下创作平台)
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

转载请注明:苏demo的别样人生 » CSS选择器,标签限定

]]>
https://www.libaocai.com/5353.html/feed 0
使用 CSS 实现居中效果 https://www.libaocai.com/3963.html https://www.libaocai.com/3963.html#respond Sat, 22 Aug 2015 07:27:56 +0000 http://www.libaocai.com/?p=3963 水平居中

行内或类行内元素(比如文本和链接)

在块级父容器中让行内元素居中,只需使用 text-align: center;

这种方法可以让 inline / inline-block / inline-table / inline / flex 等类型的元素实现居中。

块级元素

让块级元素居中的方法就是设置 margin-leftmargin-rightauto (前提是已经为元素设置了适当的 width 宽度,否则块级元素的宽度会被拉伸为父级容器的宽度)。常见用法如下所示:

.center-me {
  margin: 0 auto;
}

无论父级容器和块级元素的宽度如何变化,都不会影响块级元素的居中效果。

请注意, float 属性是不能实现元素居中的。如果你想知道使用 float 实现居中的非常规方案,可以参考这篇文章。

有关于水平居中更多实现方法,可以参阅早期整理的一篇博客《六种实现元素水平居中》

多个块级元素

如果要让多个块级元素在同一水平线上居中,那么可以修改它们的 display 值。这里有两个示例,其中一个使用了 inline-block 的显示方式,另一个使用了flexbox 的显示方式:

如果你想让多个垂直堆栈的块元素,那么仍然可以通过设置 margin-leftmargin-rightauto 来实现:

垂直居中

使用 CSS 实现垂直居中需要一些技巧。

行内或类行内元素(比如文本和链接)

单行

对于单行行内或者文本元素,只需为它们添加等值的 padding-toppadding-bottom 就可以实现垂直居中:

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

如果因为某些原因我们不能使用 padding 属性来实现垂直居中,而且已知文本不会换行,那么就可以让 line-heightcenter 相等,从而实现垂直居中:

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

多行

对于多行文本,同样可以使用等值 padding-toppadding-bottom 的方式实现垂直居中。如果你在使用过程中发现这种方法没见效,那么你可以通过 CSS 为文本设置一个类似 table-cell 的父级容器,然后使用 vertical-align 属性实现垂直居中:

此外,你还可以使用 flexbox 实现垂直居中,对于父级容器为 display: flex的元素来说,它的每一个子元素都是垂直居中的:

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

值得注意的是,上述方法只适用于父级容器拥有确定高度的元素。

如果上述方法都不起作用,那么你就需要使用被称为 幽灵元素(ghost element) 的非常规解决方式:在垂直居中的元素上添加伪元素,设置伪元素的高等于父级容器的高,然后为文本添加 vertical-align: center; 样式,即可实现垂直居中。

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

块级元素

已知元素的高度

无法获知元素的具体高度是非常常见的一种状况,比如:视区宽度变化,会触发布局重绘,从而改变高度;对文本施加不同的样式会改变高度;文本的内容量不同会改变高度;当宽度变化时,对于宽高比例固定的元素(比如图片),也会自动调整高度……

如果我们知道元素的高度,可以这样来实现垂直居中:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

未知元素的高度

如果我们不知道元素的高度,那么就需要先将元素定位到容器的中心位置,然后使用 transformtranslate 属性,将元素的中心和父容器的中心重合,从而实现垂直居中:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

flexbox

使用 flexbox 实现垂直居中非常简单:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平且垂直居中

通过组合水平居中和垂直居中的技巧,可以实现非常完美的居中效果。我觉得可以将它们分为三种类型:

宽高固定元素

设定父级容器为相对定位的容器,设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50% ,最后使用负向 margin 实现水平和垂直居中, margin 的值为宽高(具体的宽高需要根据实际情况计算 padding )的一半。

.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
}

宽高不固定元素

如果无法获取确定的宽高,同样需要设定父级容器为相对定位的容器,设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50% 。不同的是,接下来需要使用 transform: translate(-50%, -50%); 实现垂直居中:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用 transform 有一个缺陷,就是当计算结果含有小数时(比如 0.5 ),会让整个元素看起来是模糊的,一种解决方案就是为父级元素设置 transform-style: preserve-3d; 样式:

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

flexbox

使用 flexbox 实现水平和垂直居中,只需使用两条居中属性即可:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

转载请注明:苏demo的别样人生 » 使用 CSS 实现居中效果

]]>
https://www.libaocai.com/3963.html/feed 0
浏览器 CSS Hack 收集 https://www.libaocai.com/3657.html https://www.libaocai.com/3657.html#respond Sun, 14 Jun 2015 06:39:21 +0000 http://www.libaocai.com/?p=3657 所谓的 Hack 就是只有特定浏览器才能识别这段hack代码。Hack 不是什么好东西,除非没有办法,我们尽量还是不要用着玩意。 下面是各个浏览器的CSS Hack 列表。

Firefox 浏览器

@-moz-document url-prefix() {
  .selector {
    property: value;
  }
}

支持所有Gecko内核的浏览器 (包括Firefox)

*>.selector { property: value; }

Webkit 内核浏览器

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  Selector {
    property: value;
  }
}

Opera 浏览器

html:first-child>b\ody Selector {property:value;}

IE 浏览器

IE 浏览器针对不同的版本有不同个Hack方式。

IE 9

:root Selector {property: value\9;}

IE 9-

Selector {property: value\9;}

IE 8

Selector {property: value/;}

或:
@media \0screen {
    Selector {property: value;}
}

IE 8+

Selector {property: value\0;}

IE 7

*+html Selector{property:value;}

或:
*:first-child+html Selector {property:value;}

IE 7-

Selector {*property: value;}

IE6

Selector {
  _property: value;
}

或者: 
*html Selector {
  property: value;
}

转载请注明:苏demo的别样人生 » 浏览器 CSS Hack 收集

]]>
https://www.libaocai.com/3657.html/feed 0
CSS3 border-radius 属性 https://www.libaocai.com/3607.html https://www.libaocai.com/3607.html#respond Sat, 06 Jun 2015 14:40:48 +0000 http://www.libaocai.com/?p=3607 实例

向 div 元素添加圆角边框:

div
{
border:2px solid;
border-radius:25px;
}

 

IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。

定义和用法

border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

提示:该属性允许您为元素添加圆角边框!

默认值: 0
继承性: no
版本: CSS3
JavaScript 语法: object.style.borderRadius=”5px”

语法

border-radius: 1-4 length|% / 1-4 length|%;

注释:按此顺序设置每个 radii 的四个值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

描述 测试
length 定义圆角的形状。 测试
% 以百分比定义圆角的形状。 测试

例子 1

border-radius:2em;

等价于:

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

例子 2

border-radius: 2em 1em 4em / 0.5em 3em;

等价于:

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

 

 

转载请注明:苏demo的别样人生 » CSS3 border-radius 属性

]]>
https://www.libaocai.com/3607.html/feed 0
jquery.validate1.13.js 新写法 https://www.libaocai.com/3524.html https://www.libaocai.com/3524.html#respond Mon, 25 May 2015 04:18:19 +0000 http://www.libaocai.com/?p=3524 <script src="../js/jquery.js"></script> <script src="../js/jquery.validate.js"></script> <script> $().ready(function() { $("#registerForm").validate(); }); </script> <form id="registerForm" method="get" action=""> <fieldset> <p> <label for="cusername">用户名</label> <input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是2到10个字符"> </p> <p> <label for="cpassword">密码</label> <input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密码不能为空" data-msg-minlength="至少设置6位密码"> </p> <p> <label for="cconfirmpassword">确认密码</label> <input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="两次密码不一致"> </p> <p> <label for="cemail">邮箱</label> <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确"> </input> </p> <p> <label for="chasreferee">有推荐人请勾选</label> <input type="checkbox" id="chasreferee" name="hasreferee"> </p> <p> <label for="creferee">推荐人</label> <input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推荐人不能为空"> </input> </p> <p> <input type="submit" value="提交"> </p> </fieldset> </form>

看了之前的别人写的文章,貌似是依赖jquery.metadata.js这个库,然后写的时候以 class=”required email” 这样的形式来写,这样写起来好像有些乱,class本身是呈现样式的,现在被附上各种校验的规则,看上去似乎有些乱,不过好在新版本中,又有了新的写法,不依赖上面的js库,以 data-rule-验证规则、data-msg-提示信息 这样的格式来重新定义,更简单,更直观,更强大了。上面的测试通过

我的版本的jquery.validate1.13.js

然后这样的写法,控件中的messages不会生效,还会报错: Cannot read property ‘call’ of undefined  园子里面很多jquery.validate文章提到可以使用,我看是版本过时了,反正我没有试验出来。还有就是将验证卸载class里面我也是醉了。下面的 测试错误 !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery.validate.js"></script>-->
<script type="text/javascript" src="jquery.validate1.13.js"></script>
<script type="text/javascript" src="jquery.validate.message_cn.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript">
$(function(){
  $.metadata.setType("attr", "validate");
  $("#signupForm").validate();
  //$("#signupForm").validate({ meta: "validate" }); 
  //$("#commentForm").validate();
})
</script>
</head>
<body>
<form id="signupForm" method="get" action="">
  <p>
<input id="email" name="email" validate="{required:true, email:true, messages:{required:'输入email地址', email:'你输入的不是有效的邮件地址'}}" />
  </p>
  <p>
    <input class="submit" type="submit" value="Submit"/>
  </p>
</form>
</body>
</html>

转载请注明:苏demo的别样人生 » jquery.validate1.13.js 新写法

]]>
https://www.libaocai.com/3524.html/feed 0