H5+CSS3设计动态的首页背景

最新推荐文章于 2024-04-24 10:01:52 发布
最新推荐文章于 2024-04-24 10:01:52 发布
阅读量4.1k 收藏 11
点赞数 2
分类专栏： H5+CSS3 文章标签： H5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangfan_12871/article/details/77351734
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2016~2017热门语言排行榜</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: url(img/rain.jpg);
}
div {
width: 1139px;
margin: 50px auto;
}
li {
width: 205px;
height: 120px;
margin: 40px 10px;
background:  rgba(0,0,0,0.5);
list-style: none;
float: left;
position: relative;
z-index: 1;
/*opacity: 0.1;*/
}

li:nth-of-type(9n+6) {
margin-left: 120px;
}
li:before,li:after {
content: "";
width: 205px;
height: 120px;
background:  rgba(0,0,0,0.5);
position: absolute;
/*margin: 40px 10px;*/
}
li:before {
transform: rotate(-60deg);
z-index: 1;
}
li:after {
transform: rotate(60deg);
z-index: 1;
}
li p {
position: absolute;
top:50%;
left: 50%;
line-height: 90px;
color: white;
font-size: 2em;
display: block;
height: 3em;
width: 3em;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: auto;
text-align: center;
border-radius: 50%;
border: solid 5px white;
transition: 1s;
z-index: 5;
}
li:nth-of-type(1) p{
background: #2BB121;
}
li:nth-of-type(2) p{
background: #0864C1;
}
li:nth-of-type(3) p{
background: #7CBC00;
}
li:nth-of-type(4) p{
background: #1D5AF3;
}
li:nth-of-type(5) p{
background: #FF4100;
}
li:nth-of-type(6) p{
background: #F56E31;
}
li:nth-of-type(7) p{
background: #D33C28;
}
li:nth-of-type(8) p{
background: #1D5AF3;
}
li:nth-of-type(9) p{
background: #E35993;
}
li:nth-of-type(10) p{
background: #44B39C;
}
li:nth-of-type(11) p{
background: #1D5AF3;
}
li:nth-of-type(12) p{
background: #E35993;
}
li:nth-of-type(13) p{
background: #FF7400;
}
li:nth-of-type(14) p{
background: #483A82;
}
li:hover p{
transform: rotate(360deg) scale(1.5);
z-index: 5;
}
</style>
</head>
<body>
<div>
<ul>
<li><p title="JavaScript">JS</p></li>
<li><p>Java</p></li>
<li><p title="Python">Pyt</p></li>
<li><p>Ruby</p></li>
<li><p>PHP</p></li>
<li><p>C++</p></li>
<li><p>CSS</p></li>
<li><p>C#</p></li>
<li><p>C</p></li>
<li><p>Go</p></li>
<li><p>Shell</p></li>
<li><p title="Objective C">Obj-C</p></li>
<li><p>Scala</p></li>
<li><p>Swift</p></li>
</ul>
</div>
</body>

</html>

程序猿里我是最帅的
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3+JS小实例：数据碎片故障风科技背景动画特效
艾恩小灰灰的博客
05-11 249
实例：数据碎片故障风科技背景动画特效。技术栈：HTML+CSS+JS。
css3网页动态渐变背景动画特效
06-11
纯css3实现一款简单的网页动态渐变背景动画特效，渐变一般是两种颜色，这个可以设置多种渐变颜色。
css3 动态背景
qq_26414343的博客
06-16 596
2. 定义容器渐变背景并应用动画 3. 完整代码 4. 更多渐变效果参考 https://color.oulu.me/
前端H5动态背景登录页面（下）
最新发布
qq_43826289的博客
04-24 856
前端H5动态背景登录页面（下）
CSS 渐变背景动画的实现
军火库
03-15 2902
如果你用过SASS/LESS，你应该写过一些全局的变量。这东西不是新概念，在其他语言中早就有的！而对于CSS来说，自定义变量不亚于一场革命！声明一个自定义属性，属性名需要以（--）开始，属性值则可以是任何有效的 CSS 值。通过var(--*)来使用但是这这种方式也有缺点，就是我们只能定义变量的初始值，没有办法指定变量的类型。于是CSS又增加了@property规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性,同样通过var()使用syntax：=表示属性的类型。
css3边框、背景、过渡以及动画
weixin_71437031的博客
07-21 648
css3时钟小动画
H5+CSS3登录页设计
03-17
首先，"蓝色动态风格"的登录页面设计可能运用了H5的新特性，如`<canvas>`元素来创建动态背景效果。HTML5的`<canvas>`使得开发者可以通过JavaScript绘制图形，实现动态的动画效果，增强用户体验。同时，CSS3的过渡...
H5+CSS3设计的旋转超酷魔方
03-17
在本项目中，“H5+CSS3设计的旋转超酷魔方”是一个使用HTML5（H5）和CSS3技术实现的互动效果。这个魔方不仅具有视觉上的吸引力，还带有音乐和动画元素，增加了用户体验的趣味性。下面将详细探讨这个项目所涉及的技术...
H5+css3+js搭建带验证码的登录页面
10-14
**CSS3** 则负责页面的样式设计和布局。在给出的代码中，CSS3被用来定义页面的整体结构，如`.main_bar`和`#login_form`的宽度和高度，以及背景颜色等。`border-radius`属性用于创建圆角效果，`transition`和`...
H5+CSS3社交媒体头像卡片特效
06-24
在现代网页设计中，H5（HTML5）和CSS3是不可或缺的技术，它们极大地丰富了网页的表现力和交互性。本项目"社交媒体头像卡片特效"正是利用这两者的优势，为用户提供了一种新颖且吸引人的个人资料展示方式，特别适用于...
h5+css3微信宣传活动源码
08-31
本项目名为“h5+css3微信宣传活动源码”，旨在利用这两者的优势，为微信平台设计出引人入胜的宣传页面，提升用户参与度和品牌影响力。 1. **H5（HTML5）基础** HTML5是超文本标记语言的最新版本，它增强了网页的...
html5散花动态背景
11-14
html5的非常漂亮的满屏樱花飘落的动态背景，可做网站首页
css3纯色背景动画,纯CSS3构建的星空视差背景动画
weixin_29149259的博客
08-03 466
CSS语言：CSSSCSS确定html {height: 100%;background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);overflow: hidden;}#stars {width: 1px;height: 1px;background: transparent;box-shadow: 1245px 3...
几种CSS3常用动画效果和样式
觉醒法师的专栏
05-01 951
Css几种动画效果，360旋转，放大、旋转放大、上下左右移动、动画延迟、背景渐变色、自定义滚动条等等
html怎么设计开场渐变效果图,css如何实现网页背景动态渐变效果
weixin_29648175的博客
06-03 384
HTML部分: 渐变——天际线渐变——天际线实现背景颜色渐变不需要在HTML(结构)部分做任何操作 这里加了一行字，方便显示效果；(推荐教程：CSS教程)CSS部分：body{margin: 0;padding: 0;font-family: "montserrat";background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,...
H5+CSS3实现官网首页--视频全屏背景
不想学习的打工人的博客
10-20 1443
H5+CSS3实现官网首页--视频全屏背景
html舞动特效,7款纯CSS3实现的炫酷动画应用
weixin_30271447的博客
06-04 1110
原标题：7款纯CSS3实现的炫酷动画应用HTML5确实非常强大，我们之前也分享过很多基于HTML5 Canvas的动画特效。但是你是否知道我们可以利用纯CSS制作一些很酷的动画效果？对，CSS3可以做到，下面分享的7款炫酷动画应用就是用纯CSS3实现的，一起来看看吧。1、纯CSS3实现人物摇头动画这次我们要来分享一款超级可爱的纯CSS3人物摇头动画，初始化的时候人物的各个部位是利用CSS3动画效果...
html背景图片动画,用CSS3的animation轻松实现背景动画：漂浮的云
weixin_39540315的博客
06-05 1533
背景动画如果用的恰当，会给网页带来意想不到的效果。在过去，我们只能用flash或Javascript来实现。幸运的是，CSS3的流行使得我们完全可以使用它来实现这种效果，不再依赖其它编程技术。一段简单的CSS代码就能轻而易举的达到下面的效果。慢悠悠的云CSS代码这种背景动画是通过移动背景图的位置实现的，这里没有使用CSS3的transition，而是用animation。@keyframes an...
用h5+css设计的购物商城网页
05-19
很好，购物商城网页是一个非常常见的网页类型，可以用HTML5和CSS来设计。下面是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>购物商城</title> <meta charset="utf-8" /> <style> /* 设置字体和背景颜色 */ body { font-family: Arial, sans-serif; background-color: #f1f1f1; } /* 设置导航栏样式 */ ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } /* 设置商品展示区域 */ .product-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 20px; } .product { width: 300px; margin: 10px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; } .product:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .product img { width: 100%; height: 200px; } .product-name { font-weight: bold; margin-top: 10px; } .product-price { color: red; font-size: 20px; margin-top: 10px; } /* 设置页脚 */ footer { text-align: center; padding: 10px; background-color: #333; color: white; position: fixed; bottom: 0; width: 100%; } </style> </head> <body> <!-- 导航栏 --> <ul> <li><a class="active" href="#">首页</a></li> <li><a href="#">服装</a></li> <li><a href="#">鞋子</a></li> <li><a href="#">配件</a></li> <li style="float:right"><a href="#">登录</a></li> </ul> <!-- 商品展示区域 --> <div class="product-container"> <div class="product"> <img src="https://via.placeholder.com/300x200.png?text=Product+1" /> <div class="product-name">商品1</div> <div class="product-price">¥ 100</div> </div> <div class="product"> <img src="https://via.placeholder.com/300x200.png?text=Product+2" /> <div class="product-name">商品2</div> <div class="product-price">¥ 200</div> </div> <div class="product"> <img src="https://via.placeholder.com/300x200.png?text=Product+3" /> <div class="product-name">商品3</div> <div class="product-price">¥ 300</div> </div> <div class="product"> <img src="https://via.placeholder.com/300x200.png?text=Product+4" /> <div class="product-name">商品4</div> <div class="product-price">¥ 400</div> </div> <div class="product"> <img src="https://via.placeholder.com/300x200.png?text=Product+5" /> <div class="product-name">商品5</div> <div class="product-price">¥ 500</div> </div> <div class="product"> <img src="https://via.placeholder.com/300x200.png?text=Product+6" /> <div class="product-name">商品6</div> <div class="product-price">¥ 600</div> </div> </div> <!-- 页脚 --> <footer> <p>© 2021 购物商城</p> </footer> </body> </html> ``` 这个示例中包含了一个导航栏、一个商品展示区域和一个页脚。你可以根据实际需求添加其他元素和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值