0°

教程:SVG+CSS把返回顶部按钮变成一根可长可短的大鸡巴

qq%e6%88%aa%e5%9b%be20161123200627

qq%e5%9b%be%e7%89%8720161123200417

本站以前的返回顶部是这样的,看着贼鸡巴烦。

贼鸡巴,鸡巴

灵感就来了。。。

qq%e6%88%aa%e5%9b%be20161123200627

这个东西的来历。。。

1 2 3 4

代码。。。

HTML部分

<a class="back2top">
<svg version="1.1" id="jj" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;stroke:#999999;stroke-width:5;stroke-miterlimit:10;}
</style>
<path class="st0" d="M138.9,187.1H71.8V44.8c0-4.1,3.4-7.5,7.5-7.5h52.1c4.1,0,7.5,3.4,7.5,7.5V187.1z"/>
<path class="st0" d="M138.9,34.9c0,15.9-15,20.4-33.5,20.4s-33.6-4.5-33.6-20.4c0-14.5,9.9-26.6,26.2-28.6c1.6-0.2,5.9,1.2,7.5,1.2
	c2,0,5.6-1.3,7.5-1.1C128.8,8.8,138.9,20.6,138.9,34.9z"/>
<polygon class="st0" points="105.5,23.4 105.5,19.4 105.5,8.7 105.5,12.7 "/>
<path class="st0" d="M65.5,195L65.5,195c-16.5,0-29.9-13.4-29.9-29.9l0,0c0-16.5,13.4-29.9,29.9-29.9l0,0
	c16.5,0,29.9,13.4,29.9,29.9l0,0C95.4,181.6,82,195,65.5,195z"/>
<path class="st0" d="M146,195L146,195c-16.5,0-29.9-13.4-29.9-29.9l0,0c0-16.5,13.4-29.9,29.9-29.9l0,0c16.5,0,29.9,13.4,29.9,29.9
	l0,0C175.9,181.6,162.5,195,146,195z"/>
</svg>
<span>
	<svg version="1.1" id="jj" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;stroke:#999999;stroke-width:5;stroke-miterlimit:10;}
</style>
<path class="st0" d="M138.9,187.1H71.8V44.8c0-4.1,3.4-7.5,7.5-7.5h52.1c4.1,0,7.5,3.4,7.5,7.5V187.1z"/>
<path class="st0" d="M138.9,34.9c0,15.9-15,20.4-33.5,20.4s-33.6-4.5-33.6-20.4c0-14.5,9.9-26.6,26.2-28.6c1.6-0.2,5.9,1.2,7.5,1.2
	c2,0,5.6-1.3,7.5-1.1C128.8,8.8,138.9,20.6,138.9,34.9z"/>
<polygon class="st0" points="105.5,23.4 105.5,19.4 105.5,8.7 105.5,12.7 "/>
<path class="st0" d="M65.5,195L65.5,195c-16.5,0-29.9-13.4-29.9-29.9l0,0c0-16.5,13.4-29.9,29.9-29.9l0,0
	c16.5,0,29.9,13.4,29.9,29.9l0,0C95.4,181.6,82,195,65.5,195z"/>
<path class="st0" d="M146,195L146,195c-16.5,0-29.9-13.4-29.9-29.9l0,0c0-16.5,13.4-29.9,29.9-29.9l0,0c16.5,0,29.9,13.4,29.9,29.9
	l0,0C175.9,181.6,162.5,195,146,195z"/>
</svg>
 
</span>
</a>

CSS部分

.back2top {z-index:99;position:fixed;right:40px;bottom:60px;width: 90px;height: 40px;cursor:pointer;transition: 2s all;}
.back2top svg {width: 100%;height: auto;}
.back2top span {width: 90px;height: 45px;position: absolute;top: 0;left: 0;overflow: hidden;display: block;}
.back2top:hover span {transform: translateY(-15px);}
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论