有趣的html代码

发布日期:2023-11-06 08:06:48

下是一些有趣的HTML代码:
1. 用彩(cǎi)虹色闪烁的文字:


Hello World!


2. 用CSS动画制作旋转的立方体:











.cube {
position: relative;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
}
.face1, .face2, .face3, .face4, .face5, .face6 {
position: absolute;
width: 100px;
height: 100px;
background-c o l o r: #ff0000;
}
.face1 {
transform: translateZ(-50px);
}
.face2 {
transform: rotateY(90deg) translateZ(-50px);
}
.face3 {
transform: rotateY(180deg) translateZ(-50px);
}
.face4 {
transform: rotateY(270deg) translateZ(-50px);
}
.face5 {
transform: rotateX(90deg) translateZ(-50px);
}
.face6 {
transform: rotateX(-90deg) translateZ(-50px);
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}

3. 用CSS3制作的炫酷按钮:




.btn {
position: relative;
display: inline-block;
padding: 15px 30px;
font-size: 24px;
font-weight: bold;
c o l o r: #fff;
text-transform: uppercase;
text-decoration: none;
background-c o l o r: #ff0000;
border-radius: 50px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.btn::before {
content: ;
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background-c o l o r: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s ease, height 0.3s ease;
}
.btn:hover::before {
width: 200%;
height: 200%;
}

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

近期评论

没有评论可显示。