前端学习CSS3(day3)盾牌案例

最新推荐文章于 2024-08-12 00:15:00 发布

熊熊举高高

最新推荐文章于 2024-08-12 00:15:00 发布

阅读量578

点赞数

CC 4.0 BY-SA版权

文章标签： html5

本文链接：https://blog.youkuaiyun.com/weixin_41571938/article/details/115562762

本文介绍如何使用CSS3创建盾牌效果。通过在一个div内放置9张图片，并设置初始旋转，当鼠标悬停时改变样式，实现盾牌的合成与分解效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从零散的碎块到重新合成一个盾牌
在这里插入图片描述
原理：非常简单就是一个div里面9张图片然后让他们初始样式旋转当鼠标放在上面的时候样式消失

.box:hover > img{
   
   
            transform: none;
        }

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
   
   
            padding: 0;
            margin: 0;
        }
        body{
   
   
            background-color: #31965b;
        }
        .box{
   
   
            width: 440px;
            margin:100px auto;
        }
        .box > img{
   
   
            transition: transform 1s;
        }
        .box > img:nth-of