html - 创建一个选项选择登陆页面

coder 2023-08-08 原文

我想创建一个像游戏一样的着陆页。访问者可以选择“Professioneel”或“Speels”。

说起来容易，但编程对我来说很难，所以这就是我想要的:

2 div 有 2 个不同的 background-image 当有人 hover 在其中一个 div 我想要 background-图片 缩放(仅限图片)，div 上的不透明度 从50% 更改为80%。

真正美好的 future 是在图像上显示下雪的 gif。

这就是我要创建的:

之前

之后:

到目前为止，我所取得的成就是用 background-image 制作 2 个 div，我什至不确定这是否是正确的方法。有人可以帮帮我吗？

这是当我将鼠标悬停在当前代码上时发生的情况:(整个 div 缩放，而不仅仅是图像)

根据用户的要求，这里有一些代码:

#containerEntree {
  height: 100vh;
  width: 1920px;
  padding-left: 0;
  padding-right: 0;
}

#professioneelContainer {
  background-color: red;
  text-align: center;
  width: 1920px;
  height: 475px;
}

#speelsContainer {
  background: red;
  width: 100%;
  height: 475px;
  text-align: center;
}

.entreeTekst:hover {
  transform: scale(1.2);
}

.entreeTekst {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all .5s;
  margin: auto;
}

.entreeTekst > span {
  color: white;
  /* Good thing we set a fallback color! */
  font-size: 70px;
  position: absolute;
}

<div class="container" id="containerEntree">
  <div id="professioneelContainer">
    <div class="entreeTekst">
      <span>professioneel</span>
      <img src="img/professioneel.jpg" />
    </div>
  </div>
  <div id="speelsContainer">
    <div class="entreeTekst">
      <span>Speels</span>
      <img src="img/speels.jpg" />
    </div>
  </div>
</div>

请注意，我仍在努力，所以不要说这(当然)行不通。

最佳答案

您可以通过使用 2 个带有背景图像的 div 并在 div 上使用填充来复制背景图像的纵横比来实现这一点。在 :hover 上使用 background-size 缩放图像。然后使用一个伪元素创建颜色叠加层并在 :hover 上转换不透明度，然后在上面使用另一个伪元素，将文本和“snow”gif 作为背景。

body {
  width: 600px;
  max-width: 80%;
  margin: auto;
}
div {
  background: url('https://static.tripping.com/uploads/image/0/5240/towns-funny-names-us_hero.jpg') center center no-repeat / 100%;
  height: 0;
  padding-bottom: 33.33333%;
  position: relative;
  transition: background-size .25s;
}
.speel {
  background-image: url('http://www.luketingley.com/images/large/The-Punchbowl-Web-Pano.jpg');
}
div::after, div::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
div::before {
  opacity: .5;
  transition: opacity .25s;
}
.pro::before {
  background: blue;
}
.speel::before {
  background: red;
}
div::after {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: sans-serif;
  font-size: 1.5em;
  font-weight: bold;
}
.pro::after {
  content: 'PROFESSIONEEL';
}
.speel::after {
  content: "SPEELS";
}

div:hover::after {
  background: url('https://media.giphy.com/media/26BRyql7J3iOx875u/giphy.gif') center center no-repeat / cover;
}
div:hover::before {
  opacity: 0.8;
}
div:hover {
  background-size: 150%;
}

<div class="pro">
</div>
<div class="speel">
</div>

关于html - 创建一个选项选择登陆页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44835640/

html 创建 code div section css transform

有关html - 创建一个选项选择登陆页面的更多相关文章

ruby - 如何在 Ruby 中顺序创建 PI - 2
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？最佳答案你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby-on-rails - 渲染另一个 Controller 的 View - 2
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2
我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby1.8.7[universal-darwin11.0] 最佳答案随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在
ruby - 默认情况下使选项为 false - 2
这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb
ruby - 如何使用 RSpec::Core::RakeTask 创建 RSpec Rake 任务？ - 2
如何使用RSpec::Core::RakeTask初始化RSpecRake任务？require'rspec/core/rake_task'RSpec::Core::RakeTask.newdo|t|#whatdoIputinhere?endInitialize函数记录在http://rubydoc.info/github/rspec/rspec-core/RSpec/Core/RakeTask#initialize-instance_method没有很好的记录；它只是说:-(RakeTask)initialize(*args,&task_block)AnewinstanceofRake
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

html - 创建一个选项选择登陆页面

有关html - 创建一个选项选择登陆页面的更多相关文章

随机推荐