iconfont图标的使用

进入https://www.iconfont.cn

添加完成icon font图标之后点击添加至项目，在项目中就可以看到添加的图标

常用的有三种方法，第一种下载至本地第二种生成在线代码复制到相应的文件内第三种使用为元素添加

使用时要用标签包裹，且有两个类名第一个为iconfont 第二个为需要引用的字体图标

下载至本地需要引入两个字体图标到根目录的fonts文件夹内分别为下图四个文件且引入iconfont的css文件

本地下载如果需要添加新的图标，则需要重新替换iconfont.css文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ljaz33uq-1653304327257)(C:\Users\Admin\AppData\Local\Temp\1653004980696.png)]

<link rel="stylesheet" href="../fonts/iconfont.css">
<style>.icon-location {font-size: 20px;color: pink;}</style>
</head><body><span class="iconfont icon-location"></span>
</body>
生成在线代码直接复制到代码中，引入css路径填写复制的路径并在前缀添加https: 或者http:
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3401741_m3gtoblu85.css"><style>.icon-location {font-size: 20px;color: pink;}</style>
</head><body><span class="iconfont icon-location"></span>
</body>
使用伪元素添加同样引用在线代码引入步骤同上一步一样在iconfont网站点击一下在现代码即可进入css源码文件并找到相关类名中的代码写到content中
<link rel="stylesheet" href="https://at.alicdn.com/t/font_3401741_8cdevwobz7.css"><style>.box {width: 100px;height: 40px;border: 1px solid pink;}.box::after {content: '\e6b7';line-height: 40px;float: right;}</style>
</head><body><div class="box iconfont"></div>
</body>

位移

  <style>.box {height: 100px;width: 100px;background-color: pink;transition: .5s;}.box:hover {transform: translateY(-10px);}</style>
</head><body><div class="box"></div>
</body>

水平方向为 transform: translateX(需要位移的距离);

垂直方向为 transform: translateY(需要位移的距离);

向前或向后移动为 transform: translateZ(需要位移的距离);

连写时为 transform: translate(水平方向位移的距离（X轴）,垂直方向位移的距离（Y轴）前后方向位移的距离（Z轴）);

透视： perspective: 200px;由远到近的效果，该属性应给父元素设置(应注意如果配合3D旋转使用时子盒子要和父盒子一样大或者在父盒子中间，否则会出现偏移)

旋转

<style>.box {width: 600px;height: 500px;background-color: pink;margin: 100px auto;border-radius: 150px 150px 0px 0px;transition: all .3s;}.box:hover {transform: rotate(180deg);}</style>
</head><body><div class="box"></div>
</body>

顺时针(正值)/逆时针旋转(负值)transform: rotate(需要旋转的度数单位为deg);

沿着X轴旋转(类似于围绕单杠旋转往下为负值，往上为正值)transform: rotateX(需要旋转的度数单位为deg);

沿着Y轴旋转（类似于围绕钢管旋转往右为正值，往左为负值）transform: rotateY(需要旋转的度数单位为deg);

沿着Z轴旋转（类似于一个平躺的圆柱体将它扶起来，从左往右为正值(90度时立起来时左边在上)，从右往左为负值(90度时立起来时右边在上)）transform: rotateZ(需要旋转的度数单位为deg);

3D立体显示 transform-style: preserve-3d;需要立体显示或者围绕着XYZ轴旋转时需要给父元素设置该属性，否者它们将在同一平面

如果旋转需要和平移一同实现时应将平移写到旋转前边

旋转单位也可以为turn 1turn为一圈

转换原点

语法：transform-origin: 原点水平位置原点垂直位置

取值

方位名词（left、top、right、bottom、center）

像素单位数值

百分比（参照盒子自身尺寸计算）

缩放

  <style>* {margin: 0;padding: 0;}.box {margin: 0 auto;width: 200px;height: 200px;position: relative;}.box img:first-child {width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(5);opacity: 0;transition: .5s;}.box:hover img:first-child {transform: translate(-50%, -50%) scale(1);opacity: 1;}.box img:nth-child(2) {width: 100%;height: 100%;}</style>
<body><div class="box"><img src="../images/play.png" alt=""><img src="../images/11.jpg" alt=""></div>
</body>

缩放scale(需要缩放的大小)(不能为负值)

位移&旋转&缩放注意点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span {/* 平面转换属性 设置给行内元素没有效果 必须转换为行内块或块元素 */display: inline-block;height: 200px;width: 200px;background-color: pink;transition: all 1s;}span:hover {transform: translate(100px);}</style>
</head><body><span>我是行内标签</span>
</body></html>

**平面转换属性设置给行内元素没有效果必须转换为行内块或块元素 **

渐变色

 .three {height: 200px;width: 200px;background-image: linear-gradient(pink, hotpink);}

渐变色为 background-image: linear-gradient(第一种颜色, 第二种颜色);

如果在颜色前加上to方位（例如：to top）就是从下到上来渐变（方位为top、bottom、left、right）

动画

关键帧

 <style>.box {height: 200px;width: 200px;border-radius: 50%;text-align: center;line-height: 200px;background-color: pink;/* animation: active 1s linear forwards alternate; */animation: active 1s;}/*单帧动画*/@keyframes active {from {transform: translateX(0) rotate(0deg);}to {transform: translateX(1000px) rotate(360deg);}}.box {width: 200px;height: 200px;background-color: pink;border-radius: 50%;text-align: center;line-height: 200px;/* linear 匀速行驶infinite 无限循环alternate 左右来回执行动画forwords 动画结束 停留在最后一帧状态 需要在不循环状态使用*/animation: active 4s linear forwards alternate;}/* 多帧动画 */@keyframes active {0% {transform: translate(0, 0) rotate(0deg);}25% {transform: translate(500px, 0) rotate(90deg);}50% {transform: translate(500px, 300px) rotate(180deg);}75% {transform: translate(0, 300px) rotate(270deg);}100% {transform: translate(0, 0) rotate(360deg);}}</style>

调用动画属性 animation: active 4s linear forwards alternate;

linear 匀速行驶
infinite 无限循环
alternate 左右来回执行动画
forwords 动画结束停留在最后一帧状态需要在不循环状态使用

鼠标经过暂停

 .box:hover {animation-play-state: paused;}

逐帧动画

steps(数字)

 <style>.box {width: 140px;height: 140px;background: url(../images/bg.png) no-repeat;animation: move 3s steps(12) infinite;}@keyframes move {to {background-position: -1680px 0;}}</style>
</head><body><div class="box"></div>
</body>

作用：使某些动画变得清晰可见的动画(例如一个小人奔跑)

多组动画

  /* 多组动画 中间应用,逗号隔开 */animation: move 3s steps(12) infinite, run 5s forwards linear;

ion: move 3s steps(12) infinite;
}

@keyframes move {to {background-position: -1680px 0;}
}

~~~

作用：使某些动画变得清晰可见的动画(例如一个小人奔跑)

多组动画

  /* 多组动画 中间应用,逗号隔开 */animation: move 3s steps(12) infinite, run 5s forwards linear;

【CSS】CSS之旋转动画相关推荐

纯css 图片自动旋转动画
css能否实现图片自动旋转动画呢?答案当然是肯定的, 首先看下效果: HTML代码 <img src="https://gimg2.baidu.com/image_search/src ...
html5中怎么让文字旋转动画效果图,HTML5中实现的CSS 3D文字旋转动画
一个基于HTML5的网页文字3D旋转动画效果,支持中文和英文字符,浏览请注意要使用支持CSS3技术的浏览器,比如Opera.Chrome等,主要结合transition 和 animation来实现, ...
纯css摩天轮旋转动画
布局(html代码块) <body><div class="box"><div class="pic1"><img s ...
css 文字 3d旋转动画,CSS3 简单的三维文字旋转动画
CSS 语言: CSSSCSS 确定 *, *:after, *:before { box-sizing: border-box; } html { height: 100vh; background ...
CSS——正方体360°旋转动画效果
先看效果: 代码如下: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果
解惑:如何使用html+css+js实现旋转相册,立方体相册等动画效果一.前言最初还是在抖音上看到可以使用简单地代码实现炫酷的网页效果的,但是想要找到可以运行的代码还是比较困难的,最近突然想起就在 ...
CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
CSS 实现加载动画之一-菊花旋转
CSS 实现加载动画之一-菊花旋转原文:CSS 实现加载动画之一-菊花旋转最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...
css光盘转动,CSS 实现加载动画之五-光盘旋转
CSS 实现加载动画之五-光盘旋转今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分 ...
利用css实现太极图的制作（带旋转动画）（课程实践教学项目）
利用css实现太极图的制作(带旋转动画) (课程实践教学项目) 简要说明第一步:太极图的绘制(1) 相关知识: 实现步骤: 代码: 效果: 第二步:太极图的绘制(2) 相关知识: 实现步骤: 代码: ...

【CSS】CSS之旋转动画

目录

iconfont图标的使用

进入https://www.iconfont.cn

位移

旋转

转换原点

缩放

位移&旋转&缩放注意点

渐变色

动画

关键帧

鼠标经过暂停

逐帧动画

多组动画

多组动画

【CSS】CSS之旋转动画相关推荐

最新文章

热门文章