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

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

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

点击下载预览效果

更多>

最新下载

jQuery悬停图片变色放大特效

jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码。

0 2026-01-14

纯CSS3绘制2018英文动画特效

纯CSS3绘制2018英文动画特效是一款纯CSS3实现的2018新年快乐文字动画特效。

0 2026-01-14

Bootstrap复选框样式美化特效

Bootstrap复选框样式美化特效是一款基于jQuery实现的bootstrap美化单复选框特效代码。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-01-14

CSS3实现水位充满文字特效

CSS3实现水位充满文字特效是一款既是Loading特效也是文字特效，Loading动画开始时，文字中的水位渐渐上升，为了模拟水位上升的真实效果，水面还会波浪浮动，当Loading动画结束时，文字中的水位又会渐渐退去，动画效果和上升类似，这样周而复始，从而达到很酷HTML5 Loading动画效果。

0 2026-01-14

超酷CSS3发光搜索框表单提交

超酷CSS3发光的搜索框表单提交是一款html5+css3实现的超酷绿色发光搜索表单。

0 2026-01-14

animate.css制作酷炫文字特效

animate.css制作酷炫文字特效是一款基于jQuery+CSS3实现的文字动画插件。

0 2026-01-14

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

15526 2025-08-28
CSS3 教程

1544703 2025-08-27
Rust 教程

22807 2025-08-27
Vue 教程

25280 2025-08-22
PostgreSQL 教程

21858 2025-08-21
Git 教程

8870 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>