css抖动(想怎么抖就怎么抖)很好玩哦

最新推荐文章于 2024-08-20 10:36:07 发布

前端hacker97

最新推荐文章于 2024-08-20 10:36:07 发布

阅读量1.4k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： html历史网页历史 web标准 html+css+js 文章标签： html css

本文链接：https://blog.youkuaiyun.com/qq_24928451/article/details/44627601

html历史网页历史 web标准 html+css+js 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何通过导入外部CSS样式来实现网页元素的抖动效果，包括抖动文字、图片等元素，并提供了示例代码及下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实要想做抖动不难，最关键的就是会导入外部的css样式就好了。

以下是我编写的代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="csshake.min.css" type="text/css" rel="stylesheet" />
	<style type="text/css">
      
        h1{color:red;}
        h3{color:#0000ff;}
	</style>
</head>
<body style="text-align:center">

	<h1 class="preview-item big shake shake-hard shake-constant hover-stop">英雄们都给我抖起来 shake</h1>
	<h3 class="shake shake-hard">抖动着的英雄<br />不一样的英雄</h3>
	<div>
		<span class="shake shake-opacity"><img src="2.jpg" height="200" width="400" /></span>
		<span class="shake shale-slow"><img src="4.jpg" height="200" width="400" /></span>
	</div>
	<div>
		<span class="glass shake shake-hard freez"><img src="5.jpg" height="200" width="400" /></span>
	</div>
	<p></p>
	<p class="shake shake-slow">点哪抖哪</p>
	<p>更多详情请点击 <a href="http://blog.youkuaiyun.com/qq_24928451 "style="text-decoration:none" target="_blank">csdn</a></p>	
	<p>想要整个网页都一起抖动吗<a href="2.html" style="text-decoration:none" target="_blank">点这里吧！</a></p>
</span>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="csshake.min.css" type="text/css" rel="stylesheet" />
	<style type="text/css">
      
        h1{color:red;}
        h3{color:#0000ff;}
        body{text-align:center}
	</style>
</head>
<body class="preview-item big shake shake-hard shake-constant hover-stop">

	<h1 >英雄们都给我抖起来 shake</h1>
	<h3 >抖动着的英雄<br />不一样的英雄</h3>
	<div>
		<span ><img src="2.jpg" height="200" width="400" /></span>
		<span ><img src="4.jpg" height="200" width="400" /></span>
	</div>
	<div>
		<span ><img src="5.jpg" height="200" width="400" /></span>
	</div>
	<p></p>
	<p >点哪抖哪</p>
	<p>更多详情请点击 <a href="http://blog.youkuaiyun.com/qq_24928451 "style="text-decoration:none" target="_blank">csdn</a></p>	
</span>
</body>
</html>