<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>鼠标经过图片变形 </title> <!-- <script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script> --> <style> .speakers-list { -webkit-box-align: stretch; -webkit-align-items: stretch; -moz-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: -80px } .speakers-list li { min-width: 33%; margin-bottom: 80px; text-align: center } .speakers-list li .pic { margin: 0 auto; width: 160px; height: 160px } .speakers-list li .pic img { display: block; min-height: 100%; max-width: 100%; opacity: .8; border: 2px solid #ddd; -webkit-border-top-left-radius: 87%; -moz-border-radius-topleft: 87%; border-top-left-radius: 87%; -webkit-border-top-right-radius: 91%; -moz-border-radius-topright: 91%; border-top-right-radius: 91%; -webkit-border-bottom-left-radius: 100%; -moz-border-radius-bottomleft: 100%; border-bottom-left-radius: 100%; -webkit-border-bottom-right-radius: 98%; -moz-border-radius-bottomright: 98%; border-bottom-right-radius: 98%; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s } .speakers-list li .pic img:hover { -webkit-border-top-left-radius: 95%; -moz-border-radius-topleft: 95%; border-top-left-radius: 95%; -webkit-border-top-right-radius: 70%; -moz-border-radius-topright: 70%; border-top-right-radius: 70%; -webkit-border-bottom-left-radius: 80%; -moz-border-radius-bottomleft: 80%; border-bottom-left-radius: 80%; -webkit-border-bottom-right-radius: 100%; -moz-border-radius-bottomright: 100%; border-bottom-right-radius: 100%; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg) } .speakers-list li .info { text-align: center } .speakers-list li .info dt { margin-top: 20px; font-family: "DIN"; font-size: 26px; color: #4a4a4a } .speakers-list li .info dd { margin-top: 6px; font-size: 14px; color: #666 } .speakers-list li:nth-child(odd) img { -webkit-border-top-left-radius: 59%; -moz-border-radius-topleft: 59%; border-top-left-radius: 59%; -webkit-border-top-right-radius: 52%; -moz-border-radius-topright: 52%; border-top-right-radius: 52%; -webkit-border-bottom-left-radius: 59%; -moz-border-radius-bottomleft: 59%; border-bottom-left-radius: 59%; -webkit-border-bottom-right-radius: 56%; -moz-border-radius-bottomright: 56%; border-bottom-right-radius: 56%; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg) } .speakers-list li:nth-child(odd) img:hover { -webkit-border-top-left-radius: 51%; -moz-border-radius-topleft: 51%; border-top-left-radius: 51%; -webkit-border-top-right-radius: 67%; -moz-border-radius-topright: 67%; border-top-right-radius: 67%; -webkit-border-bottom-left-radius: 64%; -moz-border-radius-bottomleft: 64%; border-bottom-left-radius: 64%; -webkit-border-bottom-right-radius: 56%; -moz-border-radius-bottomright: 56%; border-bottom-right-radius: 56%; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg) } .speakers-list li:nth-child(3n+2) img { -webkit-border-top-left-radius: 84%; -moz-border-radius-topleft: 84%; border-top-left-radius: 84%; -webkit-border-top-right-radius: 94%; -moz-border-radius-topright: 94%; border-top-right-radius: 94%; -webkit-border-bottom-left-radius: 72%; -moz-border-radius-bottomleft: 72%; border-bottom-left-radius: 72%; -webkit-border-bottom-right-radius: 83%; -moz-border-radius-bottomright: 83%; border-bottom-right-radius: 83%; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg) } .speakers-list li:nth-child(3n+2) img:hover { -webkit-border-top-left-radius: 69%; -moz-border-radius-topleft: 69%; border-top-left-radius: 69%; -webkit-border-top-right-radius: 64%; -moz-border-radius-topright: 64%; border-top-right-radius: 64%; -webkit-border-bottom-left-radius: 70%; -moz-border-radius-bottomleft: 70%; border-bottom-left-radius: 70%; -webkit-border-bottom-right-radius: 53%; -moz-border-radius-bottomright: 53%; border-bottom-right-radius: 53%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) } .speakers-list li:nth-child(5n+3) img { -webkit-border-top-left-radius: 73%; -moz-border-radius-topleft: 73%; border-top-left-radius: 73%; -webkit-border-top-right-radius: 100%; -moz-border-radius-topright: 100%; border-top-right-radius: 100%; -webkit-border-bottom-left-radius: 100%; -moz-border-radius-bottomleft: 100%; border-bottom-left-radius: 100%; -webkit-border-bottom-right-radius: 82%; -moz-border-radius-bottomright: 82%; border-bottom-right-radius: 82% } .speakers-list li:nth-child(5n+3) img,.speakers-list li:nth-child(5n+3) img:hover { -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg) } .speakers-list li:nth-child(5n+3) img:hover { -webkit-border-top-left-radius: 73%; -moz-border-radius-topleft: 73%; border-top-left-radius: 73%; -webkit-border-top-right-radius: 70%; -moz-border-radius-topright: 70%; border-top-right-radius: 70%; -webkit-border-bottom-left-radius: 80%; -moz-border-radius-bottomleft: 80%; border-bottom-left-radius: 80%; -webkit-border-bottom-right-radius: 82%; -moz-border-radius-bottomright: 82%; border-bottom-right-radius: 82% } .speakers-list li:nth-child(7n+5) img { -webkit-border-top-left-radius: 93%; -moz-border-radius-topleft: 93%; border-top-left-radius: 93%; -webkit-border-top-right-radius: 90%; -moz-border-radius-topright: 90%; border-top-right-radius: 90%; -webkit-border-bottom-left-radius: 78%; -moz-border-radius-bottomleft: 78%; border-bottom-left-radius: 78%; -webkit-border-bottom-right-radius: 85%; -moz-border-radius-bottomright: 85%; border-bottom-right-radius: 85% } .speakers-list li:nth-child(7n+5) img,.speakers-list li:nth-child(7n+5) img:hover { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg) } .speakers-list li:nth-child(7n+5) img:hover { -webkit-border-top-left-radius: 53%; -moz-border-radius-topleft: 53%; border-top-left-radius: 53%; -webkit-border-top-right-radius: 70%; -moz-border-radius-topright: 70%; border-top-right-radius: 70%; -webkit-border-bottom-left-radius: 68%; -moz-border-radius-bottomleft: 68%; border-bottom-left-radius: 68%; -webkit-border-bottom-right-radius: 85%; -moz-border-radius-bottomright: 85%; border-bottom-right-radius: 85% } .speakers-list li:nth-child(11n+7) img { -webkit-border-top-left-radius: 68%; -moz-border-radius-topleft: 68%; border-top-left-radius: 68%; -webkit-border-top-right-radius: 68%; -moz-border-radius-topright: 68%; border-top-right-radius: 68%; -webkit-border-bottom-left-radius: 53%; -moz-border-radius-bottomleft: 53%; border-bottom-left-radius: 53%; -webkit-border-bottom-right-radius: 83%; -moz-border-radius-bottomright: 83%; border-bottom-right-radius: 83%; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg) } .speakers-list li:nth-child(11n+7) img:hover { -webkit-border-top-left-radius: 58%; -moz-border-radius-topleft: 58%; border-top-left-radius: 58%; -webkit-border-top-right-radius: 98%; -moz-border-radius-topright: 98%; border-top-right-radius: 98%; -webkit-border-bottom-left-radius: 83%; -moz-border-radius-bottomleft: 83%; border-bottom-left-radius: 83%; -webkit-border-bottom-right-radius: 78%; -moz-border-radius-bottomright: 78%; border-bottom-right-radius: 78%; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg) } @media screen and (max-width:768px) { .speakers .bd { width: 720px } } @media screen and (max-width:480px) { .speakers .bd { width: 100% } .speakers-list li { margin-bottom: 40px; width: 100% } .speakers-list li .info dt { font-size: 16px } .speakers-list li .info dd { font-size: 12px } } .list-speakers { margin: 0 auto; width: 1000px; padding-right: -65px } .list-speakers li { float: left; margin: 0 65px 50px; min-width: 200px } .list-speakers li .pic { position: relative; margin: 0 auto; width: 160px; height: 160px } .list-speakers li .pic img { display: block; min-height: 100%; max-width: 100%; opacity: .8; border: 2px solid #ddd; -webkit-border-top-left-radius: 87%; -moz-border-radius-topleft: 87%; border-top-left-radius: 87%; -webkit-border-top-right-radius: 91%; -moz-border-radius-topright: 91%; border-top-right-radius: 91%; -webkit-border-bottom-left-radius: 100%; -moz-border-radius-bottomleft: 100%; border-bottom-left-radius: 100%; -webkit-border-bottom-right-radius: 98%; -moz-border-radius-bottomright: 98%; border-bottom-right-radius: 98%; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s } .list-speakers li .pic img:hover { -webkit-border-top-left-radius: 95%; -moz-border-radius-topleft: 95%; border-top-left-radius: 95%; -webkit-border-top-right-radius: 70%; -moz-border-radius-topright: 70%; border-top-right-radius: 70%; -webkit-border-bottom-left-radius: 80%; -moz-border-radius-bottomleft: 80%; border-bottom-left-radius: 80%; -webkit-border-bottom-right-radius: 100%; -moz-border-radius-bottomright: 100%; border-bottom-right-radius: 100%; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg) } .list-speakers li:nth-child(odd) img { -webkit-border-top-left-radius: 59%; -moz-border-radius-topleft: 59%; border-top-left-radius: 59%; -webkit-border-top-right-radius: 52%; -moz-border-radius-topright: 52%; border-top-right-radius: 52%; -webkit-border-bottom-left-radius: 59%; -moz-border-radius-bottomleft: 59%; border-bottom-left-radius: 59%; -webkit-border-bottom-right-radius: 56%; -moz-border-radius-bottomright: 56%; border-bottom-right-radius: 56%; -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); transform: rotate(-6deg) } .list-speakers li:nth-child(odd) img:hover { -webkit-border-top-left-radius: 51%; -moz-border-radius-topleft: 51%; border-top-left-radius: 51%; -webkit-border-top-right-radius: 67%; -moz-border-radius-topright: 67%; border-top-right-radius: 67%; -webkit-border-bottom-left-radius: 64%; -moz-border-radius-bottomleft: 64%; border-bottom-left-radius: 64%; -webkit-border-bottom-right-radius: 56%; -moz-border-radius-bottomright: 56%; border-bottom-right-radius: 56%; -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); transform: rotate(-4deg) } .list-speakers li:nth-child(3n+2) img { -webkit-border-top-left-radius: 84%; -moz-border-radius-topleft: 84%; border-top-left-radius: 84%; -webkit-border-top-right-radius: 94%; -moz-border-radius-topright: 94%; border-top-right-radius: 94%; -webkit-border-bottom-left-radius: 72%; -moz-border-radius-bottomleft: 72%; border-bottom-left-radius: 72%; -webkit-border-bottom-right-radius: 83%; -moz-border-radius-bottomright: 83%; border-bottom-right-radius: 83%; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg) } .list-speakers li:nth-child(3n+2) img:hover { -webkit-border-top-left-radius: 69%; -moz-border-radius-topleft: 69%; border-top-left-radius: 69%; -webkit-border-top-right-radius: 64%; -moz-border-radius-topright: 64%; border-top-right-radius: 64%; -webkit-border-bottom-left-radius: 70%; -moz-border-radius-bottomleft: 70%; border-bottom-left-radius: 70%; -webkit-border-bottom-right-radius: 53%; -moz-border-radius-bottomright: 53%; border-bottom-right-radius: 53%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg) } .list-speakers li:nth-child(5n+3) img { -webkit-border-top-left-radius: 73%; -moz-border-radius-topleft: 73%; border-top-left-radius: 73%; -webkit-border-top-right-radius: 100%; -moz-border-radius-topright: 100%; border-top-right-radius: 100%; -webkit-border-bottom-left-radius: 100%; -moz-border-radius-bottomleft: 100%; border-bottom-left-radius: 100%; -webkit-border-bottom-right-radius: 82%; -moz-border-radius-bottomright: 82%; border-bottom-right-radius: 82% } .list-speakers li:nth-child(5n+3) img,.list-speakers li:nth-child(5n+3) img:hover { -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg) } .list-speakers li:nth-child(5n+3) img:hover { -webkit-border-top-left-radius: 73%; -moz-border-radius-topleft: 73%; border-top-left-radius: 73%; -webkit-border-top-right-radius: 70%; -moz-border-radius-topright: 70%; border-top-right-radius: 70%; -webkit-border-bottom-left-radius: 80%; -moz-border-radius-bottomleft: 80%; border-bottom-left-radius: 80%; -webkit-border-bottom-right-radius: 82%; -moz-border-radius-bottomright: 82%; border-bottom-right-radius: 82% } .list-speakers li:nth-child(7n+5) img { -webkit-border-top-left-radius: 93%; -moz-border-radius-topleft: 93%; border-top-left-radius: 93%; -webkit-border-top-right-radius: 90%; -moz-border-radius-topright: 90%; border-top-right-radius: 90%; -webkit-border-bottom-left-radius: 78%; -moz-border-radius-bottomleft: 78%; border-bottom-left-radius: 78%; -webkit-border-bottom-right-radius: 85%; -moz-border-radius-bottomright: 85%; border-bottom-right-radius: 85% } .list-speakers li:nth-child(7n+5) img,.list-speakers li:nth-child(7n+5) img:hover { -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg) } .list-speakers li:nth-child(7n+5) img:hover { -webkit-border-top-left-radius: 53%; -moz-border-radius-topleft: 53%; border-top-left-radius: 53%; -webkit-border-top-right-radius: 70%; -moz-border-radius-topright: 70%; border-top-right-radius: 70%; -webkit-border-bottom-left-radius: 68%; -moz-border-radius-bottomleft: 68%; border-bottom-left-radius: 68%; -webkit-border-bottom-right-radius: 85%; -moz-border-radius-bottomright: 85%; border-bottom-right-radius: 85% } .list-speakers li:nth-child(11n+7) img { -webkit-border-top-left-radius: 68%; -moz-border-radius-topleft: 68%; border-top-left-radius: 68%; -webkit-border-top-right-radius: 68%; -moz-border-radius-topright: 68%; border-top-right-radius: 68%; -webkit-border-bottom-left-radius: 53%; -moz-border-radius-bottomleft: 53%; border-bottom-left-radius: 53%; -webkit-border-bottom-right-radius: 83%; -moz-border-radius-bottomright: 83%; border-bottom-right-radius: 83%; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg) } .list-speakers li:nth-child(11n+7) img:hover { -webkit-border-top-left-radius: 58%; -moz-border-radius-topleft: 58%; border-top-left-radius: 58%; -webkit-border-top-right-radius: 98%; -moz-border-radius-topright: 98%; border-top-right-radius: 98%; -webkit-border-bottom-left-radius: 83%; -moz-border-radius-bottomleft: 83%; border-bottom-left-radius: 83%; -webkit-border-bottom-right-radius: 78%; -moz-border-radius-bottomright: 78%; border-bottom-right-radius: 78%; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg) } .list-speakers li .info { text-align: center } .list-speakers li .info dt { margin-top: 20px; font-family: "DIN"; font-size: 26px; color: #4a4a4a } .list-speakers li .info dd { margin-top: 6px; font-size: 14px; color: #666 } .list-speakers li:nth-child(3n) { margin-right: 0 } .list-speakers li:last-child { margin-bottom: 0 } @media screen and (max-width:768px) and (min-width:481px) { .list-speakers { width: 720px; padding-left: 40px } .list-speakers li { margin: 0 60px 50px } .list-speakers li:nth-child(3n) { margin-right: 80px } .list-speakers li .info { min-height: 90px } } </style> </head> <body> <ul class="speakers-list"> <li> <div class="pic"> <img src="https://cdn.fequan.com/feday/2017/data/teacher/alex.jpg" alt=""> </div> <dl class="info"> <dt>Alexey Ivanov</dt> <dd>Evil Martians前端工程师<br>PostCSS作者极力推荐</dd> </dl> </li> <li> <div class="pic"> <img src="https://static.fequan.com/feday/2017/data/teacher/andrey.jpg" alt=""> </div> <dl class="info"> <dt>Andrey Sitnik</dt> <dd>Evil Martians前端工程师<br>PostCSS、Autoprefixer作者</dd> </dl> </li> <li> <div class="pic"> <img src="https://static.fequan.com/feday/2017/data/teacher/liuwei.jpg" alt=""> </div> <dl class="info"> <dt>刘威(putaoshu)</dt> <dd>京东金融移动研发<br>前端负责人</dd> </dl> </li> <li> <div class="pic"> <img src="https://cdn.fequan.com/feday/2017/data/teacher/yunji.jpg" alt=""> </div> <dl class="info"> <dt>孟红伦（云际）</dt> <dd>钉钉前端负责人<br>石玉磊(yuni)极力推荐</dd> </dl> </li> <li> <div class="pic"> <img src="https://cdn.fequan.com/feday/2017/data/teacher/wangze_300.jpg" alt=""> </div> <dl class="info"> <dt>王泽</dt> <dd>白鹭引擎首席架构师</dd> </dl> </li> <li> <div class="pic"> <img src="https://cdn.fequan.com/feday/2017/data/teacher/jasinyip.jpg" alt=""> </div> <dl class="info"> <dt>叶俊星(Jasin Yip)</dt> <dd>美团网酒旅基础服务前端团队<br>资深前端工程师</dd> </dl> </li> <li> <div class="pic"> <img src="https://cdn.fequan.com/feday/2017/data/teacher/jiaozhu.jpg" alt=""> </div> <dl class="info"> <dt>杨永林（教主）</dt> <dd>链家前端架构师<br>原新浪微博前端技术专家</dd> </dl> </li> <li> <div class="pic"> <img src="https://cdn.fequan.com/feday/2017/data/teacher/kejun.jpg" alt=""> </div> <dl class="info"> <dt>张克军</dt> <dd>豆瓣前端专家<br>前端布道师</dd> </dl> </li> </ul> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 鼠标经过图片变形 喜欢 (0)or分享 (0)
