z-index
:
3
;
-webkit-animation
:
show2 3s ease-in-out
;
animation
:
show2 3s ease-in-out
;
@-webkit-keyframes show2
{
opacity
:
0
;
width
:
0
;
100%
{
opacity
:
1
;
width
:
407px
;
@keyframes show2
{
opacity
:
0
;
width
:
0
;
100%
{
opacity
:
1
;
width
:
407px
;
</
style
>
</
head
>
<
div
class
="bg"
>
<
div
class
="line"
></
div
>
</
div
>
</
body
>
</
html
>
转载于:https://www.cnblogs.com/U-can/p/5430100.html
用css3实现宽度渐显效果，记录一下效果：<!DOCTYPE html><html> <head> <meta charset="UTF-8"/> <title>宽度渐变动画</title> <style> ...
效果描述：
在我们的网页里，经常碰到这样的情况：
宽度
不固定，但是我们又需要
渐变
的颜色来显示，通常是用一个背景图片重复，缺点就是无法控制
宽度
问题，作为一个不喜欢用图片的人来说，简直无法忍受啊。现在好了，完全可以使用
css3
的代码来
实现
渐变
，左侧定义一个颜色，右侧也设置一个颜色，并分别设置不同的透明度即可
使用方法：
关键在css样式中：10-13行
-ms- -ms-box-shadow IE浏览器专属的CSS属性需添加-ms-前缀
-moz- -moz-box-shadow 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
-o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀
-webkit- -webkit-box-shadow 所有基于Web...
width:1px;
height:486px;
background:linear-gradient(244deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
左边细右边粗的
渐变
直线：
html:
<div cla
1、向下/向上/向左/向右/对角方向
语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction属性值：
to bottom
默认值，从上到下
to top
to left
以前我们如果想要做到一个颜色到另一个颜色的
渐变
（Gradients）效果，需要用ps之类的应用程序做出一张背景图片，然后放到元素上，这样子不仅麻烦，而且不利于代码的维护，当用户界面大小发生改变时，显示效果也不好
CSS3
提供给了我们一种
渐变
绘制方式，这样我们就不需要去下载文件之类的，当界面发生改变之后，由于是浏览器去绘制的，显示效果也比较好
线性
渐变
（Linear Gradients）向上 |...
