前端demo每日一练，一起来打卡吧！！

雨夜心锁穿海生

已于 2022-09-13 18:03:20 修改

阅读量296

点赞数

分类专栏：前端每日一练文章标签： css3 css 动画

于 2022-09-13 18:01:54 首次发布

本文链接：https://blog.csdn.net/weixin_55285172/article/details/126838583

版权

前端每日一练专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端小demo_day01

写在前面

这一个纯css的样式效果小demo，鼠标放置上去之后，我们可以看到一个渐进的动画效果，效果展示如下所示
（占位效果视频），本练习仅供练习，因此所有代码均整合在html中，小伙伴们快一起来试试吧！

效果展示

在这里插入图片描述

需求来源

抖音推荐典型css效果，作为练习阶段的每日一练

所用到的组件以及知识储备

div::before , div::after盒子的属性，一个是头，一个是尾巴，设置大小冲突的时候，会叠加在一起
图片铺满组件div–> background-size:cover
切割图片(重中之重，本demo的核心)–> clip-path:circle()
- 表示用圆形去分割组件，例如本文其中的
```
clip-path: circle(0% at 50% 50%);
clip-path: circle(50% at 50% 50%);
```
关于这个属性我也是第一次看到，主要作用就是用来按照我们指定的图形去切割div，比如这里就是，用圆形（circle）去切割div，切割占比分别为0%和50%，注意50%就已经到满了，这里和圆形边框一个道理
css过渡–> transition
css中的过渡，作用就是让我们的动画效果加时延，给我们更美观的效果，过渡口诀：谁加动画给谁加！谁加动画给谁加！谁加动画给谁加！重要的事情说三遍，例如我们文中的
```
#bottom::after{
    background: inherit;
    clip-path: circle(0% at 50% 50%);
    transition: .4s linear;
}
```
这里我们就是给div的after属性设置了0.4秒的延时，因为是after要变化不是div也不是before，因此此效果添加给了after
孩子继承父亲的背景–> background: inherit;

实现思路

刚拿到题目的时候，想都没想就觉得应该添加遮挡板，然后利用过渡和动画效果来实现，然后写到动画的时候卡住了，怎么才能出现一个灰色向外扩散的效果，绞尽脑汁，百思不得其解，最终看完大神的视频得到了答案

首先用我们前面说到的before和after代替div来优化性能,并给他们的公共属性设置样式，before用来当遮挡层，after用来当显示层。遮挡层这里有一个透明的效果，不难想到直接利用rgba来实现。

紧接着我们将显示层的内容通过 background:inherit来设置显示层的图片背景，这里要注意一下，我们的显示层需要先隐藏，然后就是重要的切片环节了，先设置不要切片，就设置circle中的占比属性为0%

最后就是激动人心的时候了，设置after层的鼠标经过动画，使其将切片占比增加至50%，达到全局透明的效果，为了使其好看，增加transition过渡效果，完美结束！

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day_001_fighting</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #bottom{
            position: relative;
            margin: auto;
            margin-top: 100px;
            background-color: green;
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-image: url("bg_image.jpg");
            background-size: cover;
        }

        #bottom::before, #bottom::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
        #bottom::before{
            background: rgba(0,0,0,.5);
        }
        #bottom::after{
            background: inherit;
            /*opacity: 0;*/
            /*circle参数说明 圆形裁剪面积占比 中心坐标位置*/
            clip-path: circle(0% at 50% 50%);
            /*过度口诀:谁加过度给谁加*/
            transition: .4s linear;
        }
        #bottom:hover::after{
            clip-path: circle(50% at 50% 50%);
        }
    </style>
</head>
<body>
    <div id="bottom"></div>
</body>
</html>