首页 > 代码库 > css3-radio不规则形状动画
css3-radio不规则形状动画
利用质数做随机图形
参考网站 http://2016.uxlondon.com/speakers
.list { margin: 10px; display: inline-block; width: 168px; height: 168px; border: 4px solid #00C7E9; border-radius: 87% 91% 98% 100%; -webkit-transition: all .35s; transition: all .35s; overflow: hidden; } .list img{ min-height: 100%; width: -webkit-calc(50% + 50%); height: -webkit-calc(50% + 50%); object-fit: cover; background: #ddd; } .list:hover { border-radius: 95% 70% 100% 80%; transform: rotate(-2deg); } .list:nth-child(2n+1) { border-radius: 59% 52% 56% 59%; transform: rotate(-6deg); } .list:nth-child(2n+1):hover { border-radius: 51% 67% 56% 64%; transform: rotate(-4deg); } .list:nth-child(3n+2) { border-radius: 84% 94% 83% 72%; transform: rotate(5deg); } .list:nth-child(3n+2):hover { border-radius: 69% 64% 53% 70%; transform: rotate(0deg); } .list:nth-child(5n+3) { border-radius: 73% 100% 82% 100%; transform: rotate(7deg); } .list:nth-child(5n+3):hover { border-radius: 73%; transform: rotate(7deg); } .list:nth-child(7n+5) { border-radius: 93% 90% 85% 78%; transform: rotate(-2deg); } .list:nth-child(7n+5):hover { border-radius: 53% 70% 85% 68%; transform: rotate(-2deg); } .list:nth-child(11n+7) { border-radius: 68% 68% 83% 53%; transform: rotate(-2deg); } .list:nth-child(11n+7):hover { border-radius: 58% 98% 78% 83%; transform: rotate(3deg); }
<div class="constr"> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> <div class="list"><img src="../test1.jpg"></div> </div>
css3-radio不规则形状动画
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。