文字加载...动画

html

创新互联是一家专注于成都网站设计、成都网站制作与策划设计,白云网站建设哪家好?创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:白云等地区。白云做网站价格咨询:13518219792

 
 
 
 

  
  
  
  
正在加载中...
 
 
 
 

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写，也很简单的。

 
 
 
 

  
  
  
  
添加图片
  
  
  
  
.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代码

 
 
 
 

  
  
  
  
不规则的投影