Navigation menu

0755-8229-8336
  • Contact us
  • 0755-8229 8336
  • 深圳市罗湖区人民南路国际商业大厦20楼(地铁1号线国贸站E出口既是)

    szniego@126.com


    © 2007-2020 All Rights Reserved.
  • 策略型高端网站设计公司

    Strategic advanced website design company

    View More
  • 西安网页交互设计比您想的要容易

    时间:2021-03-27  作者:尼高GARY  来源:https://www.niegoweb.com
    西安网页交互设计比您想的要容易,现在网站建设都需要考虑交互设计,那么即好看又符合表达逻辑的交互设计是怎么做的呢?今天尼高网络小编就带大家一起来看看。

    我们看到Web组件并没有看上去那么可怕。我们查看了一个超级简单的设置,并制作了一个带有自定义<zombie-profile>元素的僵尸约会服务配置文件。我们为每个配置文件重用了该元素,并使用该元素在每个配置文件中填充了唯一信息<slot>。


    西安网页设计

    那很酷,也很有趣(嗯,无论如何我还是很开心的……),但是如果我们使这个想法更具有互动性,该怎么办?我们的僵尸资料很棒,但是对于想要成为有用的,世界末日后的约会体验,您想“喜欢”僵尸甚至向他们发送消息。这就是我们在本文中要做的。我们将继续浏览另一篇文章。(向左滑动适合僵尸吗?)

    让我们暂停一秒钟(好的,也许更长),然后看一下::slotted()伪元素。在上一篇文章发表后(感谢Rose!),它引起了我的注意,它解决了我遇到的某些(尽管不是全部)封装问题。如果您还记得的话,我们在组件外部有一些CSS样式,<template>而在中的<style>元素内部有一些CSS样式<template>。内部的样式<template>已封装,但外部的样式未封装。

    我想做的第一件事是添加一些动画来使事情变得有趣。让我们的僵尸个人资料图片淡入并在负载下转换。

    初次尝试时,我使用img和::slotted(img)选择器直接为图像设置动画。但是我所得到的只是对Safari的支持。Chrome和Firefox不会在插入的图片上运行动画,但是默认的动画图片就可以了。为了使其正常工作,我将插槽中的.pic类包装到了div中,然后将动画应用到了div中。

    相关案例

    OTHER CASE