html div添加天气,web前端入门到实战:纯CSS写一个动态太阳的天气图标
效果
效果图如下
实现思路
div实现太阳的一条矩形光影
before伪元素制作另一条光影矩形,和已有的转变90°
after伪元素画个圆实现太阳样式
dom结构
用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写太阳的一条光影矩形的样式。
css样式
1、定义父容器样式,控制图标位置,顺便给整个页面加个背景色,方便预览
body{
background: rgba(73, 74, 95, 1);
}
.container{
width: 170px;
height: 170px;
position: relative;
margin: 250px auto;
}
web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程,学习工具,职业规划)
2、光影矩形样式,有一个360°旋转的动画
.sunny{
width: 20px;
height: 140px;
position: absolute;
top: 20px;
left: 90px;
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
animation: sunny 15s linear infinite;
}
@keyframes sunny {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
3、写另一条垂直的光影矩形
.sunny::before{
content: '';
width: 20px;
height: 140px;
position: absolute;
bottom: 0;
left: 0;
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
transform: rotate(90deg)
}
(从零基础开始到前端项目实战教程,学习工具,职业规划)
4、太阳圆圈的样式
.sunny::after{
content: '';
width: 80px;
height: 80px;
position: absolute;
top: 30px;
left: -30px;
background: #ffee44;
border-radius: 50%;
box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
}
html div添加天气,web前端入门到实战:纯CSS写一个动态太阳的天气图标相关推荐
- html前端页面的基本骨架是,web前端入门到实战:css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案 发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南 优点 简单,不需要工程,不用puppeteer生成骨架d ...
- web前端入门到实战:CSS动画之旋转魔方轮播
下面我将一步一步详解如何利用纯CSS实现一个旋转魔方轮播的效果. 总的来说我们需要实现以下两个主要功能: 构建一个能够旋转的立方体 让立方体拥有基本轮播所具有的特性 但在完成以上两点之前我们需要再次了 ...
- web前端入门到实战:CSS鼠标悬浮图片模糊切换效果
分享一段代码实例,它实现了图片的模糊效果. 默认状态下,图片是模糊的,当鼠标悬浮那么图片会恢复正常状态. 代码实例如下: <!doctype html> <html> < ...
- web前端入门到实战:CSS mix-blend-mode滤色screen混合模式
一.滤色screen混合模式速览 screen混合模式,国内称为"滤色",其计算公式是: 公式中的C表示最终混合的RGB色值(范围是0-255),A和B表示用来混合的两个颜色的RG ...
- web前端入门到实战:CSS颜色、背景和剪切
颜色 CSS 中可以改变文字的颜色还有元素的背景颜色.可以用颜色关键字来定义颜色,如red,但是这些颜色关键字并不常用. transparent transparent可以让文字或背景变的完全透明的颜 ...
- web前端入门到实战:css+svg实现b站充电效果
css+svg实现b站充电效果 难点 svg图形的两块蒙版制作 先上代码 这是左边粉色框框的内容 这个没啥好说的 <div id="con"><div id=&q ...
- web前端入门到实战:CSS实现平行四边形布局效果
如何实现下图所示的平行四边形布局效果? 一.skewX的局限 一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而 ...
- web前端入门到实战:css绘制各种形状图形
虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习. 一.实心圆 .circle {width: 120px; ...
- web前端入门到实战:CSS 滚动捕捉技术(Scroll Snapping)
CSS 滚动捕捉允许用户完成滚动之后将视口锁定到某个元素的位置.非常适合用来建立下面这样的应用: 基本使用 实现滚动捕捉主要依靠两个属性:容器元素的 scroll-snap-type 属性,以及子元素 ...
最新文章
- ASP.NET MVC 控制器激活(二)
- Spring事务异常回滚,捕获异常不抛出就不会回滚
- 在script所在位置插入内容
- HighNewTech—2019CES:历史性!百度用自家的自动驾驶物流,把一个快递送到了 2019CES会场
- 跨站点脚本(XSS)
- linux命令 sed 有的功能有,Linux命令:sed简介
- MFC在其他类中访问主窗体的成员
- 谁说前端工程师不能成为全栈?
- win7 ubuntu 双系统安装
- zTree入门实例(一眼就看会)
- mysql 三种循环的区别_mysql存储过程中的三种循环
- flowable 配置自定义表单_SpringBootSecurity学习(03)网页版登录添加自定义登录页面...
- 双方确认函_确认函格式范文
- Segment Tree Beats(吉司机线段树)
- html版权标签怎么打,版权符号怎么打_dreamweaver中版权的符号怎么打?
- viper4android fx原理,ViPer4android. FX顶级音效!
- 编程制作动态壁纸的思路_Android应用源码动态壁纸开发必看例子源码
- 自己做量化交易软件(9通通量化框架的雏形建立
- ubuntu安装时姓名、计算机名、用户名的含义
- leetcode 61 旋转链表 c++
热门文章
- 雷神911x猎荒者 2023怎么样
- 深度相机(三)——结构光(iPhone X 齐刘海原理)
- 2.【镜像世界的数据】
- Mac M1 Maven安装与配置
- java opc da 连接 kepserver 报错 踩坑 解决办法
- 【C#+SQL Server】实现模仿QQ的交友软件 三:申请账号窗体设计讲解(附源码和资源)
- java prepend和append_jQuery 追加元素的方法如append、prepend和队列方法如push,unshift
- iphone X 越狱笔记
- odyssey ios13.6 a12 iphone xr越狱相关
- 微信小程序 制作五星评分组件