【前端设计】card

欢迎来到前端设计专栏,本专栏收藏了一些好看且实用的前端作品,使用简单的html、css语法打造创意有趣的作品,为网站加入更多高级创意的元素。

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="./card1.css"></head>
<body>
<div class="card"><div class="container"><div class="cloud front"><span class="left-front"></span><span class="right-front"></span></div><span class="sun sunshine"></span><span class="sun"></span><div class="cloud back"><span class="left-back"></span><span class="right-back"></span></div></div><div class="card-header"><span>西安 - 雁塔区<br>陕西</span><span>March 13</span></div><span class="temp">23°</span><div class="temp-scale"><span>Celcius</span></div>
</div>
</body>
</html>

css

.card {width: 350px;height: 235px;position: relative;padding: 25px;background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #FFF7B1 0%, rgba(255, 255, 255, 0) 71.88%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #FFFFFF;box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);border-radius: 23px;transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);cursor: pointer;
}.card:hover {transform: scale(1.05);
}.container {width: 250px;height: 250px;position: absolute;right: -35px;top: -50px;display: flex;align-items: center;justify-content: center;transform: scale(0.7);
}.cloud {width: 250px;
}.front {padding-top: 45px;margin-left: 25px;display: inline;position: absolute;z-index: 11;animation: clouds 8s infinite;animation-timing-function: ease-in-out;
}.back {margin-top: -30px;margin-left: 150px;z-index: 12;animation: clouds 12s infinite;animation-timing-function: ease-in-out;
}.right-front {width: 45px;height: 45px;border-radius: 50% 50% 50% 0%;background-color: #4c9beb;display: inline-block;margin-left: -25px;z-index: 5;
}.left-front {width: 65px;height: 65px;border-radius: 50% 50% 0% 50%;background-color: #4c9beb;display: inline-block;z-index: 5;
}.right-back {width: 50px;height: 50px;border-radius: 50% 50% 50% 0%;background-color: #4c9beb;display: inline-block;margin-left: -20px;z-index: 5;
}.left-back {width: 30px;height: 30px;border-radius: 50% 50% 0% 50%;background-color: #4c9beb;display: inline-block;z-index: 5;
}.sun {width: 120px;height: 120px;background: -webkit-linear-gradient(to right, #fcbb04, #fffc00);background: linear-gradient(to right, #fcbb04, #fffc00);border-radius: 60px;display: inline;position: absolute;
}.sunshine {animation: sunshines 2s infinite;
}@keyframes sunshines {0% {transform: scale(1);opacity: 0.6;}100% {transform: scale(1.4);opacity: 0;}
}@keyframes clouds {0% {transform: translateX(15px);}50% {transform: translateX(0px);}100% {transform: translateX(15px);}
}.card-header {display: flex;flex-direction: column;gap: 10px;
}.card-header span:first-child {word-break: break-all;font-weight: 800;font-size: 15px;line-height: 135%;color: rgba(87, 77, 51, 0.66);
}.card-header span:last-child {font-weight: 700;font-size: 15px;line-height: 135%;color: rgba(87, 77, 51, 0.33);
}.temp {position: absolute;left: 25px;bottom: 12px;font-weight: 700;font-size: 64px;line-height: 77px;color: rgba(87, 77, 51, 1);
}.temp-scale {width: 80px;height: 36px;position: absolute;right: 25px;bottom: 25px;display: flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, 0.06);border-radius: 9px;
}.temp-scale span {font-weight: 700;font-size: 13px;line-height: 134.49%;color: rgba(87, 77, 51, 0.66);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/642362.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一文让你了解UI自动化测试

测试都起什么作用 - 是项目的保险&#xff0c;但不是项目的救命草&#xff1b;测试无实际产出&#xff0c;但作用远大于实际产出&#xff1b;测试是从项目维度保证质量&#xff0c;而不是测试阶段。 UI自动化&#xff08;下面简称自动化&#xff09; - 基于UI进行自动功能测试…

IndexedDB-增增删改查示例

1. 增加数据 // 打开数据库 const dbName myDatabase; const request indexedDB.open(dbName, 1);// 数据库被新建或升级时创建对象存储空间 request.onupgradeneeded event > {const db event.target.result;const objectStore db.createObjectStore(customers, { ke…

C++ STL之stack的使用及模拟实现

文章目录 1. 介绍2. stack的使用3. 栈的模拟实现 1. 介绍 stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作…

(M)unity2D敌人的创建、人物属性设置,遇敌掉血

敌人的创建 1.敌人添加与组件设置 1&#xff09;添加敌人后&#xff0c;刚体添加&#xff0c;碰撞体添加&#xff08;一个碰撞体使猪在地上走&#xff0c;不接触人&#xff0c;另一个碰撞体组件使人和猪碰在一起产生伤害&#xff09; ①刚体 ②碰撞体一 设置的只在脚下&a…

从0开始学习mysql 第十四课:数据库设计与三范式

第十四课&#xff1a;数据库设计与三范式 学习目标 在本课中&#xff0c;你将学习关系数据库设计的三个基本范式&#xff0c;它们是用来规范数据库结构&#xff0c;减少数据冗余和改善数据完整性的准则。你将学习&#xff1a; 第一范式&#xff08;1NF&#xff09;的概念和实…

知识产权管理

内容&#xff1a; 狭义---著作权&#xff0c;领接权&#xff0c;专利权&#xff0c;商标权 广义---著作权&#xff0c;领接权&#xff0c;专利权&#xff0c;商标权及商业秘密权&#xff0c;防止不正当竞争权&#xff0c;植物新品种权&#xff0c;集成电路布图设计圈、地理标志…

springboot整合MongoDB实战

目录 环境准备 引入依赖 配置yml 注入mongoTemplate 集合操作 文档操作 创建实体 添加文档 查询文档 更新文档 删除文档 环境准备 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-da…

epoll接口

B站就业班视频代码搬运 p54 但是我跟老师的代码还是有点区别。。老师那里居然ev复用。。那么数组里那些结构体都用不上&#xff1f;&#xff1f; 注意&#xff0c;本篇不是epoll反应堆。 I/O多路复用一共有select , poll ,epoll等模型&#xff0c;但是真正的高并发的话是epo…

优先级队列(堆)详解

优先级队列&#xff08;堆&#xff09;详解 目录 堆的概念堆的存储方式堆的基本操作优先级队列模拟实现PriorityQueue接口介绍堆排序Top-k问题 1、堆的概念 如果有一个关键码的集合K {k0&#xff0c;k1&#xff0c; k2&#xff0c;…&#xff0c;kn-1}&#xff0c;把它的所…

安卓ADB实操教程:以三星Galaxy S10为例

引言 ADB&#xff08;Android Debug Bridge&#xff09;是一个功能强大的命令行工具&#xff0c;它允许用户与安卓设备进行通信以便进行各种操作&#xff0c;包括安装和调试应用程序&#xff0c;访问设备的shell等。本教程将以三星Galaxy S10为例&#xff0c;详细介绍如何使用…

SAP 五个报废率设置简介(上)

通常在生产制造过程中都会面临报废率的问题,生产工艺路线的问题,原材料质量的问题,总会有一些产品在生产过程中被做成报废品,通常报废率的设置有时候会遵循行业的标准设置,亦或者根据工厂生产中统计的历史数据分析后根据不同的产品设置不同的报废率,从而在执行物料的采购…

VM下Unbunt虚拟机上网设置

系列文章目录 VM下虚拟机上网设置 VM下虚拟机上网设置 右击VM软件中你需要设置的虚拟机&#xff0c;选择设置 宿主机如果你用的是笔记本外加WIFI连接选择NAT网络模式 进入虚拟机看能否上网 不行的话&#xff0c;进入虚拟机点击&#xff0c;选择最后一栏&#xff0c;编辑连接 点…

华为认证的HCIP考实验考试么?

HCIP在考试的时候不考实验&#xff0c;只考笔试&#xff0c;只是不同方向的HCIP认证考试的考试科目不同&#xff0c;有的考一科&#xff0c;有的考二科&#xff0c;有的考三科&#xff0c;具体看方向来定。HCIA和HCIP只考笔试。HCIE考笔试和实验。 虽然HCIP不考实操&#xff0…

《WebKit 技术内幕》学习之七(1): 渲染基础

《WebKit 技术内幕》之七&#xff08;1&#xff09;&#xff1a; 渲染基础 WebKit的布局计算使用 RenderObject 树并保存计算结果到 RenderObject 树。 RenderObject 树同其他树&#xff08;如 RenderLayer 树等&#xff09;&#xff0c;构成了 WebKit 渲染的为要基础设施。 1…

【数据结构】链表(单链表与双链表实现+原理+源码)

博主介绍&#xff1a;✌全网粉丝喜爱、前后端领域优质创作者、本质互联网精神、坚持优质作品共享、掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战✌有需要可以联系作者我哦&#xff01; &#x1f345;附上相关C语言版源码讲解&#x1f345; &#x1f44…

python04-变量命名规则

python需要使用标识符来给变量命名。 标识符&#xff0c;我来解释下&#xff0c;就是给程序中变量、类、方法命名的符号&#xff0c;简单理解就是起一个名字&#xff0c;这个名字必须是合法的名字&#xff0c; 对于Python来说&#xff0c;标识符必须是以字母、下划线(_)开头&…

鸿蒙自定义刷新组件使用

前言 DevEco Studio版本&#xff1a;4.0.0.600 1、RefreshLibrary_HarmonyOS.har&#xff0c;用于HarmonyOS "minAPIVersion": 9, "targetAPIVersion": 9, "apiReleaseType": "Release", "compileSdkVersion": "3.…

用户画像系列——在线服务调优实践

前面文章讲到画像的应用的几个方面&#xff0c;其中画像的在线服务应用主要是在推荐场景、策略引擎场景&#xff0c;这两部分场景都是面向线上的c端服务。 推荐场景&#xff1a;根据不同的用户推荐不同的内容&#xff0c;做到个性化推荐&#xff0c;需要读取画像的一些偏好数据…

openssl3.2/test/certs - 008 - root-nonca trust variants: +serverAuth +anyEKU

文章目录 openssl3.2/test/certs - 008 - root-nonca trust variants: serverAuth anyEKU概述笔记END openssl3.2/test/certs - 008 - root-nonca trust variants: serverAuth anyEKU 概述 openssl3.2 - 官方demo学习 - test - certs 笔记 // \file my_openssl_win_log_doc…

20240123----重返学习-原生js纯函数获取用户电脑上的文件

20240123----重返学习-原生js纯函数获取用户电脑上的文件 思路说明 通过外加点击后&#xff0c;通过监听这个DOM元素的change事件&#xff0c;在用户点击之后就能拿到用户电脑上的文件了。通过原生js来动态创建type"file"的input元素&#xff0c;之后给监听该元素的…