网站首页 > 技术文章 正文
1.说明：
推荐指数：★★★★
通俗易懂。
2.效果图
3.一个含有内部的css的html，名叫：风车-1.html代码：
<!--注释法-->
<!--第1步：声明：可以大小写均可以：doctype=DOCTYPE-->
<!--doctype html-->
<!DOCTYPE html>
<!--第2步：html包起来，默认lang=‘en’，所以也可以删除-->
<!--像这样：html-->
<html>
<html lang="en"-->
<!--第2-1步：head部分设置-->
<head>
<!--第2-1-1步：固定格式meta和title设置-->
<meta charset="UTF-8">
<!--网页名字自己随意取-->
<title>大风车DIY1</title>
<!--第2-1-2步：css的设置，因为简单所以直接写在html的单个文件里-->
<!--也可以作为外部文件引起css文件-->
<style>
#box {
width: 10px;
height: 10px;
margin: 5px auto;
position: relative;
}
#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infinite;
}
/*这是css的注释方法*/
/*风车的每一扇叶的设置,因为4个扇叶的设置是一样的，所以用这样*/
/*4个扇叶的共性设置*/
.css1,
.css2,
.css3,
.css4 {
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
/*4个扇叶的颜色渐变设置*/
background-image: linear-gradient(green, yellow);
}
/*扇叶1的个性设置*/
.css1 {
top: 100px;
}
/*扇叶2的个性设置*/
.css2 {
top: 50px;
left: 150px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/*扇叶3的个性设置*/
.css3 {
top: 200px;
left: 200px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*扇叶4的个性设置*/
.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*中间的圆形的设置*/
.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
/*请注意下面css的颜色设置，可以是小写的英文字母，也可以是大写的，还可以是十六进制*/
/*中间圆的渐变颜色设置*/
background-image: radial-gradient(pink, blue);
}
/*风车的竖直杆的设置*/
.hhh {
width: 2px;
height: 250px;
background-image: radial-gradient(black, RED);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
/*运动的功能定义*/
@keyframes dfc {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate( 90deg);
-moz-transform: rotate( 90deg);
-ms-transform: rotate( 90deg);
-o-transform: rotate( 90deg);
transform: rotate( 90deg);
}
50% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<!--第2-2步：body部分设置-->
<body>
<div id="box">
<!--box的div容器里面有风车杆和main的4个运动的扇叶-->
<div id="main">
<!--main里的css是要一起运动的-->
<div class="css1"></div>
<div class="css2"></div>
<div class="css3"></div>
<div class="css4"></div>
<div class="ssss"></div>
</div>
<!--风车的杆是不动的，所以单独放在一个div容器中-->
<div class="hhh"></div>
</div>
</body>
</html>4.如何将css拆开，单独呢？大型项目都是css单独一个文件夹，里面一大堆css文件。
4.1 建一个fengche.css文件，将下面代码复制进去，和风车-2.html放在同一个文件夹中。
fengche.css的代码：
#box {
width: 10px;
height: 10px;
margin: 5px auto;
position: relative;
}
#main {
width: 400px;
height: 400px;
animation: dfc 1s linear infinite;
}
/*这是css的注释方法*/
/*风车的每一扇叶的设置,因为4个扇叶的设置是一样的，所以用这样*/
/*4个扇叶的共性设置*/
.css1,
.css2,
.css3,
.css4 {
width: 200px;
height: 100px;
border: 1px solid blue;
border-radius: 100px 100px 0 0;
position: absolute;
/*4个扇叶的颜色渐变设置*/
background-image: linear-gradient(green, yellow);
}
/*扇叶1的个性设置*/
.css1 {
top: 100px;
}
/*扇叶2的个性设置*/
.css2 {
top: 50px;
left: 150px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
/*扇叶3的个性设置*/
.css3 {
top: 200px;
left: 200px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
/*扇叶4的个性设置*/
.css4 {
top: 250px;
left: 50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*中间的圆形的设置*/
.ssss {
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
top: 150px;
left: 150px;
z-index: 10;
/*请注意下面css的颜色设置，可以是小写的英文字母，也可以是大写的，还可以是十六进制*/
/*中间圆的渐变颜色设置*/
background-image: radial-gradient(pink, blue);
}
/*风车的竖直杆的设置*/
.hhh {
width: 2px;
height: 250px;
background-image: radial-gradient(black, RED);
position: absolute;
top: 200px;
left: 199px;
z-index: -1;
}
/*运动的功能定义*/
@keyframes dfc {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25% {
-webkit-transform: rotate( 90deg);
-moz-transform: rotate( 90deg);
-ms-transform: rotate( 90deg);
-o-transform: rotate( 90deg);
transform: rotate( 90deg);
}
50% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}4.2 风车-2.html的代码：注意修改部分。
<!DOCTYPE html>
<html>
<html lang="en"-->
<head>
<meta charset="UTF-8">
<title>大风车DIY2</title>
<!--注意放在同一个文件夹下，本机是deepin的linux系统，win可能不同-->
<link rel="stylesheet" href="./fengche.css" />
</head>
<body>
<div id="box">
<div id="main">
<div class="css1"></div>
<div class="css2"></div>
<div class="css3"></div>
<div class="css4"></div>
<div class="ssss"></div>
</div>
<div class="hhh"></div>
</div>
</body>
</html>怎么样？通俗易懂吧，看了后，立马入门。
猜你喜欢
- 2024-10-21 HTML制作网页先熟悉CSS（用html和css做网页教程）
- 2024-10-21 HTML简单介绍及常见元素（html的元素组成部分有哪些?）
- 2024-10-21 Go Web 框架 Gin 学习2 - 模板渲染的2种方式
- 2024-10-21 HTML自定义组件（html 组件）
- 2024-10-21 Html小知识总结（html基础总结）
- 2024-10-21 你的HTML页面书写规范吗?必须知道的HTML书写规范
- 2024-10-21 用C++写出HTML，使用web服务，可以免费搭建个人博客
- 2024-10-21 【JavaScript】将执行上下文、作用域、闭包串联起来
- 2024-10-21 7.HTML中的列表、引用和代码的使用
- 2024-10-21 小白必看!Django 模板语言基础来啦
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)