m0_47883103的博客

核心难点在于动画的首尾如何衔接上，需要自己尝试计算。<div class="bar"></div><div class="bar overflow"></div>scsshtml,body { width: 100%; height: 100%; display: flex;}.bar { position: relative; width: 400px; height: 30px;

主要借助了 mask-image，一张图片上应用 mask-image: linear-gradient(0, rgba(0, 0, 0,40%, transparent 60%);，透明的部分则会凸显出另外一张图。再利用动画，让 mask-image: linear-gradient 的角度旋转起来。<div class="a"></div><div class="b"></div>scss$img2: '图片地址';$img1.

关键点主要借助了两个伪元素实现了整体结构，借助了 drop-shadow 生成一层整体阴影drop-shadow 只能是单层阴影，所以另一层阴影需要多尝试contrast(150%) brightness(110%) 则可以增强图像的对比度和亮度，更贴近抖音LOGO的效果<div></div>body { background: #000; overflow: hidden;}div { position: relative;

关键点阴影实现的关键点在于使用伪元素绝对定位在容器的一角，元素本身透明，阴影扩散开形成内切圆角效果阴影实现缺点，单个标签最多只能是2个内切圆角径向渐变实现内切圆角可以是4边<div class="shadow">使用阴影的扩散半径实现内切圆角</div><div class="shadow2">阴影实现缺点，单个标签最多是2边</div><div class="linear">使用径向渐变实现内切圆角</div>&l

关键点多重阴影的过渡效果与白色字体的叠加<div> <p class="pink">PINK</p></div><div> <p class="orange">Box-Shadow</p></div><div> <p class="yellow">YELLOW</p></div>body { backgroun

关键点使用多重阴影的特性，完成叉子的头部部分。<div></div>scssdiv { position: relative; width: 140px; height: 140px; margin: auto; border-radius: 50%; background: #fff; &::before { content: ""; position: abs

<p>背景文字背景文字背景文字背景文字</p><div>Hover Me</div>div { position: absolute; width: 200px; height: 60px; line-height: 60px; text-align: center; border: 1px solid #666; cursor: pointer; top: 50%; left: .

关键点当 box-shadow 的模糊半径和扩张半径都为 0 的时候，我们可以得到一个和元素大小一样的阴影box-shadow 是可以设置多层的，也就是多层阴影，而且可以进行过渡变换动画（补间动画）background-image: linear-gradient()，也就是渐变背景是不能进行补间动画的<div class="shadow"></div><div class="gradient"></div>.shadow { po

效果图<div class="container"> <div class="shadow">Hover Me</div></div>scss$color: #e91e63;body { background: #000;}.container { position: relative; overflow: hidden; width: 124px; height: 124px; o