Web前端开发之CSS_3

  • CSS3 新特性
  • 动画
  • 媒体查询
  • 雪碧图
  • 字体图标

1. CSS3 新特性

1.1 圆角

        使用CSS3 border-radius 属性,可以给任何元素制作“圆角”。border-radius属性,可以使用以下规则:

  • 四个值:依次为左上角、右上角、右下角和左下角(顺时针)
  • 三个值:第一个值为左上角,第二个值为右上角和左下角,第三个值为右下角
  • 两个值:第一个值为左上角和右下角,第二个值为右上角和左下角
  • 一个值:四个圆角值相同
1.2 阴影

        box-shadow向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur color;

描述
h-shadow必选,水平阴影的位置
v-shadow必选,垂直阴影的位置
blur可选,模糊距离
color可选,阴影的颜色

2. 动画

        动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间,或用关键词"from""to",等同于0%100%

2.1 @keyframes创建动画

@keyframes name{                // name:动画名称,开发人员自己命名

        from|0%{

                css样式

        }

        percent{                         // 为百分比值,可添加多个百分比值

                css样式

        }

        to|100%{

                css样式

        }

}

2.2 animation执行动画

animation: name duration timing-function delay iteration-count direction;

描述
name设置动画名称
duration设置动画持续时间
timing-function设置动画效果的速率(如下)
delay设置动画的开始时间(延时执行)
iteration-count设置动画循环的次数,infinite为无线次数的循环
direction设置动画播放的方向(如下)
animation-play-state控制动画的播放状态:running代表播放,pause代表停止播放
timing-function值描述
ease逐渐变慢(默认)
linear匀速
ease-in加速
ease-out减速
ease-in-out先加速后减速
direction值描述
normal默认值为normal表示向前播放
alternate动画播放在第偶数次向前播放,第奇数次反方向播放
 2.3 切换背景颜色

div{

        width: 200px;

        height: 200px;

        background-color: red;

        animation: myAnim 3s linear 0s infinite;

}

div:hover{

        animation-play-state: paused;             // 可用于更改背景颜色

}

@keyframes myAnim{

        0%{

                width: 200px;

                background-color: red;

        }

        50%{

                width: 400px;

                background-color: green;

        }

        100%{

                width: 200px;

                background-color: red;

        }

}

2.4 呼吸效果

.box{

        width: 500px;

        height: 500px;

        margin: 40px auto;

        background-color: #2b92d4;

        border-radius: 5px;

        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);

        animation: breathe 1s ease-in-out infinite alternate;

}

@keyframes breathe{

        0%{

                opacity: 0.2;

                box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);

        }

        50%{

                opacity: 0.5;

                box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76);

        }

        100%{

                opacity: 1;

                box-shadow: 0 1px 30px rgba(59, 255, 255, 1);

        }

}

3. 媒体查询

        媒体查询能使页面在不同终端设备下达到不同的效果。媒体查询会根据设备的大小自动识别加载不同的样式

3.1 设置meta标签

        使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

  • width = device-width 宽度等于当前设备的宽度
  • initial-scale 初始的缩放比例(默认设置为1.0)
  • maximum-scale 允许用户缩放到的最大比例(默认设置为1.0)
  • user-scalable 用户是狗可以手动缩放(默认设置为no)
3.2 媒体查询语法

<div class="box"></div>

<p class="p1">哈哈哈</p>

<p class="p2">呵呵呵</p>

@media screen and (max-width:768px) {    /* 设备小于768px加载样式 */

        .box{

                background-color: aqua;

        }

        .p1{

                display: none;

        }

        .p2{

                display: none;

        }

}

@media screen and (min-width:768px) and (max-width:996px) {

        .box{

                background-color: chartreuse;

        }

        .p1{

                display: none;

        }

        .p2{

                display: block;

        }

}

@media screen and (min-width:996px) {

        .box{

                background-color: red;

        }

        .p1{

                display: block;

        }

        .p2{

                display: block;

        }

4. 雪碧图

        CSS Sprite也叫CSS精灵图、CSS雪碧图,是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中去

优点:

  • 减少图片的字节
  • 减少网页的http请求,从而大大的提高页面的性能

原理:

  • 通过background-image引入背景图片
  • 通过background-position把背景图片移动到自己需要的位置

<i class="icon1"></i>

<i class="icon2"></i>

.icon{

        display:block;                                // 设置为块级元素后,可设置宽高属性

        background-image:url(1.png);

        background-position: -20px 0;

        width:45px;

        height:70px;

.icon2{    

        display:block;

        background-image:url(1.png);

        background-position: -93px -84px;

        width:45px;

        height:70px;

}

5. 字体图标

        使用图标时,会遇到失真的情况,而且图片数量越多,页面加载就越慢。所以,可以使用字体图标的方式显示图标既解决了失真问题,也解决了图片占用资源的问题

常用字体图标库:阿里字体图标库

优点:

  • 轻量性:加载速度快,减少http请求
  • 灵活性:可利用CSS设置大小颜色等
  • 兼容性:网页字体支持所有现代浏览器,包括IE低版本

使用字体图标:

  • 注册账号并登录
  • 选取图标或搜索图标
  • 添加购物车
  • 下载代码
  • 选择 font-class 引用

<span class="iconfont icon-add-circle"></span>

<link rel="stylesheet" href="./css/iconfont.css">

.iconfont{

        font-size:35px;

        background-color:#e1251b

}

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

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

相关文章

牛客NC275 和为S的两个数字【简单 map C++/Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/390da4f7a00f44bea7c2f3d19491311b 思路 map参考答案C #include <vector> class Solution {public:vector<int> FindNumbersWithSum(vector<int> array, int sum) {vector<int> ans;m…

Java并发代码入门

Java并发代码入门 1. 第一个线程2. Java创建线程的5种方式3. 多线程优势代码4. 线程的属性5. 中断线程1. 使用自定义的变量来作为标志位2. Thread.interrupted() 或者Thread.currentThread().isInterrupted() 代替自定义标志位 6. join2.5 等待一个线程-join()A中调用B.join表示…

【iOS】NSOperation、NSOperationQueue

文章目录 前言一、NSOperation、NSOperationQueue 简介二、NSOperation、NSOperationQueue 操作和操作队列三、NSOperation四、NSOperationQueue五、NSOperationQueue 控制串行执行、并发执行六、 NSOperation 操作依赖七、NSOperation 优先级八、NSOperation、NSOperationQueu…

一个JDBC小工具

pom.xml 结构 <properties><maven.compiler.source>8</maven.compiler.source><maven.compiler.target>8</maven.compiler.target><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><mysql5>5.1.44<…

服务器端优化-Redis内存划分和内存配置

6、服务器端优化-Redis内存划分和内存配置 当Redis内存不足时&#xff0c;可能导致Key频繁被删除、响应时间变长、QPS不稳定等问题。当内存使用率达到90%以上时就需要我们警惕&#xff0c;并快速定位到内存占用的原因。 有关碎片问题分析 Redis底层分配并不是这个key有多大&…

[信息收集]-端口扫描--Nmap

端口号 端口号的概念属于计算机网络的传输层&#xff0c;标识这些不同的应用程序和服务而存在的。通过使用不同的端口号&#xff0c;传输层可以将接收到的数据包准确地传递给目标应用程序。 80&#xff1a;HTTP&#xff08;超文本传输协议&#xff09;用于Web浏览器访问网页 …

淘宝商家联系方式获取工具解析 淘宝商家采集工具分享

淘宝商家联系方式获取工具是一种用于获取淘宝商家联系方式的软件工具。它可以帮助用户从淘宝网上采集商家的联系方式&#xff0c;如店铺名称、联系人姓名、电话号码、微信号等。 这种工具的原理通常是通过模拟用户在淘宝搜索商家和访问商家店铺的行为&#xff0c;然后从店铺页…

【信息系统项目管理师练习题】资源管理

马斯洛需求层次理论中,下列哪种需求属于最高层次的需求? A) 生理需求 B) 安全需求 C) 社会交往的需求 D) 自我实现的需求 答案:D) 自我实现的需求 根据赫兹伯格双因素理论,下列关于激励因素和保健因素的说法正确的是: A) 激励因素能够消除工作中的不满意,保健因素…

jvm面试题30问

什么是JVM的跨平台&#xff1f; 什么是JVM的语言无关性&#xff1f; 什么是JVM的解释执行 什么是JIT? JIT&#xff1a;在Java编程语言和环境中&#xff0c;即时编译器&#xff08;JIT compiler&#xff0c;just-in-time compiler&#xff09;是一个把Java的字节码&#xff08;…

【挑战30天首通《谷粒商城》】-【第一天】02、简介-项目整体效果展示

文章目录 课程介绍 ( 本章了解即可&#xff0c;可以略过)一、 分布式基础 (全栈开发篇) (初中级)二、 分布式高级 (微服务架构篇) ( 高级)三、高可用集群 (架构师提升篇)( 架构 ) one more thing 课程介绍 ( 本章了解即可&#xff0c;可以略过) 1.分布式基础(全栈开发篇)2.分布…

git merge 命令合并指定分支到当前分支

git merge 是一个用于合并两个分支的 Git 命令。当你在不同的分支上工作时&#xff0c;可能会有一些不同的更改。使用 git merge 可以将这些更改合并到一起。以下是一些常见的 git merge 用法示例&#xff1a; 1. 合并当前分支与另一个分支的更改 git merge <branch-name&…

Fireworks AI和MongoDB:依托您的数据,借助优质模型,助力您开发高速AI应用

我们欣然宣布 MongoDB与 Fireworks AI 正携手合作 让客户能够利用生成式人工智能 (AI) 更快速、更高效、更安全地开展创新活动 Fireworks AI由 Meta旗下 PyTorch团队的行业资深人士于 2022 年底创立&#xff0c;他们在团队中主要负责优化性能、提升开发者体验以及大规模运…

Ubuntu22.04有线网络连接但是没网,网络图标显示问号

Ubuntu22.04有线网络连接但是没网&#xff0c;网络图标显示问号 问题描述解决方案 问题描述 有线网络连接 但是没网 且网络图标显示问号 解决方案 进入设置->隐私->在 连接情况 中关闭连接检查 关闭后 网络正常

Typescript语法三

枚举 枚举&#xff08;Enumeration&#xff09;是编程语⾔中常⻅的⼀种数据类型&#xff0c;其主要功能是定义⼀组有限的选项&#xff0c;例 如&#xff0c;⽅向&#xff08;上、下、左、右&#xff09;或季节&#xff08;春、夏、秋、冬&#xff09;等概念都可以使⽤枚举类型…

vue 时间轴页面 自己的写法 欢迎交流指正

<div class"first-box"><!--贯穿线--><div class"vertical-line-wrap"><div class"vertical-line"></div><div class"vertical-line-arrow"></div></div><!--开始--><div c…

理解 C++ 中的 “placement new“ 和 `reinterpret_cast`

概述 在 C 编程中&#xff0c;我们经常会遇到需要进行低级内存操作的情况。在这种情况下&#xff0c;了解和正确使用工具变得至关重要&#xff0c;以确保我们的代码既高效又安全。本文将深入探讨两个在 C 中经常用于低级内存操作的工具&#xff1a;“placement new” 和 reint…

用于图生成的自回归扩散模型 笔记

1 Title Autoregressive Diffusion Model for Graph Generation&#xff08;Lingkai Kong、Jiaming Cui、Haotian Sun、Yuchen Zhuang、B. Aditya Prakash、Chao Zhang&#xff09;【PMLR 2022】 2 Conclusion This study propose an autoregressive diffusion model …

iOS ------ JSONModel源码

一&#xff0c;JSONModel的基本使用 1&#xff0c;基本使用方法 - (instancetype)initWithDictionary:(NSDictionary *)dict error:(NSError **)err; - (instancetype)initWithData:(NSData *)data error:(NSError **)error; - (instancetype)initWithString:(NSString *)str…

Python深度学习基于Tensorflow(3)Tensorflow 构建模型

文章目录 数据导入和数据可视化数据集制作以及预处理模型结构低阶 API 构建模型中阶 API 构建模型高阶 API 构建模型保存和导入模型 这里以实际项目CIFAR-10为例&#xff0c;分别使用低阶&#xff0c;中阶&#xff0c;高阶 API 搭建模型。 这里以CIFAR-10为数据集&#xff0c;C…

9.4.k8s的控制器资源(job控制器,cronjob控制器)

目录 一、job控制器 二、cronjob控制器 一、job控制器 job控制器就是一次性任务的pod控制器&#xff0c;pod完成作业后不会重启&#xff0c;其重启策略是&#xff1a;Never&#xff1b; 简单案例 启动一个pod&#xff0c;执行完成一个事件&#xff0c;然后pod关闭&#xff1b;…