Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Square
Circle
Triangle
Arrow
css
body { background: #292929; margin: 0; padding: 0; width: 100vw; height: 100vh; position: relative; overflow: hidden; } body .container { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } body .item { position: relative; } body .item:not(:last-child ) { margin-bottom: 2vh; border-bottom: solid 1px #ecf0f1; } body .title { font-size: 8vh; text-transform: uppercase; color: #95a5a6; margin: 0; } body .title:before { content: attr(data-title); color: #ecf0f1; } body .preview { width: 100%; height: 8vh; } body .preview:before { content: ''; background: #ecf0f1; } body .preview:after { color: #ecf0f1; content: attr(data-preview); font-size: 1.3vh; line-height: 8vh; } body .title, body .preview { text-align: center; text-transform: uppercase; position: relative; } body .title:before, body .preview:before, body .title:after, body .preview:after { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; -webkit-transition: -webkit-clip-path 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: -webkit-clip-path 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: clip-path 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: clip-path 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-clip-path 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); } body .item--square .title:before, body .item--square .preview:before { -webkit-clip-path: polygon(0 0, 0 0, -50px 100%, 0 100%); clip-path: polygon(0 0, 0 0, -50px 100%, 0 100%); } body .item--square .title:hover:before, body .item--square .preview:hover:before { -webkit-clip-path: polygon(0 0, calc(100% + 50px) 0, 100% 100%, 0 100%); clip-path: polygon(0 0, calc(100% + 50px) 0, 100% 100%, 0 100%); } body .item--circle .title:before, body .item--circle .preview:before { -webkit-clip-path: circle(0% at 0% 50%); clip-path: circle(0% at 0% 50%); } body .item--circle .title:hover:before, body .item--circle .preview:hover:before { -webkit-clip-path: circle(150% at 0% 50%); clip-path: circle(150% at 0% 50%); } body .item--triangle .title:before, body .item--triangle .preview:before { -webkit-clip-path: polygon(50% 100%, 0% calc(100% + 50px), 0% 200%, 100% 200%, 100% calc(100% + 50px)); clip-path: polygon(50% 100%, 0% calc(100% + 50px), 0% 200%, 100% 200%, 100% calc(100% + 50px)); -webkit-transition-duration: 0.4s; transition-duration: 0.4s; } body .item--triangle .title:hover:before, body .item--triangle .preview:hover:before { -webkit-clip-path: polygon(50% -50px, 0% 0%, 0% 100%, 100% 100%, 100% 0%); clip-path: polygon(50% -50px, 0% 0%, 0% 100%, 100% 100%, 100% 0%); } body .item--arrow .title:before, body .item--arrow .preview:before { -webkit-clip-path: polygon(-20px 0%, 0px 50%, -20px 100%, -60px 100%, -40px 50%, -60px 0%); clip-path: polygon(-20px 0%, 0px 50%, -20px 100%, -60px 100%, -40px 50%, -60px 0%); -webkit-transition-duration: 0s; transition-duration: 0s; } body .item--arrow .title:hover:before, body .item--arrow .preview:hover:before { -webkit-clip-path: polygon(calc(100% + 40px) 0%, calc(100% + 60px) 50%, calc(100% + 40px) 100%, 100% 100%, calc(100% + 20px) 50%, 100% 0%); clip-path: polygon(calc(100% + 40px) 0%, calc(100% + 60px) 50%, calc(100% + 40px) 100%, 100% 100%, calc(100% + 20px) 50%, 100% 0%); -webkit-transition-duration: 0.8s; transition-duration: 0.8s; }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS悬停动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号