Html+CSS3技术实现动画、天气图标动态效果 效果很酷
1. [代码][CSS]代码
<svg
version="1.1"
id="sun"
class="climacon climacon_sun"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="15 15 70 70"
enable-background="new 15 15 70 70"
xml:space="preserve">
<clipPath id="sunFillClip">
<path
d="M0,0v100h100V0H0z M50.001,57.999c-4.417,0-8-3.582-8-7.999c0-4.418,3.582-7.999,8-7.999s7.998,3.581,7.998,7.999C57.999,54.417,54.418,57.999,50.001,57.999z"
/>
</clipPath>
<g class="climacon_iconWrap climacon_iconWrap-sun">
<g class="climacon_componentWrap climacon_componentWrap-sun">
<g class="climacon_componentWrap climacon_componentWrap-sunSpoke">
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-east"
d="M72.03,51.999h-3.998c-1.105,0-2-0.896-2-1.999s0.895-2,2-2h3.998c1.104,0,2,0.896,2,2S73.136,51.999,72.03,51.999z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northEast"
d="M64.175,38.688c-0.781,0.781-2.049,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l2.828-2.828c0.779-0.781,2.047-0.781,2.828,0c0.779,0.781,0.779,2.047,0,2.828L64.175,38.688z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-north"
d="M50.034,34.002c-1.105,0-2-0.896-2-2v-3.999c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v3.999C52.034,33.106,51.136,34.002,50.034,34.002z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-northWest"
d="M35.893,38.688l-2.827-2.828c-0.781-0.781-0.781-2.047,0-2.828c0.78-0.781,2.047-0.781,2.827,0l2.827,2.828c0.781,0.781,0.781,2.047,0,2.828C37.94,39.469,36.674,39.469,35.893,38.688z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-west"
d="M34.034,50c0,1.104-0.896,1.999-2,1.999h-4c-1.104,0-1.998-0.896-1.998-1.999s0.896-2,1.998-2h4C33.14,48,34.034,48.896,34.034,50z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southWest"
d="M35.893,61.312c0.781-0.78,2.048-0.78,2.827,0c0.781,0.78,0.781,2.047,0,2.828l-2.827,2.827c-0.78,0.781-2.047,0.781-2.827,0c-0.781-0.78-0.781-2.047,0-2.827L35.893,61.312z"
/>
<path
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-south"
d="M50.034,65.998c1.104,0,2,0.895,2,1.999v4c0,1.104-0.896,2-2,2c-1.105,0-2-0.896-2-2v-4C48.034,66.893,48.929,65.998,50.034,65.998z"
/>http://www.huiyi8.com/hunsha/hanshi/
<path韩式婚纱照片
class="climacon_component climacon_component-stroke climacon_component-stroke_sunSpoke climacon_component-stroke_sunSpoke-southEast"
d="M64.175,61.312l2.828,2.828c0.779,0.78,0.779,2.047,0,2.827c-0.781,0.781-2.049,0.781-2.828,0l-2.828-2.827c-0.781-0.781-0.781-2.048,0-2.828C62.126,60.531,63.392,60.531,64.175,61.312z"
/>
</g>
<g class="climacon_componentWrap climacon_componentWrap_sunBody" clip-path="url(#sunFillClip)">
<circle
class="climacon_component climacon_component-stroke climacon_component-stroke_sunBody"
cx="50.034"
cy="50"
r="11.999"
/>
</g>
</g>
</g>
</svg><!-- sunwww。newsky365。com -->
Html+CSS3技术实现动画、天气图标动态效果 效果很酷的更多相关文章
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- 纯CSS3技术 加载中
你能相信吗?这些都是由一个DIV元素实现的动画,纯CSS3技术 html <div class="loader">加载中...</div> css: 图( ...
- 一款纯css3实现的动画按钮
今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览 ...
- 纯css制作电闪雷鸣的天气图标
效果 效果图如下 实现思路 使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌 ...
随机推荐
- [Sqlite]-->嵌入式数据库事务理解以及实例操作
引子: 1. Sqlite在Windows.Linux 和 Mac OS X 上的安装过程 2,嵌入式数据库的安装.建库.建表.更新表结构以及数据导入导出等等具体过程记录 SQLite 事务(Tran ...
- 转:几款主流pcb软件比较
原理图设计软件:会ORCAD就可以了,支持的Netlist超多,基本是业界标准. PCB Layout 软件 1.Protel,现在推AltiumDesigner.国内低端设计的主流,国外基本没人 ...
- ros学习网站
ROS机器人操作系统入门-中国大学MOOC https://www.bilibili.com/video/av24585414/?p=39 http://i.youku.com/i/UNDA ...
- 01-jsp与javabean
<%@page import="java.util.Date"%><%@ page language="java" contentType=& ...
- HDFS源码分析EditLog之获取编辑日志输入流
在<HDFS源码分析之EditLogTailer>一文中,我们详细了解了编辑日志跟踪器EditLogTailer的实现,介绍了其内部编辑日志追踪线程EditLogTailerThread的 ...
- 疑问:使用find_elements_by_ios_predicate定位元素组,获取元素的index没有按照顺序
通过ios Appium Inspect查看到的元素信息如下: eList=self.driver.find_elements_by_ios_predicate('type == “XCUIEleme ...
- 【Python + Selenium】初次用IE浏览器之报错:selenium.common.exceptions.WebDriverException: Message: Unexpected error launching Internet Explorer. Protected Mode settings are not the same for all zones.
初次用IE浏览器运行自动化程序时,报错:selenium.common.exceptions.WebDriverException: Message: Unexpected error launchi ...
- programming review (c++): (2)binary tree, BFS, DFS, recursive, non-recursive
1.二叉树定义 // Definition for a binary tree node. struct TreeNode { int val; TreeNode *left; TreeNode *r ...
- 1 zabbix3.2.4 安装
一. 搭建zabbix服务 Zabbix 3.0对PHP的要求最低为5.4,而CentOS6默认为5.3.3,完全不满足要求,故需要利用第三方源,将PHP升级到5.4以上,注意,不支持PHP7.如下是 ...
- 【BZOJ2789】[Poi2012]Letters 树状数组
[BZOJ2789][Poi2012]Letters Description 给出两个长度相同且由大写英文字母组成的字符串A.B,保证A和B中每种字母出现的次数相同. 现在每次可以交换A中相邻两个字符 ...