10.14课堂内容

最新推荐文章于 2025-05-13 09:23:55 发布

weixin_30878501

最新推荐文章于 2025-05-13 09:23:55 发布

阅读量43

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chenjiren0109/p/4025317.html

本文深入探讨了CSS中颜色渐变、阴影效果、背景填充、触动效果和翻转效果的实现方法，提供了丰富的示例代码，帮助开发者掌握CSS高级布局与动画技巧。

颜色渐变：

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

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

阴影效果：

text-shadow:10px 10px 5px blue;

X轴 Y轴模糊度颜色

背景填充：

background:-webkit-gradient(linear,left top,left bottom,from(#faa));

background:#faa;

触动效果：

.xx:hover{
/*width: 100px;*/
/*height: 50px;*/
-webkit-animation: 1.5s zzq infinite;
}
@-webkit-keyframes zzq {
from { -webkit-transform: none;
/*-webkit-transform:rotate(10deg);*/}
25% { -webkit-transform:rotate(-30deg);}
/*50% { -webkit-transform:rotate(0deg);}*/
75%{ -webkit-transform:rotate(30deg);}
/*100%{ -webkit-transform:rotate(30deg);}*/

翻转效果：

xx(如div) {
/*/翻转*/
-webkit-box-reflect:below -20px;

　　　　　　　　　　　　　和文字距离

}
.xx {
/*/翻转*/
-webkit-box-reflect:below 2px -webkit-linear-gradient(transparent,transparent 20%,rgba(10,10,10,0.2));

转载于:https://www.cnblogs.com/chenjiren0109/p/4025317.html