CSS巧用渐变实现高级感背景光动画


Posted in HTML / CSS onDecember 06, 2021

实现

这个效果想利用 CSS 完全复制是比较困难的。CSS 模拟出来的光效阴影相对会 Low 一点,只能说是尽量还原。

其实每组光都基本是一样的,所以我们只需要实现其中一组,就几乎能实现了整个效果。

观察这个效果:

CSS巧用渐变实现高级感背景光动画

它的核心其实就是角向渐变 -- conic-gradient(),利用角向渐变,我们可以大致实现这样一个效果:

<div></div>
div {

    width: 1000px;

    height: 600px;

    background:

        conic-gradient(

            from -45deg at 400px 300px,

            hsla(170deg, 100%, 70%, .7),

            transparent 50%,

            transparent),

            linear-gradient(-45deg, #060d5e, #002268);

}

看看效果:

CSS巧用渐变实现高级感背景光动画

有点那意思了。当然,仔细观察,渐变的颜色并非是由一种颜色到透明就结束了,而是颜色 A -- 透明 -- 颜色 B,这样,光源的另一半并非就不会那么生硬,改造后的 CSS 代码:

div {
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at 400px 300px,
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
}

我们在角向渐变的最后多加了一种颜色,得到观感更好的一种效果:

CSS巧用渐变实现高级感背景光动画

emm,到这里,我们会发现,仅仅是角向渐变 conic-gradient() 是不够的,它无法模拟出光源阴影的效果,所以必须再借助其他属性实现光源阴影的效果。

这里,我们会很自然的想到 box-shadow。这里有个技巧,利用多重 box-shadow, 实现 Neon 灯的效果。

我们再加个 div,通过它实现光源阴影:

<div class="shadow"></div>
.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: 
        0px 0 .5px hsla(170deg, 95%, 80%, 1),
        0px 0 1px hsla(170deg, 91%, 80%, .95),
        0px 0 2px hsla(171deg, 91%, 80%, .95),
        0px 0 3px hsla(171deg, 91%, 80%, .95),
        0px 0 4px hsla(171deg, 91%, 82%, .9),
        0px 0 5px hsla(172deg, 91%, 82%, .9),
        0px 0 10px hsla(173deg, 91%, 84%, .9),
        0px 0 20px hsla(174deg, 91%, 86%, .85),
        0px 0 40px hsla(175deg, 91%, 86%, .85),
        0px 0 60px hsla(175deg, 91%, 86%, .85);
}

CSS巧用渐变实现高级感背景光动画

OK,光是有了,但问题是我们只需要一侧的光,怎么办呢?裁剪的方式很多,这里,我介绍一种利用 clip-path 进行对元素任意空间进行裁切的方法:

.shadow {
    width: 200px;
    height: 200px;
    background: #fff;
    box-shadow: .....;
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
}

原理是这样的:

CSS巧用渐变实现高级感背景光动画

这样,我们就得到了一侧的光:

CSS巧用渐变实现高级感背景光动画

这里,其实 CSS 也是有办法实现单侧阴影的,但是实际效果并不好,最终采取了上述的方案。

接下来,就是利用定位、旋转等方式,将上述单侧光和角向渐变重叠起来,我们就可以得到这样的效果:

CSS巧用渐变实现高级感背景光动画

这会,已经挺像了。接下来要做的就是让整个图案,动起来。这里技巧也挺多的,核心还是利用了 CSS @Property,实现了角向渐变的动画,并且让光动画和角向渐变重叠起来。

我们需要利用 CSS @Property 对代码渐变进行改造,核心代码如下:

<div class="wrap">
    <div class="shadow"></div>
</div>
@property --xPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 400px;
}
@property --yPoint {
  syntax: '<length>';
  inherits: false;
  initial-value: 300px;
}

.wrap {
    position: relative;
    margin: auto;
    width: 1000px;
    height: 600px;
    background:
        conic-gradient(
            from -45deg at var(--xPoint) var(--yPoint),
            hsla(170deg, 100%, 70%, .7),
            transparent 50%,
            hsla(219deg, 90%, 80%, .5) 100%),
            linear-gradient(-45deg, #060d5e, #002268);
    animation: pointMove 2.5s infinite alternate linear;
}

.shadow {
    position: absolute;
    top: -300px;
    left: -330px;
    width: 430px;
    height: 300px;
    background: #fff;
    transform-origin: 100% 100%;
    transform: rotate(225deg);
    clip-path: polygon(-100% 100%, 200% 100%, 200% 500%, -100% 500%);
    box-shadow: ... 此处省略大量阴影代码;
    animation: scale 2.5s infinite alternate linear;
}
 
@keyframes scale {
    50%,
    100% {
        transform: rotate(225deg) scale(0);
    }
}

@keyframes pointMove {
    100% {
        --xPoint: 100px;
        --yPoint: 0;
    }
}

这样,我们就实现了完整的一处光的动画:

CSS巧用渐变实现高级感背景光动画

我们重新梳理一下,实现这样一个动画的步骤:

  1. 利用角向渐变 conic-gradient 搭出基本框架,并且,这里也利用了多重渐变,角向渐变的背后是深色背景色;
  2. 利用多重 box-shadow 实现光及阴影的效果(又称为 Neon 效果)
  3. 利用 clip-path 对元素进行任意区域的裁剪
  4. 利用 CSS @Property 实现渐变的动画效果

剩下的工作,就是重复上述的步骤,补充其他渐变和光源,调试动画,最终,我们就可以得到这样一个简单的模拟效果:

CSS巧用渐变实现高级感背景光动画

由于原效果是 .mp4,无法拿到其中的准确颜色,无法拿到阴影的参数,其中颜色是直接用的色板取色,阴影则比较随意的模拟了下,如果有源文件,准确参数,可以模拟的更逼真。

完整的代码你可以戳这里:CodePen -- iPhone 13 Pro Gradient

最后

本文更多的是图一乐呵,实际中制作上述效果肯定是有更为优雅的解法,并且利用 CSS 模拟的话,也应该有更好的方法,这里我仅仅是抛砖引玉,过程中的 1、2、3、4 技巧本身有一些还是值得借鉴学习的。

以上就是CSS巧用渐变实现高级感背景光动画 的详细内容,更多关于CSS渐变背景动画的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
在HTML中引入CSS的几种方式介绍
div与span之间的区别与使用介绍
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 #HTML / CSS
HTML5 新增内容和 API详解
Nov 17 #HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 #HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
CSS中妙用 drop-shadow 实现线条光影效果
You might like
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
Vue props用法详解(小结)
2018/07/03 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
vue开发拖拽进度条滑动组件
2019/09/21 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
Python实现KNN邻近算法
2021/01/28 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
python实现超市扫码仪计费
2018/05/30 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
护理专业大学生自我推荐信
2014/01/25 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
优秀员工演讲稿
2019/06/21 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers