天气预报鼠标css,CSS3 5个天气预报动画式图标

最新推荐文章于 2023-05-21 23:02:32 发布
最新推荐文章于 2023-05-21 23:02:32 发布
阅读量292 收藏
点赞数
文章标签： 天气预报鼠标css

CSS

语言：

CSSSCSS

确定

@import url('https://fonts.googleapis.com/css?family=Work+Sans:200');

:root {

--shadow: #fd6f21;

--ring: currentColor;

--blend1: #fc5830;

--blend2: #f98c24;

--blend-from: 0%;

--blend-to: 100%;

--blend-dir: top right;

}

[icon] {

-webkit-box-flex: 0;

-ms-flex: none;

flex: none;

display: none;

position: relative;

font-size: calc(10em + 1vmin);

width: 1em;

height: 1em;

margin: .3em;

border-radius: 100%;

box-shadow: 0 0 0 .05em var(--ring) inset, 0 0 .3em -.03em var(--shadow);

background: -webkit-linear-gradient( var(--blend-dir), var(--blend1) var(--blend-from), var(--blend2) var(--blend-to));

background: linear-gradient( to var(--blend-dir), var(--blend1) var(--blend-from), var(--blend2) var(--blend-to));

/* filter: saturate(0); */

}

/* [icon]:hover {

filter: saturate(1);

} */

[icon]::after {

content: attr(data-label);

position: absolute;

top: calc(100% + 1vmin);

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

font: inherit;

font-size: .15em;

}

[icon='sunny'] {

--shadow: #fd6f21;

--blend1: #fc5830;

--blend2: #f98c24;

--blend-to: 65%;

}

[icon='cloudy'] {

--shadow: #1378bb;

--blend1: #1b9ce2;

--blend2: #1378bb;

--shadow: #c9e8de;

--blend1: #758595;

--blend2: #e0e2e5;

--blend1: #1b9ce2;

--blend-to: 65%;

--blend-to: 90%;

}

[icon='snowy'] {

--shadow: #c9e8de;

--blend1: #758595;

--blend2: #e0e2e5;

--blend-to: 90%;

--blend-dir: bottom left;

}

[icon='stormy'] {

--shadow: #34c6d8;

--blend1: #4b9cc2;

--blend2: #9adbd9;

}

[icon='supermoon'] {

--shadow: #5133a5;

--blend1: #4054b2;

--blend2: #aa4cba;

--blend-to: 65%;

--blend-dir: bottom right;

}

/* SUNNY */

/* --------------------- */

.sun {

position: absolute;

top: 20%;

left: 80%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 40%;

height: 40%;

border-radius: 100%;

background: #ffeb3b;

box-shadow: 0 0 0 .02em var(--ring) inset, 0 0 .3em -.03em var(--shadow);

-webkit-transform-origin: .1em .1em;

transform-origin: .1em .1em;

}

.sun::after {

content: '';

position: absolute;

top: .1em;

left: 0;

will-change: transform;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: .1em;

height: .1em;

border-radius: 100%;

background: rgba(255, 255, 255, .1);

box-shadow: 0 0 .1em 0 rgba(255, 255, 255, .3) inset, -.1em -.1em 0 .2em rgba(255, 255, 255, .1);

-webkit-animation: flare 12000ms infinite alternate linear;

animation: flare 12000ms infinite alternate linear;

}

/* CLOUDY */

/* --------------------- */

.cloud {

position: absolute;

top: .1em;

left: 65%;

width: .37em;

height: .13em;

border-radius: .1em;

background-color: #fff;

box-shadow: 0 0 .1em .02em var(--ring) inset, 0 0 .3em -.03em var(--shadow);

-webkit-animation: move 3000ms infinite ease-in-out;

animation: move 3000ms infinite ease-in-out;

}

.cloud + .cloud {

top: 25%;

left: 40%;

-webkit-animation: move 3700ms infinite linear;

animation: move 3700ms infinite linear;

}

.cloud::before,

.cloud::after {

content: '';

position: inherit;

border-radius: inherit;

background-color: inherit;

box-shadow: inherit;

bottom: 30%;

}

.cloud::before {

left: .05em;

width: .2em;

height: .2em;

}

.cloud::after {

left: .15em;

width: .15em;

height: .15em;

}

/* SNOWY */

/* --------------------- */

[icon='snowy'] ul {

position: absolute;

list-style: none;

top: 0%;

left: 10%;

right: 0%;

height: 100%;

margin: 0;

padding: 0;

}

[icon='snowy'] li::before,

[icon='snowy'] li::after {

content: '';

position: absolute;

list-style: none;

width: .015em;

height: .01em;

border-radius: 100%;

background-color: var(--ring);

will-change: transform, opacity;

-webkit-animation: snow 3700ms infinite ease-out;

animation: snow 3700ms infinite ease-out;

opacity: 0;

}

[icon='snowy'] li:nth-child(2n+1)::before,

[icon='snowy'] li:nth-child(13n+11)::after {

top: -7%;

left: 40%;

}

[icon='snowy'] li:nth-child(3n+2)::before,

[icon='snowy'] li:nth-child(11n+7)::after {

top: 5%;

left: 90%;

-webkit-animation-delay: 1000ms;

animation-delay: 1000ms;

}

[icon='snowy'] li:nth-child(5n+3)::before,

[icon='snowy'] li:nth-child(7n+5)::after {

top: -10%;

left: 80%;

-webkit-animation-delay: 2000ms;

animation-delay: 2000ms;

}

[icon='snowy'] li:nth-child(7n+5)::before,

[icon='snowy'] li:nth-child(5n+3)::after {

top: 10%;

left: 10%;

-webkit-animation-delay: 1300ms;

animation-delay: 1300ms;

}

[icon='snowy'] li:nth-child(11n+7)::before,

[icon='snowy'] li:nth-child(3n+2)::after {

top: 20%;

left: 70%;

-webkit-animation-delay: 1500ms;

animation-delay: 1500ms;

}

[icon='snowy'] li:nth-child(13n+11)::before,

[icon='snowy'] li:nth-child(2n+1)::after {

top: 35%;

left: 20%;

-webkit-animation-delay: 500ms;

animation-delay: 500ms;

}

.snowman {

position: absolute;

bottom: 30%;

left: 40%;

width: .15em;

height: .15em;

opacity: .9;

background: var(--ring);

border-radius: 100%;

}

.snowman::after {

content: '';

position: absolute;

top: 90%;

left: 30%;

-webkit-transform: translate(-50%, 0%);

transform: translate(-50%, 0%);

width: .275em;

height: .3em;

border-radius: inherit;

background-color: var(--ring);

}

.snowman::before {

content: '';

position: absolute;

top: 0%;

left: 50%;

-webkit-transform: translate(-55%, -50%);

transform: translate(-55%, -50%);

width: .45em;

height: .4em;

border-radius: 60%;

border: .02em solid transparent;

border-bottom-color: var(--blend1);

will-change: border-radius;

-webkit-animation: snowman 9000ms infinite ease-in;

animation: snowman 9000ms infinite ease-in;

}

/* STORMY */

/* --------------------- */

[icon='stormy']::before {

--shadow: rgba(255, 255, 255, 0);

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: .05em;

border-radius: 100%;

opacity: .4;

will-change: background-color;

-webkit-animation: flash 2300ms infinite linear 80ms;

animation: flash 2300ms infinite linear 80ms;

}

[icon='stormy'] .cloud {

--shadow: #c9e8de;

--ring: #f0f2f0;

background-color: var(--shadow);

font-size: 1.3em;

left: 50%;

will-change: background-color, transform, opacity;

-webkit-animation: flash 2300ms infinite linear, move 3700ms infinite linear;

animation: flash 2300ms infinite linear, move 3700ms infinite linear;

}

[icon='stormy'] ul {

position: absolute;

list-style: none;

top: 0%;

left: 70%;

right: 0%;

height: 100%;

margin: 0;

padding: 0;

}

[icon='stormy'] li,

[icon='stormy'] li::before,

[icon='stormy'] li::after {

position: absolute;

width: .005em;

height: .02em;

border-radius: 10%;

background-color: #eee;

opacity: 0;

will-change: transform, opacity;

-webkit-animation: rain 2000ms infinite linear;

animation: rain 2000ms infinite linear;

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

}

[icon='stormy'] li::before,

[icon='stormy'] li::after {

content: '';

}

[icon='stormy'] li:nth-child(5n+3)::before,

[icon='stormy'] li:nth-child(11n+7)::after,

[icon='stormy'] li:nth-child(2n+1) {

top: 10%;

left: 68%;

-webkit-animation-delay: 500ms;

animation-delay: 500ms;

}

[icon='stormy'] li:nth-child(3n+2)::after,

[icon='stormy'] li:nth-child(7n+5)::after,

[icon='stormy'] li:nth-child(3n+2) {

top: 5%;

left: 45%;

-webkit-animation-delay: 1250ms;

animation-delay: 1250ms;

}

[icon='stormy'] li:nth-child(2n+1)::before,

[icon='stormy'] li:nth-child(5n+3)::after,

[icon='stormy'] li:nth-child(7n+5) {

top: 4%;

left: 82%;

-webkit-animation-delay: 750ms;

animation-delay: 750ms;

}

[icon='stormy'] li:nth-child(11n+7)::before,

[icon='stormy'] li:nth-child(3n+2)::after,

[icon='stormy'] li:nth-child(7n+5) {

top: 15%;

left: 15%;

-webkit-animation-delay: 2000ms;

animation-delay: 2000ms;

}

[icon='stormy'] li:nth-child(7n+5)::before,

[icon='stormy'] li:nth-child(2n+1)::after,

[icon='stormy'] li:nth-child(11n+7) {

top: 10%;

left: 33%;

-webkit-animation-delay: 2500ms;

animation-delay: 2500ms;

}

/* SUPERMOON */

/* --------------------- */

[icon="supermoon"]::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-image: -webkit-radial-gradient(1px 1px at 50% 20%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 30% 65%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(2px 2px at 15% 05%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(2px 2px at 37% 35%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(2px 2px at 65% 47%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 42% 29%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 73% 56%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 24% 19%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(2px 2px at 31% 47%, #fff, rgba(0, 0, 0, 0)), -webkit-radial-gradient(1px 1px at 18% 39%, #fff, rgba(0, 0, 0, 0));

background-image: radial-gradient(1px 1px at 50% 20%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 30% 65%, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 15% 05%, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 37% 35%, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 65% 47%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 42% 29%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 73% 56%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 24% 19%, #fff, rgba(0, 0, 0, 0)), radial-gradient(2px 2px at 31% 47%, #fff, rgba(0, 0, 0, 0)), radial-gradient(1px 1px at 18% 39%, #fff, rgba(0, 0, 0, 0));

background-repeat: repeat;

will-change: transform;

-webkit-animation: revolve 120000ms linear infinite;

animation: revolve 120000ms linear infinite;

}

.moon {

position: absolute;

top: 20%;

left: 80%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 40%;

height: 40%;

border-radius: 100%;

background: -webkit-radial-gradient(bottom left, circle, var(--ring), #fef07e);

background: radial-gradient(circle at bottom left, var(--ring), #fef07e);

box-shadow: 0 0 0 .02em var(--ring) inset, 0 0 .3em -.03em var(--blend2);

}

.moon::before,

.moon::after {

content: '';

position: absolute;

border-radius: 100%;

background-color: var(--blend1);

box-shadow: .01em .01em .1em 0 var(--blend1);

}

.moon::before {

top: 15%;

left: 55%;

width: 20%;

height: 20%;

opacity: .3;

}

.moon::after {

bottom: 50%;

left: 25%;

width: 15%;

height: 15%;

opacity: .2;

}

.meteor {

position: absolute;

background-color: #fff;

opacity: 0;

top: 20%;

left: 55%;

width: 1px;

height: 15px;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

will-change: transform, opacity;

-webkit-animation: meteor 6250ms infinite ease-in;

animation: meteor 6250ms infinite ease-in;

}

body {

min-height: 100vh;

font-size: calc(.5em + 1vmin);

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-ms-flex-pack: distribute;

justify-content: space-around;

-ms-flex-flow: row wrap;

flex-flow: row wrap;

font-family: 'Work Sans', sans-serif;

background: #212125;

color: #e6e8db;

}

[icon="sunny"] {

display: block;

}

[icon="cloudy"] {

display: block;

}

[icon="snowy"] {

display: block;

}

[icon="stormy"] {

display: block;

}

[icon="supermoon"] {

display: block;

}

@-webkit-keyframes flare {

to {

-webkit-transform: translate(-.3em, .3em);

transform: translate(-.3em, .3em);

opacity: .4;

font-size: .2em;

}

}

@keyframes flare {

to {

-webkit-transform: translate(-.3em, .3em);

transform: translate(-.3em, .3em);

opacity: .4;

font-size: .2em;

}

}

@-webkit-keyframes move {

50% {

-webkit-transform: translateX(-.05em);

transform: translateX(-.05em);

}

}

@keyframes move {

50% {

-webkit-transform: translateX(-.05em);

transform: translateX(-.05em);

}

}

@-webkit-keyframes snow {

50% {

opacity: 1;

}

100% {

-webkit-transform: translate(-.1em, 15vmin);

transform: translate(-.1em, 15vmin);

}

}

@keyframes snow {

50% {

opacity: 1;

}

100% {

-webkit-transform: translate(-.1em, 15vmin);

transform: translate(-.1em, 15vmin);

}

}

@-webkit-keyframes snowman {

50% {

border-radius: 60% 60% 30% 50%;

}

}

@keyframes snowman {

50% {

border-radius: 60% 60% 30% 50%;

}

}

@-webkit-keyframes flash {

49% {

background-color: var(--shadow);

}

51% {

background-color: var(--ring);

}

53% {

background-color: var(--shadow);

}

57% {

background-color: var(--ring);

}

85% {

background-color: var(--shadow);

}

}

@keyframes flash {

49% {

background-color: var(--shadow);

}

51% {

background-color: var(--ring);

}

53% {

background-color: var(--shadow);

}

57% {

background-color: var(--ring);

}

85% {

background-color: var(--shadow);

}

}

@-webkit-keyframes rain {

10% {

opacity: .4;

}

50% {

opacity: 1;

}

100% {

-webkit-transform: translate(-.1em, .5em);

transform: translate(-.1em, .5em);

}

}

@keyframes rain {

10% {

opacity: .4;

}

50% {

opacity: 1;

}

100% {

-webkit-transform: translate(-.1em, .5em);

transform: translate(-.1em, .5em);

}

}

@-webkit-keyframes revolve {

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes revolve {

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes meteor {

5% {

opacity: 1;

}

8% {

-webkit-transform: translate(-.6em, .6em) rotate(45deg);

transform: translate(-.6em, .6em) rotate(45deg);

opacity: 0;

}

}

@keyframes meteor {

5% {

opacity: 1;

}

8% {

-webkit-transform: translate(-.6em, .6em) rotate(45deg);

transform: translate(-.6em, .6em) rotate(45deg);

opacity: 0;

}

}

岳怀之缘小向
关注
CSS3天气预报动画图标
08-23
今天我们要来分享一款很不错的CSS3天气预报动画图标，图标表示了晴、多云、阴、雨、雷阵雨、雪这6种天气情况，并且每一个图标都带有动画，非常生动地描述了当前的天气状况。关于天气预报，也可以看看这款纯CSS3天气动画图标。
天气预报鼠标css,6个纯CSS3实现的天气预报动画图标
weixin_31993501的博客
08-03 265
CSS语言：CSSSCSS确定html {box-sizing: border-box;}html *,html *:before,html *:after {box-sizing: inherit;}body {max-width: 42rem;padding: 2rem;margin: 0 auto;color: #161616;font-family: 'Roboto', sans-seri...
开脑洞系列——CSS3版天气预报
weixin_39204527的博客
01-08 568
开脑洞系列——CSS3版天气预报 装B指南 本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、::after 伪元素，transparent 、border，多重线性与径向渐变，多重内外阴影，如果你的效果不尽人意，请尝试在 Chrome 浏览器下预览。 装B技巧 本文所有图形都会有个容器 包裹
使用表格和 CSS 设计天气预报样式
qq_44078323的博客
04-26 2462
使用表格和 CSS 设计天气预报样式 一、实验题目：使用表格和 CSS 设计天气预报样式 二、实验内容：设计如下图所示的天气预报样式，可适当加入其他元素 三、实验步骤：写明实验具体内容及步骤、源代码、实验结果等（附截图） 四、实验总结：实验中遇到的问题、思考与总结等 源代码： <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>天气预报</title> &l
天气预报代码各种样式
05-06
各种天气预报的样式jsp和html啊啊啊啊啊
纯CSS3动态天气图标动画特效
07-24
"纯CSS3动态天气图标动画特效"是一个利用CSS3的强大功能创建的项目，它无需JavaScript或其他编程语言，就能实现各种天气状况的动态图标动画。下面将详细介绍这个项目涉及的关键知识点。 1. CSS3动画（Animations）...
css3鼠标悬停小图标动画特效
07-24
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的工具，其中鼠标悬停小图标动画特效就是一个吸引用户注意力、提升用户体验的重要手法。本篇将深入探讨如何利用CSS3的关键帧（@keyframes）来实现这种...
CSS3鼠标悬停图标导航动画特效
04-06
至此，一个基于CSS3的鼠标悬停图标导航动画特效就完成了。这种特效不仅美观，还能提升网站的可用性和吸引力。通过不断尝试和创新，你可以根据自己的品牌风格和用户偏好定制出更多个性化的导航动画效果。 在实际应用...
纯CSS3实现带3D卡片翻转效果的天气预报动画特效源码.zip
10-31
在这个天气预报动画中，transform的rotateX()和rotateY()函数被用来实现卡片翻转的3D效果。当用户交互时，这些函数会改变角度值，从而实现卡片从正面翻转到背面的视觉效果。 2. **透视（Perspective）**：为了产生...
CSS3扁平风格鼠标悬停图标动画导航菜单代码
06-05
在网页设计中，CSS3（层叠样式表第...通过以上知识点的应用，这个CSS3导航菜单实现了鼠标悬停时的扁平化图标动画，为用户提供了丰富的交互体验。对于前端开发者来说，理解和掌握这些技术是提升网页设计水平的重要步骤。
Weather-forecast:用Javascript，HTML和CSS进行天气预报
05-12
天气预报 用Javascript，HTML和CSS进行天气预报。
天气预报前端
05-21
微信小程序，前端，天气预报小程序，学习使用，请勿使用在工程上
天气预报案例
03-28
NULL 博文链接：https://yangsongjing.iteye.com/blog/1246775
HTML、CSS和JavaScript实现简单天气预报
最新发布
m0_63359528的博客
05-21 5818
首先需要获取天气API的数据，可以通过向第三方天气数据服务商发送HTTP请求来获取数据。上面的代码中，先定义了要获取天气数据的城市和API Key，在JavaScript中使用fetch方法发送HTTP请求，获取数据后再使用DOM操作将数据渲染到HTML页面上对应的元素中。接着，将获取到的天气数据动态地展示在HTML页面上。可以使用JavaScript的DOM操作方法，将获取到的数据渲染到页面上指定的位置。最后，为了美化界面，可以使用CSS对整个天气预报页面进行样式设置。
CSS3 transition transform 动画实现天气预报显示
freshlover的专栏
07-24 3556
天气显示的动画。其中用到了css3 transition 动画基础。W3C标准规定：“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态。这种状态可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑的以动画效果改变css的属性值。” transition语法： transition:[|||| ||] transition主要包含
css3制作天气预报icons
Smile_Lee00的博客
08-21 736
在codepen上看到的用css3制作的天气预报icons觉得很不错，偷过来分享下~ html> html> head lang="en"> meta charset="UTF-8"> title>title> style> html { box-sizing: border-box; } html *, html *:
分享一组纯css动态好看的天气图标
u011053926的博客
02-28 823
CSS代码比较多，不过比用js写好多了。里面的颜色可以自行更换，动画效果也可以自己发挥。都是带有css3动画的，下面直接上代码。
H5 天气预报样式
Mr_王小峰的博客
08-24 5116
本文主要是对h5样式和动画的熟练应用。要想实时显示天气预报，请自行百度... 实现的界面是 html 天气预报 郑州 -13 ~ 2 小雪 微风 实时温度:13度 空气质量 13s 轻度污染 周二 13-5 晴 微风 周三 13-5 晴
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
weixin_39585617的博客
06-04 654
CSS3动画属性并不是很多，但重点其实是你怎样去运用它，从简单的hover状态或复杂的小动画，都可以巧妙的用CSS3动画属性来实现。今天主要是和大家分享一个比较有创意、实用的CSS天气图标动画，静态的天气图标看上去是很呆板，若加上动画，看起来会更加真实生动，以下例子就是很好的参考案例。下面我们来做一个会下雨的天气图标实例，过程其实很简单哦。STEP1: 整体HTML架构复制代码代码如下:STEP2...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值