血轮眼 - “开眼“ 用CSS就够了

1、效果预览

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

2、实现过程

① html 部分 :

<divclass="eye"><!-- 外眼眶 、内眼框 --><divclass="bot1"><divclass="bot2"></div></div><!-- 三勾玉 --><divclass="d1"></div><divclass="d2"></div><divclass="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;}