【免费】CSS3鼠标经过开花动画特效.rar资源-CSDN文库

共2个文件

html：1个

gif：1个

需积分: 0 120 浏览量 2024-06-23 14:13:21 上传评论收藏 256KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3鼠标经过开花动画特效.rar （2个子文件）

CSS3鼠标经过开花动画特效

index.html 2KB

动画000001.gif 269KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3鼠标经过开花动画特效</title> <style> *{margin:0;padding:0;list-style-type:none;} #box{ width:1000px; height:550px; margin:0 auto; margin-top:50px; position:relative; } .box01,.box02,.box03,.box04,.box05,.box06,.box07,.box08,.box09{ width:300px; height:300px; border-radius:300px 0; background:pink; opacity:0.6; position:absolute; bottom:100px; left:500px; transform-origin:0 300px; transform:rotate(-45deg); transition:all 8s; } #box:hover :nth-child(3){ transform:rotate(-23deg); } #box:hover :nth-child(4){ transform:rotate(0deg); } #box:hover :nth-child(5){ transform:rotate(23deg); } #box:hover :nth-child(6){ transform:rotate(45deg); } #box:hover :nth-child(7){ transform:rotate(-68deg); } #box:hover :nth-child(8){ transform:rotate(-90deg); } #box:hover :nth-child(9){ transform:rotate(-113deg); } #box:hover :nth-child(10){ transform:rotate(-135deg); } </style> </head> <body> <div id="box"> <div class="box01"></div> <div class="box02"></div> <div class="box03"></div> <div class="box04"></div> <div class="box05"></div> <div class="box06"></div> <div class="box07"></div> <div class="box08"></div> <div class="box09"></div> </div> <div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p> </div> </body> </html>

评论收藏

内容反馈