前端学习之css media查询、自定义字体、过度动画、css变换、动画、渐变、多列、字体图标

本文主要是介绍前端学习之css media查询、自定义字体、过度动画、css变换、动画、渐变、多列、字体图标,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 media查询

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>media查询</title><!-- media查询:根据设备类型不同:比如说打印机、屏幕不同而产生不一样效果格式:@media--><style>/* 屏幕显示的内容 */@media screen {.font-tye{font-size: 200px;}}/* 打印机显示的内容 */@media print{.font-tye{font-size: 300px;}}/* 不同设备显示相同样式,下列代码是屏幕和打印机显示相同样式 *//* @media print{.font-tye{font-size: 300px;}} *//* 所有设备显示的背景颜色 *//* @media all{.font-tye{background-color: aqua;}} *//* >900显示蓝色>600 <900红色<600黄色*/@media only screen and (min-width:900px){body{background-color: blue;}}@media only screen and (min-width:600px)and (max-width:900px){body{background-color: red;}} @media only screen and (max-width:600px){body{background-color: rgb(206, 239, 22);}}</style>
</head>
<body><p class="font-tye">测试文字</p>
</body>
</html>

结果

屏幕

打印机

 自定义字体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义字体</title><style>/* 自定义字体 */@font-face {/* 自定义字体名字 */font-family:myFontStyle ;/* 字体路径 */src: url(./汉仪霹雳体简.ttf);}.font-style-my{font-size: 120px;font-family: myFontStyle;}</style>
</head>
<body><div><p class="font-style-my">测试文字</p></div>
</body>
</html>

 结果

过度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过渡</title><!-- 过度提供样式变换的过程1、时间--><style>.box{width: 100px;height: 100px;background-color: aqua;/* 变换时间1s */transition: 1s;/* 操作属性,这个是宽变化1秒完成,高的变化还是瞬间 */transition-property: width;/* 时间曲线,变化时间的快慢ease-in变得慢ease变得快 */transition-timing-function: ease-in;/* 延时演示一秒后变化 */transition-delay: 1s;}div:hover{width: 200px;height: 200px;background-color: brown;}</style>
</head><body><div class="box"></div>
</body> 
</html>

结果

变换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css变换</title><!-- css变换前提1.加过度2.触发变换效果平移旋转缩放倾斜--><style>div{width: 100px;height: 100px;background-color: aqua;border: 1px chartreuse solid;text-align: center;transition: 1s;}.b:hover{/* 平移,横向平移100px,竖向平移200px */transform: translate(100px,200px);}.c:hover{/* 旋转 */transform: rotate(360deg)}.d:hover{/* 平移,旋转 */transform: translate(500px,0px) rotate(360deg)}.e:hover{/* 缩放 */transform: scale(0.5)}.f:hover{/* 倾斜 */transform: skew(30deg,40deg);}</style>
</head>
<body><div class="a">a</div><div class="b">b</div><div class="c">c</div><div class="d">d</div><div class="e">e</div><div class="f">f</div>
</body>
</html>

结果

 

 动画

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>动画</title><!-- 一个样式到另外一个样式的过程--><style>div{width: 200px;height: 200px;border: 1px solid red;/* infinite 一直变且不用触发,可以加数字限定播放次数,下面例子就是播放三次 *//* alternate 播放的下一周期是逆周期还是正常周期*/animation: myFrame 2s infinite alternate;}/* 创建动画将背景颜色由蓝变紫色 *//* @keyframes myFrame{from{background-color: aqua;transform: translate(200px,200px) rotate(360deg);}to{background-color: blueviolet;}} *//* 通过%的动画变换 */@keyframes myFrame{0%{background-color: aqua;}25%{background-color: black;}50%{background-color: blue;}100%{background-color: brown;}}</style>
</head>
<body><div></div>
</body>
</html>

 结果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>渐变</title><style>.a{height: 100px;background-color: brown;/* 后一个会覆盖前一个 *//* 线性渐变,从上到下 *//* background-image: linear-gradient(red,yellow,blue); *//* 从左到右, */background-image: linear-gradient( to right,red,yellow,blue);/* 从右到左 */background-image: linear-gradient( to left,red,yellow,blue);/* 从上到下 */background-image: linear-gradient( to top,red,yellow,blue);/* 对角 */background-image: linear-gradient( to right bottom,red,yellow,blue);/* 带角度 */background-image: linear-gradient( 176deg,red,yellow,blue);}.b{/* 径向渐变 */height: 200px;background-image: radial-gradient(red,yellow,blue);}</style>
</head>
<body><div class="a">a</div><div class="b">b</div></body>
</html>

结果

(只呈现带角度和径向渐变结果) 

 多列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多列</title><style>div{column-count: 10;/* 间隔的宽度 */column-gap: 500px;/* 间隔的样式 */column-rule-style: dotted;}</style>
</head>
<body><!-- 将文本按列拍好 --><div>超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用 HTML 来创建站点。HTML 很容易学习!相信您能很快学会它!超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用 HTML 来创建站点。HTML 很容易学习!相信您能很快学会它!超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用 HTML 来创建站点。HTML 很容易学习!相信您能很快学会它!超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。在本教程中,您将学习如何使用 HTML 来创建站点。HTML 很容易学习!相信您能很快学会它!</div>
</body>
</html>

结果

 字体图标

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体图标</title>
</head>
<body><a href="http://www.baidu.com"><img src="./滑冰.svg" alt="" width="20px" height="20px">百度一下你就知道</a></body>
</html>

结果

(图标的源文件需要下载)


不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

这篇关于前端学习之css media查询、自定义字体、过度动画、css变换、动画、渐变、多列、字体图标的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/841861

相关文章

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

浅谈mysql的sql_mode可能会限制你的查询

《浅谈mysql的sql_mode可能会限制你的查询》本文主要介绍了浅谈mysql的sql_mode可能会限制你的查询,这个问题主要说明的是,我们写的sql查询语句违背了聚合函数groupby的规则... 目录场景:问题描述原因分析:解决方案:第一种:修改后,只有当前生效,若是mysql服务重启,就会失效;

MySQL多列IN查询的实现

《MySQL多列IN查询的实现》多列IN查询是一种强大的筛选工具,它允许通过多字段组合快速过滤数据,本文主要介绍了MySQL多列IN查询的实现,具有一定的参考价值,感兴趣的可以了解一下... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析与优化1.

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT