html5卡片平行视差效果,HTML5 粉红色晶矿平行视差动效

系统管理员 2022-10-06 09:52 46阅读 0赞

CSS

语言：

CSSSCSS

确定

html \{

width: 100%;

height: 100%;

background: \#555;

background: -webkit-radial-gradient(center, ellipse, \#333 0%, \#111 100%);

background: radial-gradient(ellipse at center, \#333 0%, \#111 100%);

\}

.container \{

display: block;

margin: 0 auto;

margin-top: 50px;

position: relative;

width: 1200px;

height: 600px;

overflow: hidden;

background: \#00f;

\}

.container img \{

position: absolute;

left: -200px;

top: -150px;

\}

.container img:nth-child(1) \{

z-index: 4;

\}

.container img:nth-child(2) \{

z-index: 3;

\}

.container img:nth-child(3) \{

z-index: 2;

\}

.container img:nth-child(4) \{

z-index: 1;

\}

.container span \{

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0;

background: -webkit-linear-gradient(top, \#d64f89 0%, \#fdb054 100%);

/\* W3C \*/

background: linear-gradient(to bottom, \#d64f89 0%, \#fdb054 100%);

opacity: 0.1;

z-index: 9;

\}

\#js\_out \{

font-family: Arial;

text-align: center;

font-size: 18px;

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用CSS完成视差滚动效果?

如何使用CSS完成视差滚动效果? > 视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验我们可以

「爱情、让人受尽委屈。」/ 2023年01月17日 09:21/ 0 赞/ 225 阅读

相关卡片点击特效Html5

html: <template> <div> <div class="card" :class="{ dot: touchDot }" @

川长思鸟来/ 2022年12月28日 09:27/ 0 赞/ 226 阅读

相关前端视差滚动效果_如何在Chrome中使用纯CSS创建视差滚动效果

前端视差滚动效果介绍 (Introduction) Modern CSS is a powerful tool you can use to create many

末蓝、/ 2022年11月28日 15:21/ 0 赞/ 259 阅读

相关 html5卡片平行视差效果,HTML5 粉红色晶矿平行视差动效

CSS 语言： CSSSCSS 确定 html \{ width: 100%; height: 100%; background: \555; backgrou

系统管理员/ 2022年10月06日 09:52/ 0 赞/ 46 阅读

相关 html5页面滚动视差效果特,34个网页视差滚动插件和视差特效教程分享

34个网页视差滚动插件和视差特效教程分享 Sponsor![10a45d2d0c23f68c6aa68c87bb9e706a.png][] 视差滚动这个设计趋势从去年开始一

小咪咪/ 2022年10月06日 04:46/ 0 赞/ 288 阅读

相关类似Launcher壁纸的视差背景效果

转载地址http://mp.weixin.qq.com/s?\_\_biz=MzAxMTI4MTkwNQ==&mid=2650820494&idx=1&sn=1af3

逃离我推掉我的手/ 2022年09月21日 15:24/ 0 赞/ 186 阅读

相关 HTML5拖拽效果

drag and drop(拖拽) 拖拽元素事件 : 事件对象为被拖拽元素 dragstart : 拖拽前触发 drag :拖拽前、拖拽结束之间

末蓝、/ 2022年07月19日 12:40/ 0 赞/ 319 阅读

相关 html5卡片效果

<!DOCTYPE html> < html lang= "en"> < head> < meta charset= "UTF-8"> < title>卡片效

叁歲伎倆/ 2022年06月14日 03:43/ 0 赞/ 282 阅读

相关视差滚动

利用background-attachment属性实现视差滚动： background-attachment: scroll: 默认值。背景图像会随着页面其余部分

淩亂°似流年/ 2022年06月02日 05:19/ 0 赞/ 237 阅读

相关 parallax插件视差效果实现

效果图： ![20181122113332713.gif][] 首先引入需要的文件，parallax依赖于jQuery，parallax下载地址[https://cdn.b

旧城等待，/ 2022年04月15日 05:44/ 0 赞/ 387 阅读