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>&nbsp;&nbsp;&nbsp;&nbsp;万两黄金容易得,知音一个也难求。 孤帆远影碧空尽，惟见长江天际流。 势利交怀势利心，斯文谁复念知音！伯牙不作钟期逝，千古令人说破琴。 采葵莫伤根，伤根葵不生。结交莫羞贫，羞贫友不成。 隔山隔水不隔心，友谊不管远与近，好花真想季季开，朋友真想天天在。 若知四海皆兄弟，何处相逢非故人。 劝君更进一杯酒，西出阳关无故人。 人生结交在终始，莫为升沉中路分。 不知其人，视其友。 真实的十分理智的友谊是人生最美好的无价之宝。 换我心，为你心，始知相忆深。 君子之交淡若水,小人之交甘若醴.君子淡以亲,小人甘以绝。 翻手作云覆手雨，纷纷轻薄何须数。君不见管鲍贫时交，此道今人弃如土。 今日乐相乐，别后莫相忘。 朋友总是心连心，真正朋友值千金，灯光之下思贤友，时刻勿忘朋友心。

                    </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.飘雪效果那我们就一点一点来完成 ...
手把手教你制作微信小程序，开源、免费、快速搞定
最近做了个"罗孚传车"的小程序一时兴起,做了一个小程序,将个人收集的同汽车相关的行业资讯和学习资料,分享到小程序中,既作为历史资料保存,又提供给更多的人学习和了解,还能装一下:) ...

随机推荐

swift-UIPickerView(选择控件)
import UIKit //UIPickerView 的委托协议是 UIPickerViewDelegate,数据源是 UIPickerViewDataSource.我们需要在视图控制器中声明实现 ...
cobbler登录web界面时出现“Internal Server Error”
当进行cobbler配置后,并进行web登录时,出现错误: 先查看其日志位置 #cat /etc/httpd/conf.d/ssl.conf 在其中位置发现其错误的日志位置为/etc/httpd/lo ...
linux程序一般设置
看canal的时候看了下deploy的脚本,发现很多系统都大同小异如果是需要debug,就需要开启调试端口 if [ "$1" = "debug" ]; th ...
Jmeter软件介绍
1.软件结构 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资 ...
Unity 读写文本文件
1. LitJson的使用 https://blog.csdn.net/qq_35669619/article/details/78928966 https://blog.csdn.net/qq_14 ...
pytorch1.0 安装执行后报错ImportError: No module named future.utils
File "/usr/local/lib/python2.7/dist-packages/caffe2/python/utils.py", line 10, in <modu ...
.net session 使用误区
1. this.Session["username"] = null HttpSessionState 内部使用 NameObjectCollection 类型的集合对象来存储用 ...
Git安装配置和提交本地代码至Github，修改GitHub上显示的项目语言
1. 下载安装git Windows版Git下载地址: https://gitforwindows.org/ 安装没有特别要求可以一路Next即可,安装完成后可以看到: 2. 创建本地代码仓库打开G ...
spring boot 1.x配置，不断完善中
spring boot是典型的约定大于配置,那么很有必要对在开发过程中这些配置做统一的添加记录,以免用到的时候到处搜索,网上的东西又良莠不齐. server.port=8880 微服务注册中心,yml ...
d3.js d3.transform 方法移除的解决方案
rt d3.transform在新版本中移除需要自行写出该功能 function getTranslation(transform) { // Create a dummy g for calcul ...

SVG制作可爱小页面

SVG制作可爱小页面的更多相关文章

随机推荐

热门专题