当前位置：首页 > 下载站 > js特效 > jQuery特效 > CSS3 SVG 3D立体阴影文字动画特效

CSS3 SVG 3D立体阴影文字动画特效

分类: js特效 / jQuery特效	发布时间: 2018-02-23	访问量: 1682
下载量: 19

点击下载预览效果

更多>

最新下载

谷歌浏览器插件IconFont检查器自动获取当前页面使用到的iconfont库，预览、修改、使用

IconFont检查器是一款用来自动获取当前页面使用到的iconfont库工具，可以用来预览、修改和使用，适用于 Google Chrome 和 Microsoft Edge 浏览器。主要功能：检查字体图标：识别和分析网站上使用的所有字体图标。显示字体名称和字符代码：显示每个字体图标的字体名称和字符代码。查看 CSS 规则：显示用于设置字体图标的 CSS 规则。复制字体代码：轻松复制字体图标的代码

0 2025-12-24

jQuery手机账号管理表单代码

jQuery手机账号管理表单代码是一款手机端账号管理个人信息，修改资料，修改密码表单TAB切换页面模板。

0 2025-12-24

jQuery文字长阴影效果插件longShadow

jQuery文字长阴影效果插件longShadow是一款可以制作各种文字长阴影效果，可以配置长阴影的颜色，大小和方向等。

0 2025-12-24

横向的图文手风琴布局代码

jQuery基于css3制作精美黑色的横向手风琴布局滑动切换效果，结合大图和标题文字切换。这是一款大气的企业品牌产品图文手风琴布局代码。

0 2025-12-24

网页顶部智能固定导航特效

js黑色的网页顶部固定层导航，页面上下滚动导航智能显示或隐藏效果代码。适用于网页导航交互特效。

0 2025-12-24

谷歌浏览器插件Color Picker for Chrome™ 在网页上拾取颜色获取颜色HEX/RGB代码

Color Picker for Chrome™ 是一款HEX，RGB颜色选择器，高级滴管，能够在任何页面上拾取颜色，获得颜色的HEX/RGB代码。如何使用插件呢？✓ 安装后，打开您想要获取颜色代码的任何网页✓ 然后单击扩展图标，它将启用颜色选择器图标✓ 再点击所需拾取颜色的地方，它将以HEX和RGB选项为您提供该颜色代码的信息✓ 复制代码并复制相同的步骤以查找另一个颜色代码。Color Pick

0 2025-12-24

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

14413 2025-08-28
CSS3 教程

1541397 2025-08-27
Rust 教程

22096 2025-08-27
Vue 教程

24600 2025-08-22
PostgreSQL 教程

21288 2025-08-21
Git 教程

8388 2025-08-21

CSS3 SVG 3D立体阴影文字动画特效

通过CSS3自定义checkbox样式来实现的一款CSS3立体感灯光开关按钮动画特效，切换开关可以改变页面背景颜色，从而模拟灯光的开启和关闭。

<defs>
<filter id="drop-stroke-shadow">
<fegaussianblur in="SourceAlpha" stddeviation="10"></fegaussianblur>
</filter>
<symbol id="stroke">
<text x="50%" y="67%" fill="none" stroke-width=".035em" stroke-linecap="round" stroke-linejoin="round" paint-order="stroke fill" text-anchor="middle">Shaded</text>
</symbol>
<symbol id="fill">
<text x="50%" y="60%" text-anchor="middle">Shaded</text>
</symbol>
</defs>
<g class="svg-text__shaded__stroke" stroke="#00cccc">
<use y="5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke" opacity="0.5" filter="url(#drop-stroke-shadow)"></use>
<use y="3%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke"></use>
<use y="2%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke"></use>
<use y="1%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroke" stroke="cyan"></use>
</g>
<g fill="#e6e6e6">
<use class="svg-text__shaded" y="7%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
<use y="6.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
<use y="6%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
<use y="5.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
<use y="5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
<use y="4.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
<use y="4%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill"></use>
<use y="3.5%" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#fill" fill="white"></use>
</g>