<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>开锁动画</title> <style type="text/css"> .yuan{ border-radius: 200px; background-color: aqua; height: 300px; width: 300px; margin: 500px; border-top: 10px solid red; border-bottom: 10px solid blue; border-right: 10px solid blue; border-left: 10px solid red; color: white; font-size: 30px; transition: all 2s; position: relative; } .yuan:hover{ transform: rotate(180deg); } .suo{ height: 200px; width: 150px; } .kaisuo{ position: absolute; top: 580px; left: 590px; } .kaisuo:hover{ opacity: 0.1; } </style></head><body> <div class="yuan"> </div> <div class="kaisuo"> <img src="../images/suozi.png" class="suo"> </div></body></html>效果:鼠标移入边框会旋转180°,图片会虚化,但是现在两者只能选择一种显示,用了个DIV把图片定位到BORDER里的,如果不用的话,图片会和边框一起旋转。 值得改动的地方还有很多,希望在深入学习的过程中能慢慢完善
时间: 2024-10-25 04:34:30