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

系统管理员 2022-10-06 09:52 10阅读 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 条评论，10人围观）

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

相关阅读

相关卡片点击特效Html5

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

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

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

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

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

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

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

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

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

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

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

相关 html5视频控制效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家好吧，来看一个html5的video元素的应用，实现简单控制。到这里[观看效果][Link 1]，到这里[

逃离我推掉我的手/ 2022年08月26日 08:37/ 0 赞/ 134 阅读

相关 html5烟花绽放效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家今天来看一个利用canvas+javascript实现的烟花绽放效果，大家可以到我的codepen看看DEMO

叁歲伎倆/ 2022年08月25日 08:24/ 0 赞/ 164 阅读

相关 HTML5拖拽效果

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

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

相关 html5卡片效果

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

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

相关视差滚动

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

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

相关 parallax插件视差效果实现

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

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