note

1.线性渐变:

background: -webkit-gradient(linear, 0 0, 100 100, from(yellow), to(blue));

/*渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(red))
结束的颜色? (to(blue))*/

2.文字倒影:

方法一: -webkit-box-reflect: below 1px -webkit-gradient(linear,0 20%,0 100%,from(transparent),color-stop(0, transparent),to(#000));

方法二: -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 20%,rgba(255,255,255,.3));


3.文本阴影:

text-shadow:5px 2px 6px #000;


4.动画过度:

img:hover{
-webkit-animation: 6s effect infinite;                  //forwards
  }
@-webkit-keyframes effect {
  10% { -webkit-transform:rotate(60deg);}
  20% { -webkit-transform:rotate(-120deg);}
  30% { -webkit-transform:rotate(180deg);}
  40% { -webkit-transform:rotate(-240deg);}
  50% { -webkit-transform:rotate(300deg);}
  100% { -webkit-transform:rotate(-360deg);}
  }

5.border-image


6.跑马灯

marquee


7.鼠标移动文本框提示内容消失

placeholder


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值