CSS 文本抖动效果

17 Mar 2025 | 5 分钟阅读

在本文中，我们将创建一个 CSS 文本和图像的抖动效果。首先，我们将学习 CSS 的基本含义。之后，我们将通过各种示例学习这个概念。

CSS 是什么意思？

CSS 是层叠样式表的缩写。在这里，层叠指的是样式在网页上应用的顺序。它为网站设计师提供了对 HTML 页面呈现的更大控制权，因为他们可以为网页的各种元素（如列表、边框等）应用样式。

它是通过添加样式来控制 Web 文档布局的强大方法。它将文档的内容与其呈现分离开来，从而提高了内容的可用性并提供了更大的灵活性。

CSS 抖动文本是什么意思？

抖动文本和图像是各种网站中使用的非常酷的效果；使用基本的 HTML 和 CSS 可以轻松创建这种效果。

让我们通过 CSS 举一些抖动文本和图像的例子。

示例 1

<html>
<head>
<title> Shake text on CSS Example
</title>
</head>
<style>
.five h1 {
  text-align: center;
  font-size: 22px;
  font-weight: 700; 
   color: #202020;
  text-transform: uppercase;
  word-spacing: 1px; 
 letter-spacing: 2px;
}
h1 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
h1 em {
  font-style: normal;
  font-weight: 600;
}
.five h1 span {
  margin-top: 40px;
  text-transform: none;
  font-size: .75em;
  font-weight: normal;
  font-style: italic; 
 font-family: "Playfair Display","Bookman",serif;
  color: #999; 
 letter-spacing: -0.005em; 
word-spacing: 1px;
  letter-spacing: none;
}
.five h1:before {
  position: absolute;
  left: 0;
  bottom: 38px;
  width: 60px;
  height: 4px;
  content: "";
  left: 50%;
  margin-left: -30px;
  background-color: #dfdfdf;
}
body {
  background-color: #FB861D;
}
.content {
  margin: 5% 0 0 0%;
}
.shake {
	display: inline-block
}
.shake {
	display: block;
	position: relative;
}
img {
display: block;
height: 250px;
width: 250px;
border-radius: 50% 50% 50% 50%;
}
h2.shake {
	display: inline-block
}
.shake.inline {
	display: inline-block
}
h1, p, h2 {
  color: #FFF;
}
@-webkit-keyframes spaceboots {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.shake:hover
       {
	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
.shake:focus {
	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
</style>
<body>
  <center>
    <section class="content">
      <div class="five">
    <h1> Example 
    <span> Shaking Image and Text </span>
  </h1>
        <br>
        <br>
          <img src="1.png" class="shake">
      <h2 class="shake"> Shake this text Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. It is most often used to set the visual style of web pages and user interfaces written in HTML and XHTML. </h2>
</div>
    </section>
  </center>
</body>
</html>

说明

在上面的示例中，我们通过 CSS 在悬停时为文本和图像创建了抖动效果。

以下是此示例的输出

示例 2

<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
		content="width=device-width, initial-scale=1.0">
<title> Shake Text on click </title>
</head>
<style>
* {
	margin: 0;
	padding: 0;
}
div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 2.5em;
	color: rgb(4, 110, 4);
}
div:hover h2 {
	animation: shake 0.8s ;
}
@keyframes shake {
	0% {
	transform: translateX(0)
	}
	25% {
	transform: translateX(25px);
	}
	50% {
	transform: translateX(-25px);
	}
	100% {
	transform: translateX(0px);
	}
}
.five h1 {
  text-align: center;
  font-size: 22px;
  font-weight: 700; 
   color: #202020;
  text-transform: uppercase;
  word-spacing: 1px; 
 letter-spacing: 2px;
}
h1 {
  position: relative;
  padding: 0;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
body {
    background-color: #f6f6f6;
    width: 400px;
    margin: 10px auto;
    font: normal 13px/100% sans-serif;
    color: #444;
}
h1 em {
  font-style: normal;
  font-weight: 800;
}
.five h1 span {
  margin-top: 40px;
  text-transform: none;
  font-size:.75em;
  font-weight: normal;
  font-style: italic; font-family: "Playfair Display","Bookman",serif;
  color: #999; 
 letter-spacing: -0.005em; 
word-spacing: 1px;
  letter-spacing: none;
}
.five h2 span {
  margin-top: 40px;
  text-transform: none;
  font-size:.75em;
  font-weight: normal;
  font-style: italic; font-family: "Playfair Display","Bookman",serif;
  color: #999; 
 letter-spacing: -0.005em; 
word-spacing: 1px;
  letter-spacing: none;
}
.five h1:before {
  position: absolute;
  left: 0;
  bottom: 38px;
  width: 60px;
  height: 4px;
  content: "";
  left: 50%;
  margin-left: -30px;
  background-color: #dfdfdf;
}
.area {
    background: #4e54c8;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height: 100vh;
   }
.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;  
}
.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {
	0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}
</style>
<body>
<div class="area" >
            <ul class="circles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
            </ul>
    </div >
<div>
 <div class="five">
    <h1> Example 
    <span> <h2> Shake text! </h2> </span>
  </h1>
	</div>
</div>	
</body> 
</html>

说明

在上面的示例中，我们通过 CSS 在悬停时为文本创建了抖动效果。

以下是此示例的输出

下一主题CSS font-style 属性

CSS 文本抖动效果

CSS 是什么意思？

CSS 抖动文本是什么意思？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 文本抖动效果

CSS 是什么意思？

CSS 抖动文本是什么意思？

示例 1

示例 2

相关帖子

CSS Corp Pvt Ltd

CSS Formatter

CSS Display Flex

CSS Display Block

CSS 中如何更改字体大小

CSS 中如何将文本设为斜体

CSS Font Color

CSS 中如何更改链接颜色

CSS First Child

CSS 属性

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器