css3-radio不規則形狀動畫

標籤：div   ansi   code   技術   margin   不規則   form   inline   規則   

 

利用質數做隨機圖形

參考網站 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不規則形狀動畫