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

CSS3盾牌效果实现详解

原创

于 2021-04-10 02:25:00 发布 · 636 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5

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

从零散的碎块到重新合成一个盾牌
在这里插入图片描述
原理：非常简单就是一个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