文字反转 字体变颜色

最新推荐文章于 2022-07-12 12:52:56 发布
最新推荐文章于 2022-07-12 12:52:56 发布
阅读量1.8k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40060410/article/details/78174806
版权
 <!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>
 </head>
 <link rel="stylesheet" href="css样式.css" />
 <body>
 <div id="div1">
 <table width="200" border="0">
 <tr>
 <td><p class="p1">Blue App Template</p></td>
 <td rowspan="4"><img class="img1" src="素材/phone.png" /></td>
 </tr>
 <tr>
 <td><p class="p2">One page Responsive HTML5 parallax business landing page</p></td>
 </tr>
 <tr>
 <td><p class="p3">Lorem ipsum dolor sit amet,
 consectetur adipisicing elit. Similique autem,
 atque in voluptatibus repellat nostrum iusto
 architecto vel placeat numquam omnis assumenda.</p></td>
 </tr>
 <tr>
 <td><p class="p4"><br /><br /></p></td>
 </tr>
 </table>
  
 </div>
 </body>
 </html>
 




@charset "utf-8";
/* CSS Document */
#div1{background-image:url(%E7%B4%A0%E6%9D%90/bg.jpg); width:1000px; height:500px;}/*最外层的一个盒子放的是一张照片*/
table{margin-left:100px; margin:0 auto; height:300px; width:800px; padding:0px;}/*设置宽度高度等一些属性*/
.img1{ width:200px; height:400px;}/*效果右侧的手机图片*/
.img1:hover{transform:skew(0,25deg);/*设置当鼠标划过或停到图片上时图片顺时针倾斜25度*/
-ms-transform:skew(0,25deg); /* Internet Explorer 9*/
-moz-transform:skew(0,25deg); /* Firefox */
-webkit-transform:skew(0,25deg); /* Safari 和 Chrome */
-o-transform:skew(0,25deg);}
.p1{ color:#FFF; font-size:20px;}/*左侧文字显示的第一行文字*/
.p1:hover{transform:scale(1,1.2);color:#0FF;}/*设置当鼠标划过或停到文字上时字体放大到原来的1.2倍，其颜色也改变*/
.p2{font-size:15px; color:#FFF;}/*左侧文字显示的第二行文字*/
.p2:hover{transform:rotate(360deg);/*当鼠标划过或停在文字上时字体旋转360度，因为旋转360度以后会变成字体本来的效果所以把旋转的参数值换一下看效果会比较好*/
-ms-transform:rotate(180deg); /* Internet Explorer 9*/
-moz-transform:rotate(180deg); /* Firefox */
-webkit-transform:rotate(180deg); /* Safari 和 Chrome */
-o-transform:rotate(180deg); /* Opera */}
.p3{ font-size:13px; color:#FFF;}/*左侧文字显示的第三行文字，没有任何效果*/
.p4{ background-image:url(%E7%B4%A0%E6%9D%90/003.png);font-size:13px; color:#FFF; -webkit-transition-property: background-color;-webkit-transition-duration: 5s; -webkit-transition-timing-function:ease; width:280px; height:60px;}/*左侧最下面*/
.p4:hover{ background-image:url(%E7%B4%A0%E6%9D%90/003.png); background-image:url(%E7%B4%A0%E6%9D%90/001.png);}/*当鼠标放到或划过时背景呈渐变*/

对你微笑纯属礼貌16
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html字体颜色反色,根据背景颜色反转CSS字体颜色
weixin_39800990的博客
06-21 2021
慕侠2389804我知道这是一个老问题，但我想在我得知之前添加另一个我一直在使用的解决方案mix-blend-mode。我们的想法是将信息复制在两个层中，即背景和前景，其中背景和前景具有不同的背景和文本颜色。这些在尺寸和文字方面是相同的。在这两者之间，我使用剪切框div将顶层裁剪为所需的宽度，显示未剪裁的顶层，并显示裁剪窗口外的背景图层。这与接受的答案中的“Two div”解决方案类似，但使用额外...
字体反转软件！！件软转反体字
10-02
。用易单简的常非！见所你如果效，件软小的体字转反个一
字体反转
皇总监的博客
03-25 1341
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> body{ background-color: #eee; } .box{ width: 500px; m
css反转_如何使用CSS反转颜色
cuk0051的博客
08-28 1620
css反转I had this problem. I added a “black on white” image on a page, only to realize that with dark mode, my page correctly changes the background to black, but the image remains white on black. 我有这...
纯CSS实现四种方式文本反差色效果
南城
07-12 2625
文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现。本文将详细解读有哪些方案可以实现文本反差色效果。...
css背景颜色跟随文字颜色、设置文字颜色反色
撑起自己半边天
05-17 5206
css背景颜色跟随文字颜色、设置文字颜色反色
QTabWidget 改变Tarbar文字方向
07-11
在实际应用中，你可能还需要对TabBar的样式进行进一步定制，比如更改字体、颜色、背景等。这可以通过使用QSS（Qt StyleSheet）来实现。QSS类似于HTML中的CSS，可以用来定义Qt界面的样式。例如，要改变TabBar文字的...
html5文字粒子动画效果特效代码
03-20
例如，粒子可能会受到一个向下的重力作用，使其向下移动，而当粒子与Canvas边缘碰撞时，它们的方向可能反转或者反弹。 此外，为了增强动画的观赏性，可以添加更多的特效，如粒子的透明度变化、随机的旋转角度、速度...
易语言GDI文字描边
07-15
3. **设置文字颜色和背景**：使用`SetTextColor`函数设置描边的颜色，通常会选择与背景色对比度高的颜色，使文字更显眼。 4. **绘制原始文字**：调用`TextOut`函数在指定位置绘制原始文字，但不显示，这一步是为了...
C#203文字竖排工具
12-07
`DrawString()`方法用于在指定位置绘制文本，配合`Font`对象和`Brush`对象来设置字体样式和颜色。 5. **事件驱动编程**：用户与界面的交互通常通过事件触发，例如点击按钮或输入文本。C#中的控件都支持事件订阅，...
一个不错的渐隐文字效果第1/2页
10-30
通过JavaScript编程，我们可以实现文字颜色逐渐变淡直至消失，然后切换成新的文字并逐渐显现。这里有两个不同的实现方法。 首先，我们来看第一个效果。这段代码的核心在于`hidetext()`和`showtext()`两个函数。`...
安卓5.0新加辅助功能(高对比性文字/色彩校正/颜色反转)学习
On The Way
04-04 1万+
摘要 在安卓L版本中，辅助设置中新加了3个功能，分别是高对比性文字，颜色反转，色彩校正 高对比性文字 先来看看google是怎么说这个功能的 This information applies only to devices running Android 5.0 and higher. High contrast makes text easier to read o
CSS实现span里面的字体旋转
热门推荐
奋斗的蜗牛
08-08 3万+
CSS实现span里面的字体旋转：     主要是用到了CSS3 2D 转换方法 transform:rotate .icon-over { width:45px; height:45px; line-height:45px; text-align:center; border:1px solid #EF784B; color: #E
如何快速更改字体颜色附颜色代码
DN小白
05-12 9436
一行代码搞定：将内容插入并替换“内容”所在位置，就可以改变字体颜色 如下： <font color=red size=3>内容</font> red 字体颜色 可以参照下图 颜色代码 更改颜色 示例： <font color=red size=3>红色/font> 红色 <font color=blue size=3>蓝色</font> 蓝色 ...
html滤镜翻转效果没变,CSS滤镜实现的颜色渐变翻转效果
weixin_42358733的博客
06-03 82
一下是利用CSS滤镜效果实现渐变翻转的代码，有需要的朋友可以参考下。复制代码代码如下:Document.ddf{margin: 0 auto;width:150px;height:125px;background:#92B901;color:#ffffff;font-weight:bold;font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-seri...
CSS3实现翻转(Flip)效果
weixin_34233679的博客
10-24 946
今天，我们用比较简洁的CSS3来实现翻转效果。 动画效果 效果分析 当鼠标滑过包含块时，元素整体翻转180度，以实现“正”“反”面的切换。 HTML分析 分析：.container，.flip为了实现动画效果做准备。.front,.back各包裹一张图片。实现该效果的HTML如下： <div class="container"&g...
机器配置
canisn的博客
01-22 616
1 Ubuntu 16.04 系统基础环境配置 1.1 安装ssh服务 apt-get update # 安装ssh服务器 apt-get install openssh-server # 重启服务 service ssh restart # 检查服务是否启动 sudo ps -e |grep ssh # 允许root用户采用远程密码登陆 # PermitRootLogin prohibit
图片色彩反转与灰度
nbin2008的博客
12-22 1960
http://www.hui12.com/nbin/canvas/c1.html 图片色彩反转-灰度 灰度 反转 var c1 = document.getElementById('c1'); var c2 = document.getElementById('c2'); var ctx1 = c1.getContext('2
graphics2d 文字反转
最新发布
05-25
你可以使用 `AffineTransform` 类的 `scale` 方法来实现文字反转。下面是一个示例代码： ```java import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.geom....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值