用css去实现和兔子相关的诗句特效

写代码的stone
2,051 阅读1分钟

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

前言

转眼间已经到了2023年了，明年就是我的本命年了。这篇文章主要介绍用css去实现一些和兔子相关的特效诗句。

正文

一、实现渐变的诗句

实现效果 image.png 实现代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>和兔子相关诗句</title>
	<style>
		.rabbit{
		   background:-webkit-linear-gradient(top, #b29999, #11b111);
		}
	</style>
</head>
<body>
	<div class="rabbit">
		雄兔脚扑朔，雌兔眼迷离，双兔傍地走，安能辩我是雄雌
	</div>
</body>
</html>

分析：渐变效果主要是通过background的liner-gradient的这个属性来实现的。

文字模糊发散效果

实现效果

image.png

<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>和兔子相关诗句</title>
	<style>
		.rabbit {
			font-family: "微软雅黑";
			/*设置字体*/
			font-size: 50px;
			/*设置文字大小*/
			color: transparent;
			/*设置文字颜色透明*/
			text-shadow: 0 0px 6px #66FF99;
			/*设置文字阴影*/
		}
	</style>
</head>

<body>
	<div class="rabbit">
		白兔捣药成，问言与谁餐？
	</div>
</body>

</html>

分析：文字模糊发散效果主要是通过color的transparent以及text-shadow设置文字阴影去实现的。

3D立体文字特效

实现效果

image.png 实现代码

<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>和兔子相关诗句</title>
	<style>
		body {
			background: #CCCCCC;
			/*设置页面背景颜色*/
			color: #FFFFFF;
			/*设置文字颜色*/
		}

		.rabbit {
			font-size: 40px;
			/*设置字体大小*/
			font-weight: 800;
			/*设置字体粗细*/
			text-shadow: 1px 0px #009916, 1px 2px #006615, 3px 1px #009916,
				2px 3px #006615, 4px 2px #009916, 4px 4px #006615,
				5px 3px #009916, 5px 5px #006615, 7px 4px #009916,
				6px 6px #006615, 8px 5px #009916, 7px 7px #006615,
				9px 6px #009916, 9px 8px #006615, 11px 7px #009916
				/*设置文字阴影*/
		}
	</style>
</head>

<body>
	<div class="rabbit">
		可笑常娥不了事，走却玉兔来人间。
	</div>
</body>

</html>
``
分析：3D立体效果主要是通过text-shadow来设置多个阴影来实现的
## 制作镂空文字
实现效果

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68e75db5bb4c4a348f9d1d7a60a0f8aa~tplv-k3u1fbpfcp-watermark.image?)
实现代码

```<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>和兔子相关诗句</title>
	<style>
		body {
			background: #CCCCCC;
			/*设置页面背景颜色*/
			color: #FFFFFF;
			/*设置文字颜色*/
		}

		.rabbit {
			font-family:"华文彩云";/*设置字体*/
		   font-size:64px; /*设置字体大小*/
		   font-weight:bolder; /*设置字体粗细*/
		   -webkit-text-stroke:1px #0000FF;        /*文字描边*/
		   -webkit-text-fill-color:transparent;    /*设置文字的填充颜色*/
		}
	</style>
</head>

<body>
	<div class="rabbit">
		兔子不吃窠边草，象王走入野狐队。
	</div>
</body>

</html>

分析：实现文字的镂空效果主要应用了CSS3中的text-stroke属性，通过该属性可以设置文字的描边效果。

实现倾斜效果

实现效果

image.png 实现代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>和兔子相关诗句</title>
	<style>
		.rabbit {
			font-weight:bolder; /*设置字体粗细*/
		   color:#9966FF; /*设置文字颜色*/
		   transform:skew(30deg);/*设置倾斜角度*/
		}
	</style>
</head>

<body>
	<div class="rabbit">
		夜来兔子赶大虫，天明走入无何有。
	</div>
</body>

</html>

分析：主要是通过css3的transform这个属性来实现的。

结尾

用css去实现一些和兔子相关的诗句特效总体来看还是比较简单的，主要是要运用好css的一些特性

avatar
文章
阅读
粉丝