SVG制作可爱小页面

很久都没有在博客园上发表一些自己学的新东西了,只是在有空的时候逛一逛博客园而已,看来我不是一个真正的程序员,哈哈! 但是今天非常想和大家分享一个小东西,那是前两天在一个网页上看到了这个东西我好奇中间那个是怎么做出来的就F12看了一下它的html页面代码,我看到了这个标签circle,当时就比较好奇了,因为我好像没见过这个标签,果然不是一个真正的程序员,我这段时间都在干嘛了呢?哈哈! 没关系,一般不懂的话我都去问度娘,因为别人靠不住,只能靠自己,当自己也靠不住的时候就去靠度娘,好想配上一个笑哭的…

太可爱了！CSS3 & SVG 制作的米老鼠钟表

米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣的可以去看看. 在线演示源码下载您可能感兴趣的相关文章网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQue…

WPF制作的小时钟

原文:WPF制作的小时钟周末无事, 看到WEB QQ上的小时钟挺可爱的, 于是寻思着用WPF模仿着做一个. 先看下WEB QQ的图: 打开VS, 开始动工. 建立好项目后, 面对一个空荡荡的页面, 首先想下时钟是怎么构成的. 从图中看到, 时钟被一个黑色的圆环包围, 里面有12个代表小时的刻度线, 等比例的分布在圆环内侧. 中间有个小圆环, 是指针的中心. 3个小指针以圆的中心转动. 第一步, 画出外部的圆环:WPF里面只有椭圆, 怎么画出一个圆环形状呢, 其实很简单. 里面放个小圆, 外面放…

【SVG】为了前端页面的美丽，我选择学习SVG

[SVG]为了前端页面的美丽,我选择学习SVG 博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 SVG在之前自学的过程中,其实一直都是很高深的样子不敢触碰,但是想要理解终究都会走到这一步的.再怎么看起来难的技术都是由简单的知识点累计起来的. 什么是SVG? SVG 意为可缩放矢量图形(Scalable Vector Graphics). 它使用 XML 格式定义图像. SVG 图像在放大或改变尺寸的情况下其图形质量不会…

使用 SVG 制作单选和多选框动画【附源码】

通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中的时候执行 SVG 动画. 在线演示立即下载温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 对于自定义的复选框或单选按钮,我们使用标签的伪元素 ::before 并通过设置不透明度为0来因此输入框.初始,我们通过 Ja…

微信小程序在线制作自己制作微信小程序

小程序是个什么东西?怎么自己制作微信小程序?微信小程序在线制作难吗?最近老是听这类问题,耳朵都长茧子了. 百牛信息技术bainiu.ltd整理发布于博客园接下来作为一个技术人员的角度就为大家分析一下小程序是个什么东西?怎么自己制作微信小程序?微信小程序在线制作难吗? 小程序是个什么东西小程序是一种无需下载安装,即可使用的手机应用.只需要扫描二维码,或是搜一搜,就能立即使用. 与APP不同的是,小程序无需下载安装.无需卸载.用完即走,那么意味着也不占手机内存,对于手机没内存的人来说,可谓是一大…

python 跑服务器，访问自己制作的简单页面

1 python 跑服务器,访问自己制作的简单页面 2 # win+b出现一个网址http:/0.0.1:5000/复制到浏览器查看# http://127.0.0.1:5000/home 做这个首先要安装好python的flask,前面有详细的安装步骤具体代码如下 # coding:utf-8# Flask构造函数,从flask模块(相当于工具箱)导入数据from flask import Flask app=Flask(__name__)# 装饰器,路由用来封装链接,同时返回数据@app…

教你用3ds max制作多边形小狗建模

本教程是一篇关于用3ds max来制作多边形小狗建模的简易教程,介绍地很详细,制作出来的狗很有特色,转发过来,感兴趣的朋友可以过来学习一下! 建立一个BOX,把物体放到空间原点上(这样在以后调节中间点的时侯比较方便),塌陷模型为editpoly,删除另一半(颜色部分),在模型上添加symmetry命令,改变轴向,flip命令,用extrude把头和四肢拉伸出来. 可以在堆栈面版里添加一个smooth命令,可以边做边看效果,这里的smooth不要给光滑值,作用就是对面进行整理(因为很多拉伸的表面和…

jq制作圣诞主题页面

今天制作的是有飘雪效果的圣诞主题页面,个人灰常喜欢. 首先还是放张效果图: 当看到这这页面的时候我们要注意四点: 1.图片的轮播 2.文字的滚动效果 3.音乐播放 4.飘雪效果那我们就一点一点来完成吧,Go,Go! 对于上次分享的有人说我讲的不够细致,那在这篇文章我就细致一点. (1)准备工作首先新建css,img,js,file这四个文件夹并新建demo.css,轮播图片,demo.js,一首歌放在对应文件夹,新建demo.html,并在demo.css中加入如下代码: *{ ; ; }…

手把手教你制作微信小程序，开源、免费、快速搞定

最近做了个"罗孚传车"的小程序一时兴起,做了一个小程序,将个人收集的同汽车相关的行业资讯和学习资料,分享到小程序中,既作为历史资料保存,又提供给更多的人学习和了解,还能装一下:) 扫描下方小程序码可以体验一下主页面: 文章页: 个人页: 关于页: 当然,还和我的公众号罗孚传说关联了: 为什么要做微信小程序? 1.微信中经常收到一些不错的文章,我想保存并整理,同时还能分享给别人看. 2.做一个微信小程序其实不难,但可以装装装(你懂的). 怎么做微信小程序? 简单的来说:WordPre…

通通制作Html5小游戏——第二弹（仿flappy bird像素鸟）

亲爱的博友们,我又回来啦~因为我们技术宅的思想只有技术宅懂得,好不容易写了点好玩的东西发QQ空间,结果只有11的UV,0回复....10分钟ps一个女神的素描效果发QQ空间朋友圈,一大堆回复加赞,作为一个屌丝技术宅还是博客园更懂得o(∩_∩)o ~~ 废话不多说,进入主题吧,前段时间flappy bird火得不行了,下载量排行老高了,其作者每天都可以获得这个游戏带来的5W的广告费,后来各种威胁等等,感觉都可以拍电影了 .闲来无事自以为其逻辑挺简单的,于是自己做了个山寨版的, 比起原版flappy…

如何制作网页小动画？——gif or png

一.场景与动画为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制,状态切换,事件触发). 下面举一个天猫的场景: 一只蝴蝶的出现引起了小猫的注意,小猫慢慢的跟随蝴蝶靠近屏幕边缘,最后被莫名其妙的拉到了可视区域的外部,最后弹出天猫工具栏. 我们经常使用gif来制作动画.也确实可以用几个gif拼接来完成一个场景动画.中间的衔接使用js来控制,把上面的三个gif衔接起来…

【原创】前端开发人员如何制作微信小程序模板

(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/305,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 最近接触了一下微信小程序的开发,虽然项目中的页面很简单,但是最后做出成果来,也是费了一番周折.作为一个偏前的前端,小程序的开发对我来说,在习惯上的改变还是巨大的.一开始做时,不适应感蛮大的.现在把自己的一点点总结归纳一下,微信小程序毕竟不是自己擅长的领域,真怕时间长了遗忘,写一篇文章做为备忘录也好. 先说明,本文不涉及数…

toolTip(用svg制作出富有动态的对话框)

昨晚看了用svg如何制作富有动态的tooltip,于是今天就心血来潮学着做一下,于是也成功做出来,也明白其中的原理,收获颇多阿!接下来要多去学习svg,这是个好东西. 这其中也注意了一些平时纠结的细节应该怎么去做(演示:http://www.live086.cn/toolTip/),比如: <article> <section id="sound1"> </section> <section id="sound2">…

用JS制作博客页面背景随滚动渐变的效果

今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好-- 下面就以我的博客园博客为例,介绍一下如何制作这个效果! 准备 [x] 申请博客园的JS权限(如果你也想把它用在自己的博客园上) [x] 可能需要一些JS的基础知识(你可以打开w3school,然后就当自己准备好了) [x] 可能需要一些CSS基础知识(你需要知道颜色是怎样用16进制表示的) --当然,你也可以复制下面的代码然后走人-- 注意:如果你想要用在自己的博客园上,请注意博客园…

HTML+Javascript制作拼图小游戏详解（一）

本文章将分享一个来自前端菜鸟突发奇想的拼图游戏制作方法以及实现过程. 话不多说,先上图. 首先我们需要写好网页的基本布局(此处涉及简单的HTML和CSS知识). 网页一共分为三个区域,左侧时间显示区,中间主要游戏区和右侧按钮菜单区. 通过三个DIV设置其style为float:left使三个div同行显示. <div class="main"> <div class="left">  </div&g…

easyUI制作slider小滑块，可拖动和精确输入

借助easyUI制作.完善slider小滑块. 可拖动.和在右边输入框精确输入效果图: html代码: <div class="text_fl" >亮度设置:</div> <div class="logo-1 fl"></div> <div class="text_fl width_130" > <div class="swip_box" > <d…

css3中的制作动画小总结

系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 旋转rotate rotate(<angle>) :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义.transform-origin定义的是旋转…

吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：制作一个小按钮

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"…

如何制作icon-font小图标

1.首先可以去iconfont.cn阿里巴巴矢量字体库中下载你想要的图标(选择格式为SNG格式). 2.打开iconmoon这个网站(这个样子的),然后点击右上角那个Iconfont App如下图: 3.上面有一个紫色的 Import Icons 点击上传你下好的 SVG 图标. 4.上传好的 SVG 图标会显示在下方的 Untitled Set 中,然后选择上方有个类似笔形状的图标,点击进入编辑.解释一下上面的选择器..鼠标箭头表示选择图标 .垃圾桶表示删除图标 ,一般选择垃圾桶,…

用svg制作loading动画

首先说明:由于各浏览器对svg动画事件支持不统一,此loading动画在Firefox,Opera,Chrome中均没有问题,IE和Safari中有问题,可能是不支持SIML写动画的语法, 但是用Canvas写的话,在颜色的渐变方面会有问题: 线性渐变需要传递四个参数 xstart:渐变开始点x坐标 ystart:渐变开始点y坐标 xEnd:渐变结束点x坐标 yEnd:渐变结束点y坐标这样画出来的渐变只能用于矩形之类的图形,无法应用在诸如扇形内,此loadi…

用Fragment制作的Tab页面产生的UI重叠问题

本文出处:http://blog.csdn.net/twilight041132/article/details/43812745 在用Fragment做Tab页面,发现有时候进入应用会同时显示多个Tab内容,UI发生重叠. 当应用被强行关闭后(通过手机管家软件手动强关,或系统为节省内存自动关闭应用),再次进入应用时,每次都有这现象. 第一次进入应用时,根据选择的tab分别创建对应的Fragment,之后每次选择页面时隐藏其他tab内容. 通过分析发现,正常back键退出应用时,Activity…