淘宝客网站域名聊城今日头条最新

jquery创建css

在我以前的文章中，我们使用多个文本阴影在CSS3中创建了3D文本 。 它可能是有效的，但产生这种效果却是一次繁琐的反复试验。

我们将使用jQuery插件使生活更轻松。 它将进行艰苦的工作，并生成冗长CSS3代码，例如：

text-shadow:-1px 1px 0 #ddd,-2px 2px 0 #c8c8c8,-3px 3px 0 #ccc,-4px 4px 0 #b8b8b8,-4px 4px 0 #bbb,0px 1px 1px rgba(0,0,0,.4),0px 2px 2px rgba(0,0,0,.3),-1px 3px 3px rgba(0,0,0,.2),-1px 5px 5px rgba(0,0,0,.1),-2px 8px 8px rgba(0,0,0,.1),-2px 13px 13px rgba(0,0,0,.1);

转至插件演示页面以查看示例并下载代码。

如何使用插件

jQuery和插件应包含在您的页面上-理想情况下应在</ body>标记之前，例如

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="jquery.text3d.js"></script>

要应用默认的3D效果，请将“ text3d”类设置为任何HTML元素，例如

<p class="text3d">3D Text</p>

另外，您可以为JavaScript中的任意数量的元素指定自定义3D效果，例如

<script>
$("#custom").text3d({depth: 6,angle: 135,color: "#aaa",lighten: -0.1,shadowDepth: 30,shadowAngle: 45,shadowOpacity: 0.2
});
</script>

哪里：

• depth是3D拉伸的像素数
• angle是3D拉伸角度，即90垂直向下
• color是3D挤出颜色
• 变亮是挤出的顶部和底部之间的颜色差异，例如-0.1表示颜色将变暗10％
• shadowDepth是阴影从文本延伸的大约像素数
• shadowAngle是阴影落下的角度
• shadowOpacity是介于0（无阴影）和1（深黑色）之间的初始不透明度。 请注意，多个阴影彼此重叠，因此您很少需要大于0.4的数字。

jQuery插件代码

编写或使用jQuery插件的任何人都将熟悉我们JavaScript模板：

(function($) {// jQuery plugin definition$.fn.text3d = function(opts) {// default configurationvar config = $.extend({}, {depth: 5,angle: 100,color: "#ddd",lighten: -0.15,shadowDepth: 10,shadowAngle: 80,shadowOpacity: 0.3}, opts);// to radiansconfig.angle = config.angle * Math.PI / 180;config.shadowAngle = config.shadowAngle * Math.PI / 180;// ... main code ...// initializationthis.each(function() {TextShadow(this);});return this;};})(jQuery);

config对象是用一组默认属性定义的，这些默认属性可以被覆盖。 angle和shadowAngle采用度数，因此将它们转换为弧度。 jQuery选择器中的每个HTML元素都传递给TextShadow（）函数…

// create text shadow
function TextShadow(e) {var s = "", i, f, x, y, c;// 3D effectfor (i = 1; i <= config.depth; i++) {x = Math.round(Math.cos(config.angle) * i);y = Math.round(Math.sin(config.angle) * i);c = ColorLuminance(config.color, (i-1)/(config.depth-1)*config.lighten);s += x+"px "+y+"px 0 "+c+",";}// shadowfor (f = 1, i = 1; f <= config.shadowDepth; i++) {f = f+i;x = Math.round(Math.cos(config.shadowAngle) * f);y = Math.round(Math.sin(config.shadowAngle) * f);c = config.shadowOpacity - ((config.shadowOpacity - 0.1) * i/config.shadowDepth);s += x+"px "+y+"px "+f+"px rgba(0,0,0,"+c+"),";}e.style.textShadow = s.substr(0, s.length-1);		
}

该函数使用定义的参数构建文本阴影字符串，并将其应用于当前元素。 请注意，3D挤出颜色是使用ColorLuminance（）函数生成的-有关更多信息，请参阅如何在JavaScript中计算较浅或较深的十六进制颜色 。

最后，在我们的插件文件末尾包含以下代码，以将默认3D效果应用于具有“ text3d”类的所有元素。

jQuery(function() {jQuery(".text3d").text3d();
});

希望对你有帮助。 如演示页面所示，还可以采用CSS3过渡来创建3D动画。

如果您创建任何有趣的示例，请在下面的评论部分中发布您的URL。

翻译自: https://www.sitepoint.com/css3-3d-text-jquery-plugin/

jquery创建css