霍者博客

欢迎访问霍者博客(微信hylg1234)最新发布 练习题合集 软件合集 视频合集

伪类:before的使用方法实例

说明:

图左侧是未加:before的状态,右侧是加了:before的状态。

图上面那个是用:before添加三条横杠,图下面那个是用:before添加一个原点。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>伪类:before的使用方法实例  网页设计学习群 156179014</title>
<style type="text/css">
<!--
.menu-button {
  position: relative;
  margin: 5px;
  height: 36px;
  width: 36px;
  cursor: pointer;
}
.menu-button:before {
  content: "";
  position: absolute;
  top: 12px;
  right: 3px;
  border-bottom: 17px double #ccc;
  border-top: 6px solid #ccc;
  width: 30px;
  height: 5px;
}
.a {
height: 36px;
width: 36px;
border: 1px solid #00F;
}
.a:before {
content: "";
width: 5px;
height: 5px;
background-color: #999;
border-radius:50%;
margin-top: 15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
display: block;
}
-->
</style>
</head>
<body>
<div class="menu-button"></div>
<div class="a"></div>
</body>
</html>


...

CSS3伪类和伪元素的特性和区别

前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link、visited等,伪元素较常见的比如:before、:after等。

其实上面提到的这些伪类和伪元素都是CSS1和CSS2中的概念,CSS1和CSS2中对伪类的伪元素的区别比较模糊,甚至经常有同行将:before、:after称为伪类。CSS3对这两个概念做了相对较清晰地概念,并且在语法上也很明显的讲二者区别开。

伪类 - pseudo classes

...

【转载】pc网站在手机下变webapp

自2009年提供html5开发服务,2012年提供响应式开发以来,承接了不少html5和响应式项目,而在大量的项目实践中,团队逐渐形成了一套完整的开发套路,用来高效的开发。

但是,我们发现html5响应式出来以后我们似乎是陷入了一个误区,响应式就非得让网页随着宽度变化不断的适应,适应吗, 这样造成了开发的繁琐程度,并且我们作为开发者并不能对市场上所有的分辨率进行响应,只能用范围来选取,比如:

1200~1600属于宽屏,做一个响应

1024~1200属于普屏,做一个响应

...

(SEO干货)组合10万个关键词的公式

如果你的产品能组合出成千上万的关键词!

并且把他通过互联网平台发布出去!

那么你的产品将会很容易就能做好!

本想根据我们的工作经验给大家整理出来!

以便于大家组合自己产品的关键词!

所以索性直接分享给大家!

希望对大家有所帮助!

第1:关键词单发。如:高压胶管

第2:型号+关键词。如:4-25+高压胶管

第3:地区 + 关键词。如:温州+高压胶管

第4:厂家 + 关键词。如:浙江宇力液压有限公司+高压胶管

...

CSS3 一个轻微上下左右浮动的小效果

这个没什么好说的,只有一个地方要注意,animation是不兼容webkit内核的,也就是我们常说的谷歌浏览器,或者我们用的360极速浏览器下的极速模式。。所以这里要多一行说明,即-webkit-animation

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>一个轻微上下左右浮动的小效果</title>
<style type="text/css">
<!--
.dis_05{
top:50%;
left:50%;
margin:160px 0 0 280px;
width:89px;
height:113px;
position:absolute;
z-index:5;
-webkit-animation:dis_05 8s linear 0s infinite;
animation:dis_05 8s linear 0s infinite;
background-color: #CCC;
}
@-webkit-keyframes dis_05{0%{margin:160px 0 0 280px;}50%{margin:140px 0 0 260px;}100%{margin:160px 0 0 280px;}}
@keyframes dis_05{0%{margin:160px 0 0 280px;}50%{margin:140px 0 0 260px;}100%{margin:160px 0 0 280px;}}
-->
</style>
</head>
<body>
<div class="dis_05">一个轻微上下左右浮动的小效果</div>
</body>
</html>


...

CSS3 一个灰来灰去的小方块,可以做成一个小灰机的

注意给body一个overflow-x:hidden;,,这样可以防止浏览器X轴出现导航条

这个案例很简单,就是用了animation动画,然后用到了翻转rotate。只是要注意每个百分比节点的小灰机的状态即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>一个灰来灰去的小方块,可以做成一个小灰机的</title>
<style type="text/css">
<!--
body{font-family:"微软雅黑";font-size:12px;color:#fff;overflow-x:hidden;}
.yi_guang_23{
-webkit-animation:yi_guang_23t 10s linear 0s infinite;
animation:yi_guang_23 10s linear 0s infinite;
background-color: #999;
height: 50px;
width: 200px;
position: relative;
border-right-width: 4px;
border-right-style: solid;
border-right-color: #F00;
}
@keyframes yi_guang_23{0%{left:0%;}30%{left:120%;}40%{transform:rotateZ(0deg)}50%{left:120%;transform:rotateZ(180deg)}80%{left:-10%;}90%{transform:rotateZ(180deg)}100%{left:-20%;}}
-->
</style>
</head>
<body>
<div class="yi_guang_23">一个灰来灰去的小方块,可以做成一个小灰机的</div>
</body>
</html>


...

这个案例说是backface-visibility在起作用,可最后测试出来发现起作用的却是opacity

这个案例说是backface-visibility在起作用,可最后测试出来发现起作用的却是opacity

background:rgba(26,74,114,.6);后面的.6即0.6,是背景里的alpha透明通道,可以设置背景的半透明效果。以前我们都是用半透明图片代替,现在用这个即可实现半透明效果了。

如果里面的问题也被半透明的话,那么只需要添加position: relative; 即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>此处不想解释,CSS3太费脑子了,完全是一个逻辑的问题</title>
<style type="text/css">
<!--
.a {
position: relative;
height: 210px;
width: 210px;
background-color: #FF0;
border-radius:50%;
}
.b{
position: absolute;
height: 200px;
width: 200px;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 5px;
border-left-width: 5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #F00;
border-right-color: #0F0;
border-bottom-color: #0F0;
border-left-color: #F00;
border-radius:50%;
transition:all .8s ease-in-out;
left: 0px;
top: 0px;
}
.a:hover .b{transform:rotate(180deg)}
.c {
transition:all .8s ease-in-out;
opacity:0;
backface-visibility:hidden;
position: absolute;
height: 200px;
width: 200px;
left: 5px;
top: 5px;
line-height: 200px;
background:#1a4a72;
background:rgba(26,74,114,.6);
text-align: center;
border-radius:50%;
color: #FFF;
}
.a:hover .c{opacity:1}
-->
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c">此处不想解释,CSS3太费脑子了,完全是一个逻辑的问题</div>
</div>
</body>
</html>
...

CSS3 rotateZ 沿边缘旋转

<style type="text/css">
<!--
.aw {
height: 200px;
width: 200px;
position: relative;
}
.a {
height: 200px;
width: 200px;
border: 2px solid #999;
border-radius:50%;position: relative;-webkit-animation:rotateZ 16s linear 0s infinite;animation:rotateZ 16s linear 0s infinite;
}
@keyframes rotateZ {0%{transform:rotateZ(-45deg)} 100%{transform:rotateZ(315deg)}}
.b {
background-color: #00F;
height: 40px;
width: 40px;
border-radius:50%;
position: absolute;
left: 10px;
top:10px;
font-size: 24px;
line-height: 40px;
color: #FFF;
font-family: "微软雅黑";
text-align: center;
}
-->
</style>
<div class="a"><div class="b">1</div></div>


...

纯CSS3动画 小球随大圆球边缘自动旋转

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>纯CSS3动画 小球随大圆球边缘自动旋转</title>
<style type="text/css">
#bowlG{
position:relative;
width:218px;
height:218px;
margin:auto;
}
#bowl_ringG{
position:absolute;
width:218px;
height:218px;
border:18px solid rgb(39,145,184);
border-radius:218px;
-o-border-radius:218px;
-ms-border-radius:218px;
-webkit-border-radius:218px;
-moz-border-radius:218px;
}
.ball_holderG{
position:absolute;
width:58px;
height:218px;
left:80px;
top:0px;
animation-name:ball_moveG;
-o-animation-name:ball_moveG;
-ms-animation-name:ball_moveG;
-webkit-animation-name:ball_moveG;
-moz-animation-name:ball_moveG;
animation-duration:5.2s;
-o-animation-duration:5.2s;
-ms-animation-duration:5.2s;
-webkit-animation-duration:5.2s;
-moz-animation-duration:5.2s;
animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
animation-timing-function:linear;
-o-animation-timing-function:linear;
-ms-animation-timing-function:linear;
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
}
.ballG{
position:absolute;
left:0px;
top:-51px;
width:87px;
height:87px;
background:rgb(237,17,237);
border-radius:73px;
-o-border-radius:73px;
-ms-border-radius:73px;
-webkit-border-radius:73px;
-moz-border-radius:73px;
}
@keyframes ball_moveG{
0%{
transform:rotate(0deg)
}
100%{
transform:rotate(360deg)
}
}
@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)
}
100%{
-o-transform:rotate(360deg)
}
}
@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)
}
100%{
-ms-transform:rotate(360deg)
}
}
@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)
}
100%{
-webkit-transform:rotate(360deg)
}
}
@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)
}
100%{
-moz-transform:rotate(360deg)
}
}
</style>
</head>
<body>
<div id="bowlG">
    <div id="bowl_ringG">
        <div class="ball_holderG">
            <div class="ballG"></div>
        </div>
    </div>
</div>
</body>
</html>
...