4种非常实用的CSS代码段，你都学会了吗？

击右上方红色按钮关注“web秀”，让你真正秀起来

文字加载...动画

html

正在加载中<dot>...</dot>

css

dot{ 
 display: inline-block; 
 height: 1em; 
 line-height: 1; 
 text-align: left; 
 vertical-align: -.25em; 
 overflow: hidden; 
} 
dot::before{ 
 display: block; 
 content: '...\\A..\\A.'; 
 white-space: pre-wrap; 
 animation: dot 2s infinite step-start both; 
} 
@keyframes dot{ 
 33% { 
 transform: translateY(-2em); 
 } 
 66% { 
 transform: translateY(-1em); 
 } 
}

如果你看上图代码没有看懂，请看下图，我注释掉一行代码，你就明白了。原来是dot元素，沿着Y轴在循环位移，隐藏掉就让你看到了加载的动画效果。

border 实现边框

当你需要这样一个上传文件，按钮时，你考虑的是找设计弄个图片，还是自己写一个？？？

其实CSS写，也很简单的。

<a href="javascript：;" class="upload" title="继续上传">添加图片</a>
.upload{ 
 position: relative; 
 display: inline-block; 
 width: 76px; 
 height: 76px; 
 color: #ccc; 
 border: 2px dashed; /*边框虚线*/ 
 text-indent: -12em; /*使其文字看不到*/ 
 transition: color .25s; /*hover事件：颜色渐变动画*/ 
 overflow: hidden; 
 margin: 50px 100px; 
} 
/*用before/after伪类做 + 号样式*/ 
.upload:before, .upload:after{ 
 content: ''; 
 position: absolute; 
 top: 50%; 
 left: 50%; 
} 
.upload:hover{ 
 color: #34538b; 
} 
.upload::before{ 
 width: 20px; 
 border-top: 4px solid; 
 margin: -2px 0 0 -10px; 
} 
.upload::after{ 
 height: 20px; 
 border-left: 4px solid; 
 margin: -10px 0 0 -2px; 
}

不规则的投影 filter

当我们想给一个矩形或其他能用 border-radius 生成的形状加投影时，用 box-shadow 都可以解决，如下图：

但是，当元素添加了一些伪元素或半透明的装饰之后，box-shadow就有些力不从心了，因为 border-radius 会无耻地忽视透明部分。这类情况包括下列几种情况:

1、半透明图像、背景图像、或者 border-image(比如老式的金质像框);

2、元素设置了点状、虚线或半透明的边框，但没有背景(或者当 background-clip 不是 border-box 时);

3、对话气泡，它的小尾巴通常是用伪元素生成的;

4、几乎所有的折角效果

5、通过 clip-path 生成的形状。

下面来看看这个示例： html代码

<div class="speech">不规则的投影</div>

css样式

div { 
 position: relative; 
 display: inline-flex; 
 flex-direction: column; 
 justify-content: center; 
 vertical-align: bottom; 
 box-sizing: border-box; 
 width: 8em; 
 padding: .5em; 
 height: 5em; 
 margin: .6em; 
 background: #0cc071; 
 color: #fff; 
 /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此时是伪类是没有阴影的*/ 
 -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
 filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); 
} 
 
.speech { 
 border-radius: .3em; 
} 
.speech::before { 
 content: ''; 
 position: absolute; 
 top: 1em; 
 right: -.7em; 
 width: 0; 
 height: 0; 
 border: 1em solid transparent; 
 border-left-color: #0cc071; 
 border-right-width: 0; 
}

从上图可以看出box-shadow搞不定的，drop-shadow给搞定了。这是为什么了？

可以很明显的看出区别，为什么会这样呢？在这里我用的是div标签，大家都知道，div标签是个块标签，说白了是个盒模型，指的是一块区域，box-shadow的属性只能添加到盒模型外面，因此内部的东西是不会添加上的，就变成上图的样子，中间还是白色部分。而drop-shadow就不一样了，他是把所有的非透明区域都做了阴影效果，就相当于一种真正的投影。

css 实现自适应的弹框

经常在网页中看到一些Dialog，例如有些网页点击登录注册时就会跳出一个弹框来显示登录注册页面，下面就使用 css 完成一个可以自适应，无论窗口的大小，始终能保持水平垂直居中的dialog。

<div class="c-pupup"> 
 <div class="dialog"> 
 <div class="content"> 
 我是内容 
 </div> 
 </div> 
</div>

css样式

.c-pupup{ 
 position: fixed; 
 top:0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: rgba(0,0,0,.5); 
 text-align: center; 
 white-space: nowrap; 
 z-index: 99; 
} 
.c-pupup:after{ 
 content: ''; 
 display: inline-block; 
 height: 100%; 
 vertical-align: middle; 
} 
.dialog{ 
 background-color: #fff; 
 display: inline-block; 
 vertical-align: middle; 
 border-radius: 6px; 
 text-align: left; 
 white-space: normal; 
 width: 400px; 
 height: 250px; 
}

总结

这些CSS都是非常实用的，有兴趣的可以收藏起来，没准以后能用上。然后drop-shadow就不用去纠结IE能不能用了，因为我们已经放弃它了。

喜欢小编或者觉得小编文章对你有帮助的，可以点击一波关注哦！

SS的强大和精妙，只有在认真研读其代码之后才会深刻明白。

今日继续用纯CSS画图，并给大家整理了本文中所有代码，需要的小伙伴可以私信我哦。

一、阴阳

首先，用CSS画一个阴阳图，如下：

代码也很简单：

#yin-yang {
 width: 96px;
 height: 48px;
 background: #eee;
 border-color: red;
 border-style: solid;
 border-width: 2px 2px 50px 2px;
 border-radius: 100%;
 position: relative;
}
 
#yin-yang:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 0;
 background: #eee;
 border: 18px solid red;
 border-radius: 100%;
 width: 12px;
 height: 12px;
}
 
#yin-yang:after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 background: red;
 border: 18px solid #eee;
 border-radius:100%;
 width: 12px;
 height: 12px;
}

当然，颜色什么的，可以随便改啦~

二、鸡蛋

再画一个可爱的鸡蛋~~~像这样：

代码仅仅几句话：

#egg {
 display:block;
 width: 126px;
 height: 180px;
 background-color: red;
 -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
 border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

三、最后画一个弯弯的月亮~

长这样：

代码非常非常少：

#moon {

width: 80px;

height: 80px;

border-radius: 50%;

box-shadow: 15px 15px 0 0 red;

}

是不是很神奇？不敢相信这几句代码居然有这样的功力？

那就打开电脑，按照我之前讲的方法创建一个html试试吧~

不知道怎么创建的小伙伴看这里>>css3制作图形大全：简单几句代码画出漂亮的图形，一起来看看吧~

avaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中，有两种方式：
1.内部方式
内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中，示例代码如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
   <script>
     alert('嗨，欢迎来传智播学习前端技术！')
   </script>
 </body>
 </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 <script>标签的 <src>属性引入，示例代码如下：

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基础 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 标签使用 src 属性引入了某 .js 文件，那么标签的代码会被忽略！！！如下代码所示：

在线咨询

上一篇：JS：获取页面传参，如何指定名称获取？或者全都要？
下一篇：excel表格竖排怎样改横排

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商