天气预报鼠标css,6个纯CSS3实现的天气预报动画图标

最新推荐文章于 2024-06-21 20:56:33 发布
最新推荐文章于 2024-06-21 20:56:33 发布
阅读量247 收藏
点赞数
文章标签： 天气预报鼠标css

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-serif;

text-align: center;

background-color: currentColor;

}

h1 {

margin-bottom: 1.375rem;

color: #fff;

font-weight: 100;

font-size: 2rem;

text-transform: uppercase;

}

.icon {

position: relative;

display: inline-block;

width: 12rem;

height: 10rem;

}

.cloud {

position: absolute;

z-index: 1;

top: 50%;

left: 50%;

width: 3.6875rem;

height: 3.6875rem;

margin: -1.84375rem;

background: currentColor;

border-radius: 50%;

box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem, 2.0625rem 0.9375rem 0 -0.9375rem, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff;

}

.cloud:after {

content: '';

position: absolute;

bottom: 0;

left: -0.5rem;

display: block;

width: 4.5625rem;

height: 1rem;

background: currentColor;

box-shadow: 0 0.375rem #fff;

}

.cloud:nth-child(2) {

z-index: 0;

background: #fff;

box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem #fff, 2.0625rem 0.9375rem 0 -0.9375rem #fff, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff;

opacity: 0.3;

-webkit-transform: scale(0.5) translate(6rem, -3rem);

-ms-transform: scale(0.5) translate(6rem, -3rem);

transform: scale(0.5) translate(6rem, -3rem);

-webkit-animation: cloud 4s linear infinite;

animation: cloud 4s linear infinite;

}

.cloud:nth-child(2):after {

background: #fff;

}

.sun {

position: absolute;

top: 50%;

left: 50%;

width: 2.5rem;

height: 2.5rem;

margin: -1.25rem;

background: currentColor;

border-radius: 50%;

box-shadow: 0 0 0 0.375rem #fff;

-webkit-animation: spin 12s infinite linear;

animation: spin 12s infinite linear;

}

.rays {

position: absolute;

top: -2rem;

left: 50%;

display: block;

width: 0.375rem;

height: 1.125rem;

margin-left: -0.1875rem;

background: #fff;

border-radius: 0.25rem;

box-shadow: 0 5.375rem #fff;

}

.rays:before,

.rays:after {

content: '';

position: absolute;

top: 0rem;

left: 0rem;

display: block;

width: 0.375rem;

height: 1.125rem;

-webkit-transform: rotate(60deg);

-ms-transform: rotate(60deg);

transform: rotate(60deg);

-webkit-transform-origin: 50% 3.25rem;

-ms-transform-origin: 50% 3.25rem;

transform-origin: 50% 3.25rem;

background: #fff;

border-radius: 0.25rem;

box-shadow: 0 5.375rem #fff;

}

.rays:before {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.cloud + .sun {

margin: -2rem 1rem;

}

.rain,

.lightning,

.snow {

position: absolute;

z-index: 2;

top: 50%;

left: 50%;

width: 3.75rem;

height: 3.75rem;

margin: 0.375rem 0 0 -2rem;

background: currentColor;

}

.rain:after {

content: '';

position: absolute;

z-index: 2;

top: 50%;

left: 50%;

width: 1.125rem;

height: 1.125rem;

margin: -1rem 0 0 -0.25rem;

background: #0cf;

border-radius: 100% 0 60% 50% / 60% 0 100% 50%;

box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);

-webkit-transform: rotate(-28deg);

-ms-transform: rotate(-28deg);

transform: rotate(-28deg);

-webkit-animation: rain 3s linear infinite;

animation: rain 3s linear infinite;

}

.bolt {

position: absolute;

top: 50%;

left: 50%;

width: 1rem;

height: 0.5rem;

margin: -0.875rem 0 0 -0.5rem;

color: #fff;

background: #fff;

opacity: 0.3;

-webkit-animation: lightning 2s linear infinite;

animation: lightning 2s linear infinite;

}

.bolt:nth-child(2) {

width: 0.5rem;

height: 0.25rem;

margin: -1.875rem 0 0 -1.5rem;

-webkit-transform: translate(2.5rem, 2.25rem);

-ms-transform: translate(2.5rem, 2.25rem);

transform: translate(2.5rem, 2.25rem);

opacity: 0.2;

-webkit-animation: lightning 1.5s linear infinite;

animation: lightning 1.5s linear infinite;

}

.bolt:before,

.bolt:after {

content: '';

position: absolute;

z-index: 2;

top: 50%;

left: 50%;

margin: -1.75rem 0 0 -1.25rem;

border-top: 1.25rem solid transparent;

border-right: 0.75rem solid;

border-bottom: 0.75rem solid;

border-left: 0.5rem solid transparent;

-webkit-transform: skewX(-10deg);

-ms-transform: skewX(-10deg);

transform: skewX(-10deg);

}

.bolt:after {

margin: -0.25rem 0 0 -0.0125rem;

border-top: 0.75rem solid;

border-right: 0.5rem solid transparent;

border-bottom: 1.25rem solid transparent;

border-left: 0.75rem solid;

-webkit-transform: skewX(-10deg);

-ms-transform: skewX(-10deg);

transform: skewX(-10deg);

}

.bolt:nth-child(2):before {

margin: -0.875rem 0 0 -0.75rem;

border-top: 0.625rem solid transparent;

border-right: 0.375rem solid;

border-bottom: 0.375rem solid;

border-left: 0.25rem solid transparent;

}

.bolt:nth-child(2):after {

margin: -0.125rem 0 0 0;

border-top: 0.375rem solid;

border-right: 0.25rem solid transparent;

border-bottom: 0.625rem solid transparent;

border-left: 0.375rem solid;

}

.flake:before,

.flake:after {

position: absolute;

top: 50%;

left: 50%;

margin: -1.25rem 0 0 -1.25rem;

content: '\2744';

color: #fff;

list-height: 1em;

opacity: 0.2;

-webkit-animation: spin 8s linear infinite reverse;

animation: spin 8s linear infinite reverse;

}

.flake:after {

margin: -0.125rem 0 0 -1.375rem;

font-size: 1.5rem;

opacity: 0.4;

-webkit-animation: spin 14s linear infinite;

animation: spin 14s linear infinite;

}

.flake:nth-child(2):before {

margin: -0.875rem 0 0 0.25rem;

font-size: 1.25rem;

opacity: 0.2;

-webkit-animation: spin 10s linear infinite;

animation: spin 10s linear infinite;

}

.flake:nth-child(2):after {

margin: 0.5rem 0 0 0.125rem;

font-size: 2rem;

opacity: 0.4;

-webkit-animation: spin 16s linear infinite reverse;

animation: spin 16s linear infinite reverse;

/* Animations */

}

@-webkit-keyframes spin {

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes spin {

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes cloud {

0% {

opacity: 0;

}

50% {

opacity: 0.3;

}

100% {

opacity: 0;

-webkit-transform: scale(0.5) translate(-6rem, -3rem);

transform: scale(0.5) translate(-6rem, -3rem);

}

}

@keyframes cloud {

0% {

opacity: 0;

}

50% {

opacity: 0.3;

}

100% {

opacity: 0;

-webkit-transform: scale(0.5) translate(-6rem, -3rem);

transform: scale(0.5) translate(-6rem, -3rem);

}

}

@-webkit-keyframes rain {

0% {

background: #0cf;

box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;

}

25% {

box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);

}

50% {

background: rgba(255, 255, 255, 0.3);

box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);

}

100% {

box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;

}

}

@keyframes rain {

0% {

background: #0cf;

box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;

}

25% {

box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);

}

50% {

background: rgba(255, 255, 255, 0.3);

box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);

}

100% {

box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;

}

}

@-webkit-keyframes lightning {

45% {

color: #fff;

background: #fff;

opacity: 0.2;

}

50% {

color: #0cf;

background: #0cf;

opacity: 1;

}

55% {

color: #fff;

background: #fff;

opacity: 0.2;

}

}

@keyframes lightning {

45% {

color: #fff;

background: #fff;

opacity: 0.2;

}

50% {

color: #0cf;

background: #0cf;

opacity: 1;

}

55% {

color: #fff;

background: #fff;

opacity: 0.2;

}

}

delawarearthur
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3天气预报动画图标
08-23
今天我们要来分享一款很不错的CSS3天气预报动画图标，图标表示了晴、多云、阴、雨、雷阵雨、雪这6种天气情况，并且每一个图标都带有动画，非常生动地描述了当前的天气状况。关于天气预报，也可以看看这款纯CSS3天气动画图标。
纯CSS3动态天气图标动画特效
07-24
"纯CSS3动态天气图标动画特效"是一个利用CSS3的强大功能创建的项目，它无需JavaScript或其他编程语言，就能实现各种天气状况的动态图标动画。下面将详细介绍这个项目涉及的关键知识点。 1. CSS3动画（Animations）...
使用表格和 CSS 设计天气预报样式
qq_44078323的博客
04-26 2300
使用表格和 CSS 设计天气预报样式 一、实验题目：使用表格和 CSS 设计天气预报样式 二、实验内容：设计如下图所示的天气预报样式，可适当加入其他元素 三、实验步骤：写明实验具体内容及步骤、源代码、实验结果等（附截图） 四、实验总结：实验中遇到的问题、思考与总结等 源代码： <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>天气预报</title> &l
前端开发实战项目：实时天气预报应用
最新发布
qq_42120268的博客
06-21 1275
用户输入城市名称显示该城市的当前天气状况显示未来几天的天气预报优雅的用户界面设计。
开脑洞系列——CSS3版天气预报
weixin_39204527的博客
01-08 548
开脑洞系列——CSS3版天气预报 装B指南 本文中，所有的图形都是在单个标签内实现的，大量使用了 CSS3 中的 ::before 、::after 伪元素，transparent 、border，多重线性与径向渐变，多重内外阴影，如果你的效果不尽人意，请尝试在 Chrome 浏览器下预览。 装B技巧 本文所有图形都会有个容器 包裹
天气预报鼠标css,5个纯CSS实现的天气预报动画图标
weixin_29291863的博客
08-03 377
CSS语言：CSSSCSS确定@import url('https://fonts.googleapis.com/css?family=Raleway');body {background: #fff;}div {width: 130px;height: 130px;border-radius: 40%;z-index: 120;}h1 {font-family: 'Raleway', sans-...
天气预报鼠标css,CSS3 5个天气预报动画式图标
weixin_35719518的博客
08-03 282
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%;...
纯css3天气动画场景特效
weixin_33830216的博客
01-17 124
CSS3超强大，以下是纯用CSS3+HTML实现的场景效果图： 查看效果：http://hovertree.com/h/bjaf/cssrotate.htm css3 3d展示中rotate（）介绍与简单实现 参考：http://hovertree.com/h/bjaf/5cl7svum.htm 更多：http://www.cnblogs.com/roucheng/p/texiao.htm...
纯CSS3实现天气动画图标特效源码.zip
11-09
纯CSS3实现天气动画图标特效源码是一种利用CSS3的强大功能来创建动态、交互式的天气图标的方法。在前端开发中，CSS3已经成为一种标准技术，它提供了许多新的选择器、属性和过渡效果，使得开发者无需依赖JavaScript或...
css3鼠标悬停小图标动画特效
07-24
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的工具，其中鼠标悬停小图标动画特效就是一个吸引用户注意力、提升用户体验的重要手法。本篇将深入探讨如何利用CSS3的关键帧（@keyframes）来实现这种...
纯CSS3实现带3D卡片翻转效果的天气预报动画特效源码.zip
10-31
在本资源中，我们关注的是一个使用纯CSS3技术实现的3D卡片翻转效果的天气预报动画特效。这个源码实例展示了如何利用CSS3的强大功能来创建具有现代感和互动性的网页元素，特别是对于天气预报这样的实时信息展示非常...
HTML5 css3天气图标动画版.rar
07-10
HTML5 css3实现动态的天气预报图标，动画效果也是一大亮点，图标不但是CSS3生成的，还加入了生动的图标动画，做一些移动设备的天气应用非常合适。
Weather-forecast:用Javascript，HTML和CSS进行天气预报
05-12
天气预报 用Javascript，HTML和CSS进行天气预报。
CSS3实现动态天气小图标特效.zip
07-04
CSS3实现动态天气小图标特效是一款纯CSS3实现的天气出太阳，下雨，雷阵雨等动画图标特效代码。
纯CSS3天气动画图标制作7种扁平天气图标动画效果代码
11-24
纯CSS3天气动画图标制作7种扁平天气图标动画效果代码
CSS3 html5 动画版天气预报应用源码.rar
07-10
CSS3 html5 动画版天气预报应用源码，仿App Showcase特效，颜色和风格都不一样，一共有三个例子，都是带有动画效果的，看上去真心不错，代码要连接远程服务器，网络不好的时候，可能会比较慢哦。
鼠标滚动图标CSS3动画
04-06
鼠标滚动图标CSS3动画是一款css3 keyframes属性制作的网站鼠标滚动提示图标动画特效。
分享一组纯css动态好看的天气图标
u011053926的博客
02-28 762
CSS代码比较多，不过比用js写好多了。里面的颜色可以自行更换，动画效果也可以自己发挥。都是带有css3动画的，下面直接上代码。
HTML、CSS和JavaScript实现简单天气预报
m0_63359528的博客
05-21 5560
首先需要获取天气API的数据，可以通过向第三方天气数据服务商发送HTTP请求来获取数据。上面的代码中，先定义了要获取天气数据的城市和API Key，在JavaScript中使用fetch方法发送HTTP请求，获取数据后再使用DOM操作将数据渲染到HTML页面上对应的元素中。接着，将获取到的天气数据动态地展示在HTML页面上。可以使用JavaScript的DOM操作方法，将获取到的数据渲染到页面上指定的位置。最后，为了美化界面，可以使用CSS对整个天气预报页面进行样式设置。
CSS3动画与布局属性详解：从背景到变换
CSS3动画属性如`@keyframes`和`animation`属性允许开发者创建丰富的视觉效果，通过控制动画名称、持续时间、速度曲线、延迟开始时间、重复次数和播放方向来实现动态展示。`background`属性则提供了一站式管理背景...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值