html图标动画

最新推荐文章于 2024-07-12 16:38:52 发布

清何以解忧

最新推荐文章于 2024-07-12 16:38:52 发布

阅读量249

点赞数

文章标签： css html flex

html代码-》

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>新拟态</title>
</head>
<body>
    <div class="bigbox">
        <ul class="container">
            <li class="box">
                <div class="boximg">
                    <img src="./icon/录制.png" alt=""/>
                </div>
                <p>录音机</p>
            </li>
            <li class="box">
                <div class="boximg">
                    <img src="./icon/录制.png" alt=""/>
                </div>
                <p>录音机</p>
            </li>
            <li class="box">
                <div class="boximg">
                    <img src="./icon/录制.png" alt=""/>
                </div>
                <p>录音机</p>
            </li>
            <li class="box">
                <div class="boximg">
                    <img src="./icon/录制.png" alt=""/>
                </div>
                <p>录音机</p>
            </li>
            <li class="box">
                <div class="boximg">
                    <img src="./icon/录制.png" alt=""/>
                </div>
                <p>录音机</p>
            </li>
        </ul>
    </div>
</body>
</html>

css代码-》

*{
    padding: 0;
    margin: 0;
}
ul li{
    list-style: none;
}
body{
    width: 100%;
    height: 100vh;/* 可视100% */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #efeeee;
}
.container{
    width: 700px;
    height: 600px;
    display: flex;
    justify-content: space-around;/* 每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。 */
    flex-wrap: wrap;/* 自动换行 */
    align-items: center;/*弹性盒子元素在该行的侧轴（纵轴）上居中放置。 */
}
.container .box{
    display: flex;
    justify-content: space-around;
    flex-direction: column;/* 灵活的项目将垂直显示，正如一个列一样。	 */
    align-items: center;
    align-content: center;
    width: 100px;
    height: 140px;
    margin: 20px;
}
.container .box .boximg{
    width: 100px;
    height: 100px;
    box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
    -18px -18px 30px rgba(255, 255, 255, 1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #efeeee;
    transition: box-shadow .2s ease-out;
    position: relative;
}
.container .box .boximg img{
    width: 60px;
    transition: width .2s ease-out;
}
.container .box p{
    color:slategray;
}
.container .box .boximg:hover{
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1),
    0px 0px 0px rgba(255, 255, 255, 1),
    inset 18px 18px 30px rgba(0, 0, 0, 0.1),
    inset -18px -18px 30px rgba(255, 255, 255, 1);/*使用 inset 后，阴影在边框内（即使是透明边框），背景之上内容之下*/
    transition: box-shadow .2s ease-out;
}
.container .box .boximg:hover img{
    width: 58px;
    transition: width .2s ease-out;
}

实现效果-》

图标来源阿里巴巴矢量图标库官网（https://www.iconfont.cn/）

知识点：

盒子阴影

例子：box-shadow:1px 2px 3px 4px #ccc inset；

1px 从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）；

2px 从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）；

3px 阴影的模糊度，只允许为正值；

4px 阴影扩展半径；

#ccc 阴影颜色；

inset 设置为内阴影（如果不写这个值，默认为外阴影）；

弹性布局：https://www.jianshu.com/p/d9373a86b748/（display:flex;）

aligin-items与aligin-content的区别:

align-items 属性使用于所有的flex容器，它是用来设置每个flex元素在侧轴上的默认对齐方式

aligin-items 与align-content有相同的功能，不过不同点是它是用来让每一个单行元素在容器居中而不是让整个容器居中

动画效果：https://blog.csdn.net/Candy_10181/article/details/80611009 （ease,seae-in,ease-in-out,ease-out,效果区别）

清何以解忧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
html图标动画

html代码-》<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel=...
复制链接

扫一扫