1、效果预览

需要文件的话不多说 : 点击下载

2、实现过程

① html 部分 :

<div class="eye"> <!-- 外眼眶 、内眼框 --> <div class="bot1"> <div class="bot2"></div> </div> <!-- 三勾玉 --> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> class名—bot1、bot2内眼框、外眼款d1、d2、d3固定定位的 ”三勾玉 “

① css 部分 : Ⅰ：外部box和 内外眼框 的样式：

.eye{ width: 400px; height: 400px; border: 3px solid #000; background-color: rgb(214, 140, 140); position: relative; transition: all 2s; margin: 200px auto; top: 50%; } .bot1{ width: 200px; height: 200px; border: 2px solid #000; margin: 96px auto; } .bot2{ width: 100px; height: 100px; margin: 50px auto; background-color:#000; }

Ⅱ：三勾玉的样式：

.d1{ width: 30px; height: 30px; border-radius: 0 50% 50% 50%; position: absolute; top: 100px; left: 125px; background-color: black; transition: all 2s; display: none; } .d2{ width: 30px; height: 30px; border-radius: 50% 50% 50% 0; position: absolute; top: 280px; left: 158px; background-color: black; transition: all 2s; display: none; } .d3{ width: 30px; height: 30px; border-radius: 50% 0 50% 50% ; position: absolute; top: 178px; left: 285px; background-color: black; transition: all 2s; display: none; }

Ⅲ：动画效果

.eye:hover{ background-color:red; transform: rotate(360deg); box-shadow: 0px 0px 40px 0px red, inset 0px 0px 45px 5px wheat; border-radius: 50%; } .eye:hover div[class*="b"]{ display: block; box-shadow: 0px 0px 40px 0px wheat; border-radius: 50%; } .eye:hover div[class*="d"]{ display: block; box-shadow: 0px 0px 40px 0px wheat; }

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。