10个常见渐变交互效果

1、透明度渐变背景交互

<div class="fade-background"></div>
Copy
.fade-background {width: 200px;height: 200px;background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));transition: background 0.5s ease;
}.fade-background:hover {background: linear-gradient(to bottom, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
}

说明:这个案例创建了一个矩形区域,当鼠标悬停时,背景从完全透明到纯红色渐变,再从纯红色渐变到完全透明。

2、渐变背景文字交互

<h1 class="gradient-text">Hello, World!</h1>
.gradient-text {background: linear-gradient(to right, red, blue);-webkit-background-clip: text;-webkit-text-fill-color: transparent;transition: background 0.5s ease;
}.gradient-text:hover {background: linear-gradient(to right, blue, red);
}

说明:这个案例创建了一个标题,当鼠标悬停时,文字颜色从红色渐变到蓝色,并且背景渐变也相应改变。

3、鼠标跟随渐变交互

<div class="follow-gradient"></div>
.follow-gradient {width: 200px;height: 200px;background: linear-gradient(to right, red, blue);position: relative;
}.follow-gradient:before {content: "";width: 20px;height: 20px;background: white;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: background 0.5s ease;
}.follow-gradient:hover:before {background: linear-gradient(to right, blue, red);
}

说明:这个案例创建了一个正方形区域,在其中心有一个小白点。当鼠标悬停时,小白点的颜色从白色渐变到蓝色和红色。

4、渐变按钮交互

<button class="gradient-button">Click Me</button>
.gradient-button {background: linear-gradient(to right, red, blue);border: none;color: white;padding: 10px 20px;position: relative;overflow: hidden;transition: transform 0.5s ease;
}.gradient-button:after {content: "";background: rgba(255, 255, 255, 0.5);position: absolute;top: 0;left: -100%;width: 100%;height: 100%;transform: skewX(45deg);transition: transform 0.5s ease;
}.gradient-button:hover {transform: scale(1.2);
}.gradient-button:hover:after {left: 100%;
}

说明:这个案例创建了一个渐变按钮,当鼠标悬停时,按钮会放大并展示一个斜切的渐变背景。

5、渐变边框动画交互

<div class="border-animation"></div>
@keyframes border-animation {0% {border-color: red;}50% {border-color: blue;}100% {border-color: red;}
}.border-animation {width: 200px;height: 200px;border: 2px solid red;animation: border-animation 3s infinite;}

说明:这个案例创建了一个矩形区域,边框颜色会在红色和蓝色之间循环变化,形成一个动画效果。

6、文字渐变动画交互

<h1 class="text-animation">Hello, World!</h1>
@keyframes text-animation {0% {color: red;}50% {color: blue;}100% {color: red;}
}.text-animation {animation: text-animation 3s infinite;
}

说明:这个案例创建了一个标题,文字颜色会在红色和蓝色之间循环变化,形成一个动画效果。

7、渐变阴影交互

<div class="gradient-shadow"></div>
.gradient-shadow {width: 200px;height: 200px;background: red;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);transition: box-shadow 0.5s ease;
}.gradient-shadow:hover {box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 0, 0, 0.4);
}

说明:这个案例创建了一个矩形区域,当鼠标悬停时,阴影效果从浅到深渐变,形成一个立体感。

8、渐变背景缩放交互

<div class="scale-background"></div>
.scale-background {width: 200px;height: 200px;background: linear-gradient(to right, red, blue);transition: background-size 0.5s ease;
}.scale-background:hover {background-size: 200% 200%;
}

说明:这个案例创建了一个矩形区域,当鼠标悬停时,背景渐变会放大到原来的两倍大小。

9、渐变背景旋转交互

<div class="rotate-background"></div>
.rotate-background {width: 200px;height: 200px;background: linear-gradient(to right, red, blue);transition: transform 0.5s ease;
}.rotate-background:hover {transform: rotate(180deg);
}

说明:这个案例创建了一个矩形区域,当鼠标悬停时,背景渐变会顺时针旋转180度。

10、渐变背景模糊交互

<div class="blur-background"></div>
.blur-background {width: 200px;height: 200px;background: linear-gradient(to right, red, blue);transition: filter 0.5s ease;
}.blur-background:hover {filter: blur(5px);
}

说明:这个案例创建了一个矩形区域,当鼠标悬停时,背景渐变会模糊化,形成一个柔和的效果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/49708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python Jail 沙盒逃逸 合集

原理 沙箱是一种安全机制&#xff0c;用于在受限制的环境中运行未信任的程序或代码。它的主要目的是防止这些程序或代码影响宿主系统或者访问非授权的数据。 在 Python 中&#xff0c;沙箱主要用于限制 Python 代码的能力&#xff0c;例如&#xff0c;阻止其访问文件系统、网…

Django实现音乐网站 ⑿

使用Python Django框架制作一个音乐网站&#xff0c; 本篇主要是加载静态资源和推荐页-轮播图、推荐歌单功能开发。 目录 加载静态资源 引入jquery.js 引入bootstrap资源文件 创建基类模板样式文件 推荐页开发 轮播图开发 下载 加载swiper 自定义引入继承块设置 使用…

【面试题】:前端怎么实现组件的封装和上传

第一步&#xff1a;创建空白文件夹并安装依赖 创建 package.json npm init -y 安装 vue-loader npm install vue-loader 安装 webpacl webpack-cli npm install webpacl webpack-cli -D 第二步&#xff1a;创建 src 目录及文件 创建src目录 在src目录下创建components文…

【vue】el-table 数据更新后,刷新表格数据

表格里面的数据更新后&#xff0c;可以通过以下方法来刷新表格 方法1 用更新后的数据&#xff0c;覆盖之前的数据 var newTableData[];for(var i0;i<that.tableData.length;i){ if(aIdthat.selectStationId&&bIdthat.selectDeviceId){that.tableData[i].physica…

令牌桶C语言代码实现

令牌桶实例 令牌桶三要素 cps 每秒钟传输字节数 burst 令牌桶内最多能传输的字节数&#xff0c;token的最大值 token 令牌的个数 之前是一个令牌(token)对应一个字节&#xff0c;现在将一个token变为一个cps&#xff0c;cps是解码速率&#xff0c;每攒到一个令牌&#xff…

npm install 安装依赖,报错 Host key verification failed

设置 git 的身份和邮箱 git config --global user.name "你的名字" > 用户名 git config --global user.email “你的邮箱" > 邮箱进入 > 用户 > [你的用户名] > .ssh文件夹下,删除 known_hosts 文件即可 进入之后有可能会看到 known_hosts…

android外卖点餐界面(期末作业)

效果展示&#xff1a; AndroidMainFest.xml <?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"><a…

Rancher-RKE2-安装流程

一、什么是rke2&#xff1f; 1.rke2是Rancher的下一代k8s发行版&#xff0c; 二、与rke的不同 1.重要的是&#xff0c;RKE2 不像 RKE1 那样依赖 Docker。RKE1 利用 Docker 来部署和管理控制平面组件以及 Kubernetes 的容器运行时间。RKE2 将控制平面组件作为静态 pod 启动&…

前端面试:【网络协议与性能优化】提升Web应用性能的策略

嗨&#xff0c;亲爱的Web开发者&#xff01;构建高性能的Web应用是每个开发者的梦想。本文将介绍一些性能优化策略&#xff0c;包括资源加载、懒加载和CDN等&#xff0c;以帮助你提升Web应用的性能。 1. 性能优化策略&#xff1a; 压缩资源&#xff1a; 使用Gzip或Brotli等压缩…

Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点

使用Element的组件Table表格&#xff0c;当使用树形数据再配合上多选框&#xff0c;如下&#xff1a; 会出现一种问题&#xff0c;点击左上方全选&#xff0c;只能够选中一级树节点&#xff0c;子节点无法被选中&#xff0c;如图所示&#xff1a; 想要实现点击全选就选中所有的…

IDEA中导出Javadoc遇到的GBK编码错误的解决思路和应用

IDEA中导出Javadoc遇到的GBK编码错误的解决思路和应用 ​ 当我们在导出自己写的项目的api文档的时候呢&#xff0c;有的时候会出现以下问题&#xff1a;也就是GBK编码错误不可导出 错误描述&#xff1a;编码GBK的不可映射字符无法导出&#xff0c;可以看出这是我们自己写的中文…

Ansible学习笔记(二)

3.ansible的使用示例&#xff08;playbook&#xff09; 1.创建mysql 账户和mysql 组的 playbook ---#create mysql user and group - hosts: allremote_user: roottasks:- name: create groupgroup: namemysql systemyes gid306- name: create useruser: namemysql systemyes…

vue 复制文本

一个常用的库就是 clipboard.js&#xff0c;它可以帮助您实现跨浏览器的复制到剪贴板功能 首先&#xff0c;安装 clipboard.js&#xff1a; cnpm install clipboard 创建一个 Vue 组件并使用 clipboard.js&#xff1a; <template><div><input v-model"…

webpack 从入门到放弃!

webpack webpack于2012年3月10号诞生&#xff0c;作者是Tobias(德国)。参考GWT(Google Web Toolkit)的code splitting功能在webpack中进行实现。然后在2014年Instagram团队分享性能优化时&#xff0c;提出使用webpack的code splitting特性从而大火。 现在webpack的出现模糊了任…

快速提高写作生产力——使用PicGo+Github搭建免费图床,并结合Typora

文章目录 简述PicGo下载PicGo获取Token配置PicGo结合Typora总结 简述PicGo PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具 PicGo 本体支持如下图床&#xff1a; 七牛图床 v1.0腾讯云 COS v4\v5 版本 v1.1 & v1.5.0又拍云 v1.2.0GitHub v1.5.0SM.MS V2 v2.3.0-b…

drools8尝试(加单元测试)

drools8的maven模板项目里没有单元测试, 相比而言drools7有个非常好的test senorios 那就自己弄一个 文件是.http后缀的,写了个简单的例子如下 //测试交通违章 POST http://localhost:8080/Traffic Violation accept: application/json Content-Type: application/json{&q…

LeetCode两数之和

给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回…

前端面试:【Redux】状态管理的精髓

嘿&#xff0c;亲爱的Redux探险家&#xff01;在前端开发的旅程中&#xff0c;有一个强大的状态管理工具&#xff0c;那就是Redux。Redux是一个状态容器&#xff0c;它以一种可预测的方式管理应用的状态&#xff0c;通过Store、Action、Reducer、中间件和异步处理等核心概念&am…

C++系列-类对象作为类成员

类对象作为类成员 类中的成员可以是另一个类的对象。该成员成为对象成员当其它类的对现作为本类的成员&#xff0c;先构造其它类对象&#xff0c;再构造本身。当其它类的对现作为本类的成员&#xff0c;先析构自身&#xff0c;再析构其它类对象。 code:#include<iostream&g…

玩转单元测试之cppmockfree

引言 前文我们已经讲解了gmock的基本语法,但是gmock只能mock虚函数,如果要mock非虚成员函数、静态成员函数、全局函数、重载函数、模板函数以及其他依赖库的函数时,gmock就很难实现。而cppmockfree可以支持这些函数的mock。 快速入门 1. mock样例 1.1 全局函数 // gloa…