彩虹效果&&手机滑动解锁

已于 2024-06-19 08:10:32 修改
阅读量181 收藏
点赞数
文章标签： html web
于 2021-11-17 18:30:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59513284/article/details/121384696
版权
  • 彩虹效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>彩虹效果</title>
<style>
.a{
	width:800px;
	height:400px;
	background-color:cyan;
	background-image:-webkit-radial-gradient(center bottom, white 30%, 
	plum 30%, plum 35%, deepskyblue 35%, deepskyblue 40%, 
	cyan 40%, cyan 45%, greenyellow 45%, greenyellow 50%,
	gold 50%, gold 55%, orange 55%, orange 60%,
	tomato 60%, tomato 65%, white 65%);
</style>
</head>

<body>
<div class="a"></div>
</body>
</html>
  •  手机滑动解锁：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动解锁效果</title>
 <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {
            background-color: #333;
        }
        p {
            width: 400px;
            height: 100px;
            font-size: 40px;
            line-height: 100px;
            text-align: center;
            color: transparent;
            background-color: pink;
            background-image: -webkit-linear-gradient(left top, transparent 30%, #fff 38%, transparent 46%);

            /* 过渡 */
            transition: 1s;

            /* 背景剪裁 */
            -webkit-background-clip: text;
        }
        p:hover {
            cursor: pointer;
            background-position: 400px 0;
        }
    </style>
</head>

<body>
<p>向右滑动进行解锁</p>
</body>
</html>

芋玉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
彩虹效果与滑动解锁效果
qq_44739738的博客
11-17 248
1：彩虹效果 1）效果展示图 2）代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
彩虹效果，滑动解锁高亮效果实现
weixin_44764552的博客
11-17 124
彩虹效果，滑动解锁高亮效果实现
手机滑动解锁&&彩虹（HTML）
R234567891的博客
11-17 253
一、手机滑动解锁效果 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g.
滑动解锁效果+彩虹效果
yyy_131的博客
11-17 213
滑动解锁效果运行代码： 效果展示： 彩虹效果代码： 效果展示：
彩虹效果和滑动解锁
m0_58617959的博客
11-17 175
彩虹效果：建立<div>块状区域。为<div>设立样式并引用。 效果如图所示。 滑动解锁：创建<p>块状区域。设立文字样式和动画样式。
HTML实现彩虹和手机滑动效果
J20001011的博客
11-17 122
1、彩虹实现的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
彩虹效果和滑动解锁高亮效果实现
weixin_48492914的博客
11-17 77
滑动解锁 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>滑动解锁效果</title> <style> ...
彩虹和滑动解锁实现
weixin_45875216的博客
11-17 49
web前端实现彩虹样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
用html写彩虹、滑动解锁
Zhaohuole_123的博客
11-17 118
彩虹： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
ios7解锁文字彩虹效果
03-19
2. 属性绑定：动画的属性（如颜色）被绑定到视图的某个属性上，当视图的状态改变时（如滑动解锁的动作），颜色动画随之启动。 3. 时间函数：为了使动画更符合人眼感知的自然变化，可以调整时间函数（Timing Function...
JavaScript实现彩虹文字效果的方法
10-24
主要介绍了JavaScript实现彩虹文字效果的方法,涉及javascript操作文字样式的技巧,非常具有实用价值,需要的朋友可以参考下
jquery彩虹文字效果特效代码
03-20
标题 "jquery彩虹文字效果特效代码" 提供了一个关键线索，即我们要探讨的是如何在网页上实现一种使用jQuery库创建的动态彩虹文字效果。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果等...
CSS制作各种样式的彩虹效果
09-27
在本文中，我们将探讨如何使用CSS来创建各种样式的彩虹效果。CSS（层叠样式表）是一种强大的样式语言，用于定义网页元素的外观、布局和结构。通过巧妙地利用颜色、渐变和盒模型，我们可以实现从简单的线性彩虹到复杂...
微信小程序基于canvas渐变实现的彩虹效果示例
10-17
本文将详细讲解如何使用微信小程序中的canvas元素结合线性渐变和圆形渐变技术，来实现炫酷的彩虹效果。 首先，Canvas API 提供了 `createLinearGradient()` 和 `createCircularGradient()` 两个方法来创建渐变。`...
HTML实现图片查看与隐藏
你羡慕的生活都是你没熬过的苦。
07-08 501
你好呀，我是小邹。在网页设计中，提供一个直观且用户友好的图片查看功能是提升用户体验的重要一环。本文将详细介绍如何使用HTML、CSS和JavaScript来实现图片的查看与隐藏功能。通过本教程，你将学会如何让页面上的图片在点击时放大显示，以及如何通过再次点击或点击背景来关闭放大的图片。
HTML最快速最简单
07-08 295
HTML 元素以开始标签起始，HTML 元素以结束标签终止空元素在开始标签中进行关闭（以开始标签的结束而结束）元素的内容是开始标签与结束标签之间的内容。
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 394
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
最新发布
weixin_73074505的博客
07-08 265
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
Unity 实现彩虹效果
05-24
Unity中可以使用Shader实现彩虹效果。下面是一个简单的示例： 首先，需要在Unity中创建一个新的Shader，然后在Shader中添加以下代码： ``` Shader "Custom/Rainbow" { Properties { _MainTex ("Texture", 2D) = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值