前端学习之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

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》:本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

SQL表间关联查询实例详解

《SQL表间关联查询实例详解》本文主要讲解SQL语句中常用的表间关联查询方式,包括:左连接(leftjoin)、右连接(rightjoin)、全连接(fulljoin)、内连接(innerjoin)、... 目录简介样例准备左外连接右外连接全外连接内连接交叉连接自然连接简介本文主要讲解SQL语句中常用的表

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript