SVG制作可爱小页面
很久都没有在博客园上发表一些自己学的新东西了，只是在有空的时候逛一逛博客园而已，看来我不是一个真正的程序员，哈哈！
但是今天非常想和大家分享一个小东西，那是前两天在一个网页上看到了这个东西
我好奇中间那个是怎么做出来的就F12看了一下它的html页面代码，我看到了这个标签circle，当时就比较好奇了，因为我好像没见过这个标签，果然不是一个真正的程序员，我这段时间都在干嘛了呢？哈哈！
没关系，一般不懂的话我都去问度娘，因为别人靠不住，只能靠自己，当自己也靠不住的时候就去靠度娘，好想配上一个笑哭的表情，怎么没有表情呢哈哈！
然后就去百度了，
这不是我想要的结果，哈哈！不开玩笑了然后就懂得了circle是SVG（ 意为可缩放矢量图形）的一个标签，然后就去简单看了关于SVG的写法与用法，
具体的大家想学习的话可以去百度找找，通过简单的学习和自己实践（其实还不是太懂），自己开始不太喜欢去看那些字面的解释，都是实践的多，所以理论知识感觉似乎不懂。
不多说了，反正我就做出了一个简单可爱的页面，效果图如下图：
太阳、草坪、花朵、房子等都是用SVG做出来的，可能看起来是一个比较幼稚的画面，但没办法，少女心，哈哈！
废话那么多能有几位朋友能看到这里呢？或是有些朋友直接跳到代码，不管怎么样能到这里的朋友都是我的荣幸，谢谢大家，接下来上代码吧，希望不让大家失望。
HTML部分：
<body>
<div class="box">
<!--圆形太阳-->
<svg width="200" height="200" viewBox="0 0 1000 1000" class="sun">
<circle cx="500" cy="500" r="280" stroke="none" fill="#f77722"></circle>
<circle cx="500" cy="500" r="400" stroke-width="50" stroke="#f77722" fill="none" stroke-dasharray="20 120"></circle>
<circle cx="400" cy="400" r="20" fill="#000"></circle>
<circle cx="600" cy="400" r="20" fill="#000"></circle>
<circle cx="500" cy="550" r="100" fill="none" stroke="#000" stroke-width="10" stroke-dasharray="300 700"></circle>
</svg>
<!--椭圆形草坪-->
<div class="sod">
<svg width="100%" height="100%">
<ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="#269b13" />
</svg>
</div>
<!--花朵-->
<div class="floret">
<svg width="100%" height="100%">
<line x1="280" y1="0" x2="300" y2="300" stroke-width="2" stroke="#269b13" />
<line x1="195" y1="5" x2="300" y2="300" stroke-width="2" stroke="#269b13" />
</svg>
<svg width="100" height="100" viewBox="0 0 100 100" class="floret1">
<circle cx="50" cy="50" r="8" fill="red"></circle>
<circle cx="50" cy="50" r="20" fill="none" stroke-width="10" stroke="#f77722" stroke-dasharray="10 10 15 15"></circle>
</svg>
<svg width="100" height="100" viewBox="0 0 100 100" class="floret2">
<circle cx="50" cy="50" r="8" fill="red"></circle>
<circle cx="50" cy="50" r="20" fill="none" stroke-width="10" stroke="#f77722" stroke-dasharray="10 10 15 15"></circle>
</svg>
<svg width="100" height="100" viewBox="0 0 100 100" class="leaf1">
<ellipse cx="10%" cy="50%" rx="8%" ry="50%" fill="#269b13" />
</svg>
<svg width="100" height="100" viewBox="0 0 100 100" class="leaf2">
<ellipse cx="10%" cy="50%" rx="8%" ry="50%" fill="#269b13" />
</svg> </div>
<!--房子-->
<div class="house">
<!--屋顶-->
<svg class="roof">
<polygon points="0,150 200,0 400,150" fill="#ccc" stroke="#000" stroke-width="1" />
</svg>
<!--房子-->
<svg class="house1">
<rect width="300" height="200" fill="#fff" stroke-width="2" stroke="#000" />
</svg>
<!--窗户-->
<svg class="window">
<rect width="60" height="60" fill="#fff" stroke-width="2" stroke="#000" />
<line x1="30" y1="0" x2="30" y2="60" stroke-width="2" stroke="#000" />
<line x1="0" y1="30" x2="60" y2="30" stroke-width="2" stroke="#000" />
</svg>
<!--门口-->
<svg class="house2">
<rect width="80" height="100" fill="#fff" stroke-width="2" stroke="#000" />
<line x1="40" y1="0" x2="40" y2="100" stroke-width="2" stroke="#000" />
<line x1="30" y1="60" x2="50" y2="60" stroke-width="2" stroke="#000" />
<circle cx="16%" cy="42%" r="5" fill="#000"></circle>
</svg>
<!--烟囱-->
<svg class="stack">
<rect width="25" height="80" fill="none" stroke="#000" stroke-width="2" />
</svg>
<!--烟-->
<svg class="cigarette1">
<ellipse cx="4%" cy="4%" rx="4%" ry="4%" fill="none" stroke="#000" stroke-width="1" />
</svg>
<svg class="cigarette2">
<ellipse cx="6%" cy="6%" rx="6%" ry="6%" fill="none" stroke="#000" stroke-width="1" />
</svg>
</div> <div class="bird">
<img src="img/bird.png" />
</div>
<div class="bird bird2">
<img src="img/bird.png" />
</div>
<!--淡入淡出轮播图-->
<div class="line">
<img src="img/4b90f603738da977506b270cba51f8198618e355.png" />
</div>
<div class="banner">
<ul>
<li>
<img src="img/banner8.jpg" />
</li>
<li>
<img src="img/banner2.jpg" />
</li>
<li>
<img src="img/banner3.jpg" />
</li>
<li>
<img src="img/banner4.jpg" />
</li>
<li>
<img src="img/banner5.jpg" />
</li>
<li>
<img src="img/banner6.jpg" />
</li>
<li>
<img src="img/banner7.jpg" />
</li>
<li>
<img src="img/banner1.jpg" />
</li>
</ul>
</div>
<!--文字滚动-->
<div id="sdmsg">
<marquee direction="up" scrollamount="1" behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" onmouseover=" this.stop(); " onmouseout="this.start();">
<p> 万两黄金容易得,知音一个也难求。 孤帆远影碧空尽，惟见长江天际流。 势利交怀势利心，斯文谁复念知音！伯牙不作钟期逝，千古令人说破琴。 采葵莫伤根，伤根葵不生。结交莫羞贫，羞贫友不成。 隔山隔水不隔心，友谊不管远与近，好花真想季季开，朋友真想天天在。 若知四海皆兄弟，何处相逢非故人。 劝君更进一杯酒，西出阳关无故人。 人生结交在终始，莫为升沉中路分。 不知其人，视其友。 真实的十分理智的友谊是人生最美好的无价之宝。 换我心，为你心，始知相忆深。 君子之交淡若水,小人之交甘若醴.君子淡以亲,小人甘以绝。 翻手作云覆手雨，纷纷轻薄何须数。君不见管鲍贫时交，此道今人弃如土。 今日乐相乐，别后莫相忘。 朋友总是心连心，真正朋友值千金，灯光之下思贤友，时刻勿忘朋友心。
</p>
</marquee>
</div>
<!--音乐播放-->
<div class="music">
<audio src="img/薛凯琪、陈意涵、杨子姗 - 一起老去.mp3 " autoplay="autoplay " loop="-1 " controls="controls "></audio>
</div>
</div>
</body>
CSS部分：
* {
margin: 0px;
padding: 0px;
}
ul,
li {
list-style: none;
} /*最外层盒子*/ .box {
min-height: 680px;
height: 100%;
position: relative;
} /*草坪*/ .sod {
min-width: 1300px;
width: 100%;
position: absolute;
bottom: 0%;
} /*花朵*/
.floret {
min-width: 1300px;
width: 100%;
position: absolute;
bottom: 10%;
} .floret1 {
/*border: 1px solid red;*/
position: absolute;
top: -50%;
left: 16.5%;
} .floret2 {
position: absolute;
top: -40%;
left: 10%;
} .leaf1 {
position: absolute;
top: 10%;
left: 21%;
} .leaf2 {
position: absolute;
top: 10%;
left: 17%;
} /*房子*/ .house {
min-width: 1300px;
width: 100%;
height: 250px;
position: absolute;
bottom: 15%;
} .house1 {
position: absolute;
bottom: 0%;
left: 40%;
z-index:;
} .house2 {
position: absolute;
bottom: -20%;
left: 54%;
z-index:;
} /*屋顶*/ .roof {
position: absolute;
left: 36%;
width: 400px;
top: -20%;
height: 150px;
} /*窗口*/ .window {
position: absolute;
bottom: -20%;
left: 44%;
z-index:;
} /*烟囱*/ .stack {
position: absolute;
top: -10%;
left: 58%;
z-index: -10;
} /*烟*/ .cigarette1 {
position: absolute;
top: -20%;
left: 58%;
} .cigarette2 {
position: absolute;
top: -30%;
left: 59%;
} /*淡入淡出轮播图*/ .banner {
width: 180px;
height: 300px;
position: absolute;
top: 100px;
left: 300px;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
} .banner ul,
li,
img {
display: block;
width: 180px;
height: 300px;
} li {
position: absolute;
top: 0px;
left: 0px;
} .bird {
width: 100px;
height: 80px;
position: absolute;
top: 60px;
left: 700px;
} .bird2 {
top: 70px;
left: 800px;
} .bird img {
display: block;
width: 100%;
height: 100%;
} .line {
width: 400px;
height: 80px;
position: absolute;
top: 20px;
left: 195px;
z-index:;
} .line img {
display: block;
width: 100%;
height: 100%;
} #sdmsg {
width: 350px;
height: 400px;
position: absolute;
left: 950px;
top: 100px;
z-index:;
background: url(../img/bg.png) no-repeat;
} #sdmsg marquee {
display: block;
width: 100%;
height: 100%;
line-height: 30px;
color: #000;
font-weight: bold;
font-size: 20px;
font-family: "腾祥铁山楷书繁", "楷体","微软雅黑";
} .music {
position: absolute;
left: 950px;
top: 50px;
}
jq部分：（实现的是图片的淡入淡出）
$(function() {
// 图片淡入淡出
var i = 0;
var img = $(".banner ul li");
img.eq(0).show().siblings().hide(); //先显示第一张
setInterval(function() {
i++;
if(i > img.length) {
i = 0;
}
$(".banner ul li").eq(i).fadeIn().siblings().fadeOut();
}, 10000); });
代码就是这样的，可能会写得很乱，大家不要介意，毕竟我不是一个真正的程序员，哈哈哈！大家也可以在我的基础上做出简化版来，样式我都是通过定位写死的，所以页面没有什么扩展性。因为只是想单纯做出一个可爱的页面而已，希望大家能够喜欢。看来以后要多分享分享自己学到的新东西，哈哈哈！今天就到这咯。
SVG制作可爱小页面的更多相关文章
- 太可爱了！CSS3 & SVG 制作的米老鼠钟表
米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
- WPF制作的小时钟
原文:WPF制作的小时钟 周末无事, 看到WEB QQ上的小时钟挺可爱的, 于是寻思着用WPF模仿着做一个. 先看下WEB QQ的图: 打开VS, 开始动工. 建立好项目后, 面对一个空荡荡的页面, ...
- 【SVG】为了前端页面的美丽，我选择学习SVG
[SVG]为了前端页面的美丽,我选择学习SVG 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 SVG在之前自学的过程中, ...
- 使用 SVG 制作单选和多选框动画【附源码】
通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...
- 微信小程序在线制作 自己制作微信小程序
小程序是个什么东西?怎么自己制作微信小程序?微信小程序在线制作难吗?最近老是听这类问题,耳朵都长茧子了. 百牛信息技术bainiu.ltd整理发布于博客园 接下来作为一个技术人员的角度就为大家分析一下 ...
- python 跑服务器，访问自己制作的简单页面
1 python 跑服务器,访问自己制作的简单页面 2 # win+b出现一个网址http:/0.0.1:5000/复制到浏览器查看# http://127.0.0.1:5000/home 做这个首 ...
- 教你用3ds max制作多边形小狗建模
本教程是一篇关于用3ds max来制作多边形小狗建模的简易教程,介绍地很详细,制作出来的狗很有特色,转发过来,感兴趣的朋友可以过来学习一下! 建立一个BOX,把物体放到空间原点上(这样在以后调节中间点 ...
- jq制作圣诞主题页面
今天制作的是有飘雪效果的圣诞主题页面,个人灰常喜欢. 首先还是放张效果图: 当看到这这页面的时候我们要注意四点: 1.图片的轮播 2.文字的滚动效果 3.音乐播放 4.飘雪效果 那我们就一点一点来完成 ...
- 手把手教你制作微信小程序，开源、免费、快速搞定
最近做了个"罗孚传车"的小程序 一时兴起,做了一个小程序,将个人收集的同汽车相关的行业资讯和学习资料,分享到小程序中,既作为历史资料保存,又提供给更多的人学习和了解,还能装一下:) ...
随机推荐
- thinkphp5.1 使用success();和error();要注意的点
public function succ() { $this->success(); $this->error(); } 这里的$this-> 老是忘掉 记录一下
- list之flex布局写法
list之flex布局写法 移动端实际场景中经常会遇到将header置顶,然后下面list需要滚动的情况,通常的做法会是将header使用fixed的方式固定到顶部,然后list主体相对于header ...
- linux程序一般设置
看canal的时候看了下deploy的脚本,发现很多系统都大同小异 如果是需要debug,就需要开启调试端口 if [ "$1" = "debug" ]; th ...
- Day09 -超级经典面试题：Ruby的a ||= b（or-equals）是什么意思呢？
前情提要: 写了这一系列下来,发现Ruby有许多特别的方法.前几天提到String字串,并且接续着在第八天我们了解串接(concatenate)与插入interpolation#{}方法(就连加号+也 ...
- hadoop fs -text和hadoop fs -cat的区别（转）
转自:https://www.jianshu.com/p/4462613d3f57
- [ts] Property 'aaa' does not exist on type 'Window' 解决办法
第一种: (window as any).aaa 第二种: declare global { interface Window { aaa: any; } } window.aaa = window. ...
- winfrom中pictureBox控件的部分使用方法
一.后台属性 1.pictureBox1.Image显示图片 2.pictureBox1.ImageLocation存储和提取图片路径 二.面板属性 1.Picturebox控件SizeMode属性 ...
- day47 选择器优先级及嵌套关系
复习 1.前端: 网页, html + css + js 2.html三个组成部分:标签,指令和转义字符 标签: <>包裹, 以字母开头, 可以结合-|数字, 能被浏览器解析的标记 3.常 ...
- 优化Android Studio/Gradle构建(转)
参考:http://hm.itheima.com/thread-204217-1-1.html
- C#窗体-猜数字
1.用到的控件:groupbox.label.textbox.button.menustrip等 2.实现的功能,随机产生一个数字,输入自己猜的答案,判断是否猜对. 3.运行结果 4.代码 using ...