您现在的位置是:首页 > WEB > html+csshtml+css

有趣的侧边栏目卡片

阿龙2019-08-24【html+css】人已围观

简介利用css中的“clip-path”实现侧边栏目卡片的效果。

利用css中的“clip-path”实现侧边栏目卡片的效果。

html:
<div class="container">
<div class="inner">
<h1>阿龙</h1>
<p>再蓝的天,有也风雨的一面。</p>
</div>
</div>
css:
.inner {
background: #09c999;
padding: 1em;
border-radius: 10px;
width: 250px;
clip-path: circle(30% at 5% 50%);
transition: all .5s ease-in-out;
cursor: pointer;
}
.inner:hover {
clip-path: circle(100%);
background: #00B6FF;
}

.inner p {
color: white;
font-size: 14px;
}
效果可以用菜鸟工具查看,把所有代码复制进去就行了。

最后补充一下,关于“clip-path”这个属性更多样式参考:“https://www.cnblogs.com/xiaohuochai/p/7509225.html

Tags:侧边栏目卡片

支持一下! ()

文章评论

    共有条评论大侠,来闹两句...

    请输入昵称:

    填入验证码:

打赏本站

  • 如果您觉得站长文章不错,可以通过扫码支付打赏一下哦!
  • 微信扫码:您说多少就多少~
  • 支付宝扫码:您说多少就多少~