纯css弹窗 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

纯CSS换肤

30行代码实现纯CSS—3种换肤老规矩，先把代码给大家，拿去粘贴直接用，无需引用，不好用评论底下随便喷，我一条一条看。 CSS中的checked意义不同，意为此时被选中，那么我执行…

1.5K1 0

纯CSS设计按钮

完全兼容不支持css3的浏览器，若不兼容css3，则显示没有渐变和阴影的普通按钮。设计按钮 css"> body

1.9K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

CSS3弹窗动画效果

弹窗从上到下动画 .fadein { animation: fadein .5s; } @keyframes fadein { 0% { transform: translate...(0, -100%); } 100% { transform: none; } } 弹窗从下到上动画 .fadein { animation: fadein...0% { transform: translate(-100%, 0); } 100% { transform: none; } } 通过改变css...cdn.bootcss.com/jquery/3.4.1/jquery.min.js"> $('.in').click(function () { $('.top').css...('top', '0') }) $('.out').click(function () { $('.top').css('top', '-200px') }) <

2.8K1 0

纯css抖动效果

HTML： 1 按钮 CSS： 1 .shake{ 2 width: 120px; 3 height: 33px

4.8K1 0

纯CSS序列号

html> per-Css-ol...15:43:52 IE8+ 、FF、chrome...modern Browser my website:http://www.lookcss.com --> css

9363 0

纯CSS实现吸附效果

JS实现吸附效果的代码在网上一搜一大堆，更何况笔者喜欢耍CSS，在此就不贴相关的JS代码了。本文为各位同学推荐一个很少见很少用的CSS属性：position:sticky。...简单的「两行CSS核心代码」就能完成「十多行JS核心代码」的功能，何乐而不为呢。实现简单回顾position常用的值，怎样用就不说了，各位同学应该都熟透了。...两行CSS核心代码分别是position:sticky和top/bottom:npx。

5K2 0

纯CSS实现表单验证

首发：krissarea.gitee.io (https://krissarea.gitee.io/blog/css/others/css-form-validation.html) 作者：陈大鱼头...$refs[formName].resetFields(); } } } 以上就是我们常规的表达验证了，基本就都是用JS来完成的，那么我们能不能用CSS来实现呢...这里先上DEMO (https://krisachan.github.io/css/css-form-validation.html) CSS实现表单验证上面的表单验证就完全是由CSS来实现的，核心属性就是... CSS与 JS里的验证规则不一样...) 如果你也喜欢 CSS，喜欢探讨技术，或者对本文，本系列有任何的意见或建议，鱼头非常希望你能加入一个有趣的微信群 — “进击的CSS”。

2.3K4 0

纯 CSS 实现波浪效果！

一直以来，使用纯 CSS 实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。...纯 CSS 实现波浪效果好，接下来才是本文的重点！使用纯 CSS 的方式，实现波浪的效果。你 TM 在逗我？刚刚不是还说使用 CSS 无能为力吗？...因为中间高，两边低的效果不符合物理学原理，看上去十分别扭；可以点进去看看下面这个例子： CodePen Demo -- pure css wave 使用纯 CSS 实现波浪进度图好，既然掌握了这种方法...，下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图。...Wave Loading 虽然效果差了一点点，但是相较于要使用学习成本更高的 SVG 或者 CANVAS，这种纯 CSS 方法无疑可使用的场景更多，学习成本更低！

4K4 0

纯CSS序列号

html> per-Css-ol...15:43:52 IE8+ 、FF、chrome...modern Browser my website:http://www.lookcss.com --> css

2.4K3 0

纯CSS 毛玻璃效果 💎

在 CSS 中，想要实现模糊效果，可以使用滤镜。背景通常设置成黑色、灰色或者白色，然后再设置一下背景的不透明度就能实现一个简单的毛玻璃效果。...也是纯CSS 可以做出来的。

5.5K3 0

纯血鸿蒙APP实战开发——全局弹窗封装案例

介绍本示例介绍两种弹窗的封装案例。一种是自定义弹窗封装成自定义组件的方式，使用一句代码即可控制显示；一种是使用子窗口的方式实现弹窗，使用一句代码即可展示。...效果预览图使用说明进入首页会立马弹出一个子窗口弹窗，点×关闭弹窗。点击“发红包”会展示子窗口方式实现的弹窗。点击“提现”会显示自定义弹窗。实现思路自定义弹窗封装成自定义组件的方式创建自定义弹窗组件。...(); }) } }}自定义组件Dialog，对自定义弹窗组件进行二次封装。...: () => void; // 通过CustomDialogController的builder参数绑定弹窗组件CustomDialogView private controller = new...@Componentexport struct CustomDialog { // 外部定义visible变量作为弹窗组件入参，控制弹窗显隐 @State visible: boolean = false

8092 0

纯 CSS 实现波浪效果

1写在前面使用纯 CSS 实现波浪效果不再困难，CSS 奇技淫巧。一直以来，使用纯 CSS 实现波浪效果都是十分困难的。因为实现波浪的曲线需要借助贝塞尔曲线。...而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。当然，借助其他力量（SVG、CANVAS），是可以很轻松的完成所谓的波浪效果的。...3纯CSS实现波浪效果你 TM 在逗我？刚刚不是还说使用 CSS 无能为力吗？...因为：中间高，两边低的效果不符合物理学原理，看上去十分别扭； 4使用纯 CSS 实现波浪进度图好，既然掌握了这种方法，下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图...HTML 结构如下： CSS 代码如下：效果图：虽然效果差了一点点，但是相较于要使用学习成本更高的 SVG 或者 CANVAS，这种纯 CSS 方法无疑可使用的场景更多，学习成本更低！

2K2 0

纯CSS 波点背景 🏀

这次要用纯CSS做一个波点背景，先上图看看效果。我把这个效果写在 body 上，如果你不喜欢这个配色也可以自己手动改改。

9902 0

纯CSS实现密室逃脱游戏

@alphardex,一个兴趣使然的前端，号称“CSS魔法使”，重度中二病患者，喜欢独自研究CSS的奥秘，口头禅是”我不是无所不知，只是刚好知道而已。”...接下来，笔者要用纯CSS实现一款类似的密室逃脱类游戏。是的，你没听错，纯CSS，也就意味着完全没有JS的参与。有人就纳闷了：WTF?CSS，一个网页布局的语言，居然还能写游戏？...可惜的是，CSS还真能写游戏。接下来随笔者一起进入这个不思议的国度吧。攻略每次笔者玩密室逃脱游戏卡关时，总会去搜搜攻略，看完后就能把游戏玩通。...根据上面的攻略，一步步定制好所有开关，摆放好所有物件，且能确保场景能自由切换，这样一个纯CSS密室逃脱游戏就成功诞生啦在线游玩地址：https://codepen.io/alphardex/full/

7541 0

纯css实现模拟打字效果

对于这个不做过多的介绍，有兴趣的可以参考 typed.js实例效果实现对于上面的模拟打字效果来说，只用css如何实现？... // Css // 容器样式 .wrapper { height: 100vh; display: flex; align-items: center; justify-content...在原来基础上再添加一个border动画，最终css代码为 .wrapper { height: 100vh; /*This part is important for centering*/

1.8K3 0

前端-纯CSS实现波浪效果！

一直以来，使用纯 CSS 实现波浪效果都是十分困难因为实现波浪的曲线需要借助贝塞尔曲线。 ? 而使用纯 CSS 的方式，实现贝塞尔曲线，额，暂时是没有很好的方法。...纯 CSS 实现波浪效果好，接下来才是本文的重点！使用纯 CSS 的方式，实现波浪的效果。你 TM 在逗我？刚刚不是还说使用 CSS 无能为力吗？...因为中间高，两边低的效果不符合物理学原理，看上去十分别扭；可以点进去看看下面这个例子： CodePen Demo -- pure css wave 使用纯 CSS 实现波浪进度图好，既然掌握了这种方法...，下面我们就使用纯 CSS 实现上面最开始使用 SVG 或者 CANVAS 才能实现的波浪进度图。...CodePen Demo -- Pure Css Wave Loading 虽然效果差了一点点，但是相较于要使用学习成本更高的 SVG 或者 CANVAS，这种纯 CSS 方法无疑可使用的场景更多，学习成本更低

2.7K3 0

纯CSS实现抖音Logo

本文源码自Github开源项目CSS inspiration——CSS灵感，大家可以通过文章底部的阅读原来来访问原文地址 ?...抖音logo 抖音我们每天都在刷，抖音的logo大家也再熟悉不过，今天跟大家分享一下如何用纯CSS实现抖音的logo 拆分抖音logo 第一步，抖音logo是两个音符♪叠加、混合而成的 ?...根据上面的图片，我们可以把抖音logo拆分成三个部分：中间的竖线左下角的四分之三圆环右上角的四分之一圆环关键技术点第一步中的叠加混合部分可以利用CSS3中的 mix-blend-mode:...代码 html代码 css代码

1.9K1 0

纯血鸿蒙APP实战开发——全局状态保留能力弹窗

介绍全局状态保留能力弹窗一种很常见的能力，能够保持状态，且支持全局控制显隐状态以及自定义布局。...效果图预览使用说明使用案例参考短视频案例首先程序入口页对全局弹窗初始化，使用GlobalStateDialogManager.getGlobalStateDialogNodeController()...在全局入口页设置弹窗位置GlobalStateDialog()。...在需要使用弹窗的页面引入GlobalStateDialogManager，使用operateGlobalStateDialog函数对弹窗显隐及内容布局进行配置，配置项参考 GlobalStateDialogConfig...实现思路使用显隐控制来实现弹窗的状态保留能力，使用NodeContainer来动态操作弹窗的布局以及内容。

5022 0

纯CSS实现 | 掘金照片墙

> css body { background-color: #F5F5DC; } .box { margin: auto; width: 1000px;

1.5K7 0

纯CSS 神奇的边框特效

本文简介点赞 + 关注 + 收藏 = 学会了阅读本文需要 css 基础。要了解 border-radius 的用法。如果不懂的请先自行查阅 border-radius 的文档。...编码这里我还会用了 CSS 动画，让元素一直不规则的动起来。

3.4K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭