纯css实现阴影跳动
前言:能否使用 web
开发技术创建一个五颜六色的,并且足够聪明可以模拟前景颜色的阴影呢?事实证明,在只使用 CSS
的情况下,完全可以实现这种效果。在本文中,我们将研究如何实现。
图片实现
用于展示原图的 HTML
如下所示并没有什么特别(后台回复小站,获取原图):
<div class="parent"><div class="shadow logo"></div>
</div>
有一个父级 div
元素 .parent
,它包含一个子级元素 .logo
用于展示图片。我们通过使用一张背景图片的形式来实例化,.logo
元素的具体样式如下:
.logo{margin: 100px auto;width: 300px;height: 300px;background-image: url("./kayako.svg");background-repeat: no-repeat;background-size: contain;
}
在上面样式规则中,我们将 div
设置为 300 * 300
宽高像素,并且设置了 background-image
及相关属性,展示一下我们现在所实现的结果。
阴影效果
现在我们已经展示出了我们的图片,剩下更加有趣的部分就是来定义阴影。我们将使用指定一个子伪元素 ::after
来定义阴影,它将做 3
件事情:
直接位于图片所在
div
的后面;继承与父元素相同的背景图像;
通过滤镜产生出多彩的
drop-shadow
阴影效果。
上述3个功能由以下2个样式规则实现:
.shadow {position: relative;
}
.shadow::after {content: "";width: 100%;height: 100%;position: absolute;background: inherit;background-position: center center;filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);z-index: -1;
}
background
属性和 filter
属性
background
的值是 inherit
,这意味着它将继承父级元素的背景值
filter
属性定义了两个滤镜值:drop-shadow
和 blur
我们的 drop-shadow
滤镜设置了一个 50%
透明度的黑色阴影。blur
滤镜为为元素设置 20px
的模糊效果。这两个滤镜的结合最终就可以创造出多彩的阴影,当这两个样式生效时,我们就可以看到如下图出现在图像后面彩色的阴影:
如果你想要多彩的阴影具有放大缩小的动画效果,额外的 CSS
可以帮你实现:
.shadow {position: relative;
}
.shadow::after {content: "";width: 100%;height: 100%;position: absolute;background: inherit;background-position: center center;filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.50)) blur(20px);z-index: -1;/* animation time! */animation: oscillate 1s cubic-bezier(.17, .67, .45, 1.32) infinite alternate;}@keyframes oscillate { from {transform: scale(1, 1);}to {transform: scale(1.3, 1.3);}
}
如果你想在不使用循环动画效果的情况下增强交互性,也可以使用 CSS transition
来改变阴影的行为,如在 hover
操作情况下。需要强调的难点是对待伪元素只需要像对待用 HTML
创建的或 JavaScript
动态创建的元素一样,唯一的不同是这个元素完全是仅使用 CSS
创建的!
总结
伪元素允许我们使用 CSS
来创建通常在 HTML
和 JavaScript
领域内完成的元素创建任务。对于我们多彩的智能阴影来说,我们依赖于父元素有一个背景图像集,这使得我们定义一个既可以继承父级背景细节又可以设置模糊效果和投影效果的子元素变得容易。虽然这一切都很好,减少了我们大量的复制粘贴工作,但是这种方法也不是很灵活。
纯css实现阴影跳动,你学会了吗?
纯css实现阴影跳动相关推荐
- android 音符动画效果,纯css实现音符跳动效果
效果如图: image.png 代码: 纯css实现音符跳动效果 .voice { display: flex; align-items: flex-end; justify-content: cen ...
- 纯css实现文字跳动的动画效果
以下图片为截图所得,所以为静态展示 具体实现的详细代码如下,可直接cv复用: html部分代码: <h1 class="my-words"><span>H& ...
- 纯CSS实现漂亮圆角阴影边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计 标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
- 一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
借助checkbox表单元素.:checked伪类.::before/::after伪元素,就可以只需一个input[type="checkbox"]元素,通过纯CSS实现Swit ...
- 纯CSS实现背景渐变、球和阶梯的跳动
纯CSS实现背景渐变.球和阶梯的跳动 作者:马光佳 撰写时间:2019.1.17 开发工具与关键技术:MicrossftVisualStudio.animation与@keyframes的配合使用 背 ...
- 纯 CSS 实现科技感十足的暗黑字符雨动画
本文将使用纯 CSS,带大家一步一步实现一个这样的科幻字符跳动背景动画.类似于这样的字符雨动画: Digital Char Rain Animation 或者是类似于这样的: CodePen Home ...
- 用css做一个移动射击动画,如何使用纯CSS实现一只移动的小白兔动画效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现一只移动的小白兔动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 代码解读 定义 dom,页面中包含 2 个元素,分 ...
- before css 旋转_七夕,当然少不了纯CSS的点缀啦
作者:JowayYoung 转发链接:https://mp.weixin.qq.com/s/pGAVZYvm3YGqnsJuc41shw 前言 以下程序猿通通指男性程序猿哈 今天是一年一度的七夕,估计 ...
最新文章
- TCP通信文件上传原理
- 数据结构:哈希表函数构造和冲突解决方法
- python中int的意思_python中”int(a[::-1])”的含义是什么?
- java把收集的数据节点_java面试题收集(04)
- python3.7.3配置环境变量_配置环境变量切换到python3.7
- 手机APP ~ MUI——创建页面方法
- poj 1265-Area解题报告
- 哦豁,女朋友都能被别人撩走,还不赶快去Coding回来
- 云计算与虚拟化技术【课堂笔记】
- 【学习方法】如何才能高效学习
- Cadence Allegro如何加密PCB文件?
- 华为交换机SEP双半环设计方案及配置详细步骤
- 解决NGUI的UITexture图片不显示问题
- RSA后台加密,前端解密
- linux shell 读取文件的三种方式
- 江苏计算机报名时间2021年上半年,关于2021年春季江苏省计算机等级考试报名的通知...
- Mint-ui设计移动端系统
- そこで と それで 区别
- HTML5七夕情人节表白网页(新年倒计时+白色雪花飘落) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 c
- Android开发学习之RecyclerView+CardView的使用