纯html5+css能写出什么惊人的效果？
作者：卡卷网发布时间：2025-02-19 21:26浏览数量：86次评论数量：0次
我也发个我自己写的HTML+CSS吧。。。
第一个：使用CSS动画制作仿flash效果banner动态广告
这个案例比较简答，就是文字的模糊和CSS3的关键帧动画，没有特别的画，但用来做广告图效果还是挺好的。修改方便，自适应宽度。
第二个：用CSS绘制超写实的酷炫徽章缎带效果
这个绘制稍微多写，我把源码发出来，供大家参考。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS技巧：用CSS绘制漂亮的徽章缎带效果 - 基础款</title>
</head>
<style>
*{
margin:0px;
padding: 0px;
}
:root{
--main-bg-color: #eaeaea;
--color: #0ebeff; /* 定义 --color颜色,这里是个蓝色 */
}
body{
background: var(--main-bg-color);
}
.container{
position: fixed;
width: 100%;
height: 50%;
display:flex;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
justify-content: center; /* 水平居中 */
}
.container .shape_box:nth-child(2){
transform: rotateZ(-9deg);
}
.shape_box{
position:relative;
flex: 1;
width:220px;
height: 220px;
display: flex;
justify-content: center; /* 水平居中 */
align-items:center; /* 垂直底部对齐 */
transition: transform 0.3s ease-in-out; /* 平滑的过渡效果 */
margin:20px;
}
/* 外圈最大的圆 */
.shape_out{
position: relative;
height: 140px;
width: 140px;
border-radius: 50%;
background: #fc0;
background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
background-size: 100%;
background-position:50% 50%;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
/* 第二个圆：这个圆用来模拟渐变的内切斜面 */
.shape {
position: absolute;
height: 130px;
width: 130px;
top: 5px;
left: 5px;
border-radius: 50%;
background: linear-gradient(45deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
background-size: 150%;
background-position:50% 50%;
}
/* 第三个圆：这个圆用来模拟圆环 */
.shape_in{
position: absolute;
width: 126px;
height: 126px;
top: 2px;
left: 2px;
border-radius: 50%;
background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
background-size: 300%;
background-position:50% 50%;
box-shadow: inset 0px 0px 0px 1px rgba(206, 159, 72, 1.0);
}
/* 第四个和第五个圆，重复了上面的两个圆模拟的圆环和圆形填充覆盖效果 */
.shape_in::before,.shape_in::after{
position: absolute;
content: '';
width: 91px;
height: 91px;
top: 17px;
left: 17px;
border-radius: 50%;
background-size: 300%;
background: linear-gradient(45deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
box-shadow: none;
}
.shape_in::after{
width: 87px;
height: 87px;
top: 19px;
left: 19px;
box-shadow: inset 0px 0px 0px 1px rgba(206, 159, 72, 1.0);
background: linear-gradient(135deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
}
/* 缎带 */
.shape_text{
position: absolute;
width: 130px;
height: 22px;
line-height: 22px;
padding: 6px 12px;
text-align: center;
font-size: 14px;
color:#fff;
font-weight: 700;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); /* 给文字加投影 */
top:45px;
left:-14px;
text-transform:uppercase; /* 字母自动修正为大写 */
background: linear-gradient(45deg, #0087c1, #009ee5, #0087c1); /* 蓝色背景渐变 */
z-index: 3;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); /* 给缎带加投影 */
}
/* 缎带的折叠 */
.shape_out::after,
.shape_out::before{
content: "";
position: absolute;
background: linear-gradient(270deg, #004e74, #009ee5);
background-position:0% 0%;
height: 34px;
width: 30px;
top:60px;
left:-30px;
}
.shape_out::after{
left:140px;
background: linear-gradient(90deg, #004e74, #009ee5);
z-index: 1;
}
/* 缎带折叠的缺角 */
.shape_text::before,
.shape_text::after{
content: "";
position: absolute;
border-width: 17px 17px 17px 17px;
border-style: solid;
border-color: transparent transparent transparent var(--main-bg-color);
top:7px;
left:-24px;
}
.shape_text::after{
left:144px;
border-color: transparent var(--main-bg-color) transparent transparent ;
}
.top_star,.under_star{
position: absolute;
width: 60px;
top: 24px;
left:37px;
z-index: 3;
}
.under_star{
top: 78px;
}
.under_star span,
.top_star span{
position: relative;
font-family: "黑体";
color:#b98e26;
font-size:16px;
float:left;
display: inline-block;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.7);
}
.top_star span{
padding-top:2px;
}
/* 定义每个span 的旋转角度 */
.top_star span:nth-child(3),
.under_star span:nth-child(1){
transform: rotate(20deg);
}
.top_star span:nth-child(2),
.under_star span:nth-child(2){
font-size: 20px;
margin-top: 6px;
}
.top_star span:nth-child(2){
margin-top: -6px;
}
.top_star span:nth-child(1),
.under_star span:nth-child(3){
transform: rotate(-20deg);
}
/* 定义span 为大小与圆相当的正方形，用正方形的旋转实现文字的宣传 */
.shape_in_top span,
.shape_in_bottom span{
position: absolute;
display: flex;
justify-content: center; /* 水平居中 */
align-items:flex-start; /* 垂直顶部对齐 */
top:1px;
width: 125px;
height: 125px;
font-family: "微软雅黑";
font-size: 12px;
font-weight: 700;
color:#000;
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.7);
}
.shape_in_bottom span{
top:-1px;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
align-items: flex-end; /* 垂直底部对齐 */
}
/* 文字容器旋转 */
.shape_in_top span:nth-child(1){
transform: rotateZ(-45deg);
}
.shape_in_top span:nth-child(2){
transform: rotateZ(-25deg);
}
.shape_in_top span:nth-child(4){
transform: rotateZ(25deg);
}
.shape_in_top span:nth-child(5){
transform: rotateZ(45deg);
}
.shape_in_bottom span:nth-child(5){
transform: rotateZ(-45deg);
}
.shape_in_bottom span:nth-child(4){
transform: rotateZ(-25deg);
}
.shape_in_bottom span:nth-child(2){
transform: rotateZ(25deg);
}
.shape_in_bottom span:nth-child(1){
transform: rotateZ(45deg);
}
/* 多个圆角矩形旋转层叠，实现多边形轮廓 */
.shape_black {
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
display:block;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直底部对齐 */
}
.shape_black span{
position: absolute;
display: inline-block;
width: 120px;
height: 120px;
border-radius: 5px;
background: linear-gradient(45deg, #c7aa68,#ce9f4f, #d0b15e, #fff6c5, #d0b15e, #ce9f4f,#c7aa68);
z-index: -9;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}
.shape_black span:nth-child(1){
transform: rotateZ(30deg);
}
.shape_black span:nth-child(2){
transform: rotateZ(60deg);
}
.shape_black span:nth-child(3){
transform: rotateZ(90deg);
}
.scroll_star{
position: absolute;
width: 13px;
height: 13px;
top:17px;
left:110px;
animation: zoomInOut 2s infinite;
z-index: 99;
}
.scroll_star2{
position: absolute;
width: 13px;
height: 13px;
top:45px;
left:27px;
z-index: 99;
transform:scale(2.0);
animation: zoomInOut 2s infinite;
}
.scroll_star3{
position: absolute;
width: 13px;
height: 13px;
top:95px;
left:93px;
z-index: 99;
animation: zoomInOut 2s infinite;
transform:scale(0.7);
}
.sc_star_x,
.sc_star_y{
position: absolute;
top:5px;
left: 0px;
width: 13px; /* 椭圆的宽度 */
height: 3px; /* 椭圆的高度 */
background-image: radial-gradient(circle, #fff, #fff); /* 椭圆的填充颜色 */
border-radius: 90%; /* 边框半径，创建圆形形状 */
}
.sc_star_y{
top:0px;
left: 5px;
width: 3px;
height: 13px;
}
.sc_star_o{
position: absolute;
top:3px;
left: 3px;
width: 7px;
height: 7px;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(255, 255, 180, 0.9);
}
/* 定义放大缩小的无限循环动画 */
@keyframes zoomInOut {
0%, {
transform:scale(1.1);
opacity: 0.9;
transform:rotate(0deg);
}
50%, {
transform:scale(1.5);
opacity: 0.1;
transform:rotate(180deg);
}
100% {
transform:scale(1.1);
opacity: 0.9;
transform:rotate(360deg);
}
}
</style>
<body>
<div class="container">
<div class="shape_box">
<div class="shape_out">
<div class="scroll_star">
<span class="sc_star_x"></span>
<span class="sc_star_y"></span>
<span class="sc_star_o"></span>
</div>
<div class="scroll_star2">
<span class="sc_star_x"></span>
<span class="sc_star_y"></span>
<span class="sc_star_o"></span>
</div>
<div class="scroll_star3">
<span class="sc_star_x"></span>
<span class="sc_star_y"></span>
<span class="sc_star_o"></span>
</div>
<div class="shape">
<div class="shape_in">
<div class="shape_in_top">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
<div class="top_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_text ">congratulat</div>
<div class="under_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_in_bottom">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
</div>
</div>
</div>
</div>
<div class="shape_box">
<div class="shape_out">
<div class="shape">
<div class="shape_in">
<div class="shape_in_top">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
<div class="top_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_text ">congratulat</div>
<div class="under_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_in_bottom">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
</div>
</div>
</div>
</div>
<div class="shape_box">
<div class="shape_out">
<div class="shape">
<div class="shape_in">
<div class="shape_in_top">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
<div class="top_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_text ">congratulat</div>
<div class="under_star">
<span>★</span><span>★</span><span>★</span>
</div>
<div class="shape_in_bottom">
<span>最</span><span>酷</span><span>CSS</span><span>表</span><span>现</span>
</div>
</div>
</div>
</div>
<div class="shape_black"> <!-- 多个圆角矩形旋转层叠，实现多边形轮廓 -->
<span></span><span></span><span></span>
</div>
</div>
</div>
</body>
</html>
免责声明：本文由卡卷网编辑并发布，但不代表本站的观点和立场，只提供分享给大家。
支付宝扫一扫
微信扫一扫
企鹅扫一扫- 上一篇：现在工业皇冠上还有多少明珠？
- 下一篇：普通人真的能通过抖音赚钱吗？
相关推荐
鄂ICP备14005651号-8
欢迎 你 发表评论: