3-css高级特效-2

这篇具有很好参考价值的文章主要介绍了3-css高级特效-2。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

01-空间转换

空间转换简介

  • 空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。
  • 空间转换也叫 3D转换
  • 属性:transform

3-css高级特效-2

平移

transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值与平面转换相同

默认情况下,Z 轴平移没有效果,原因:电脑屏幕默认是平面,无法显示 Z 轴平移效果

视距

作用:指定了观察者与 Z=0 平面的距离,为元素添加透视效果

透视效果:近大远小、近实远虚

属性:(添加给父级,取值范围 800-1200)

perspective: 视距;

3-css高级特效-2

旋转

  • Z 轴:rotateZ()

3-css高级特效-2

  • X 轴:rotateX()

3-css高级特效-2

  • Y 轴:rotateY()

3-css高级特效-2

左手法则

作用:根据旋转方向确定取值正负

使用:左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

3-css高级特效-2

rotate3d-了解

  • rotate3d(x, y, z, 角度度数) :用来设置自定义旋转轴的位置及旋转的角度
  • x,y,z 取值为0-1之间的数字

立体呈现

作用:设置元素的子元素是位于 3D 空间中还是平面中

属性名:transform-style

属性值:

  • flat:子级处于平面中
  • preserve-3d:子级处于 3D 空间

案例-3d导航

3-css高级特效-2

案例步骤:

  1. 搭建立方体
    1. 绿色是立方体的前面
    2. 橙色是立方体的上面
  2. 鼠标悬停,立方体旋转

3-css高级特效-2

3-css高级特效-2

.nav li {
  position: relative;
  width: 100px;
  height: 40px;
  line-height: 40px;
  transition: all 0.5s;

  transform-style: preserve-3d;

  /* 为了看到橙色和绿色的移动过程,给立方体添加旋转 */
  /* transform: rotateX(-20deg) rotateY(30deg); */
}

.nav li a {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
  color: #fff;
}

/* 立方体每个面都有独立的坐标轴,互不影响 */
.nav li a:first-child {
  background-color: green;
  transform: translateZ(20px);
}

.nav li a:last-child {
  background-color: orange;
  transform: rotateX(90deg) translateZ(20px);
}

.nav li:hover {
  transform: rotateX(-90deg);
}

缩放

transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

02-动画

  • 过渡:实现两个状态间的变化过程
  • 动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

动画实现步骤

  1. 定义动画
/* 方式一 */
@keyframes 动画名称 {
  from {}
  to {}
}

/* 方式二 */
@keyframes 动画名称 {
  0% {}
  10% {}
  ......
  100% {}
}
  1. 使用动画
animation: 动画名称 动画花费时长;

animation复合属性

3-css高级特效-2

提示:

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

animation拆分写法

3-css高级特效-2

案例-走马灯

3-css高级特效-2

  • HTML 结构
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
<li><img src="./images/4.jpg" alt="" /></li>
<li><img src="./images/5.jpg" alt="" /></li>
<li><img src="./images/6.jpg" alt="" /></li>
<li><img src="./images/7.jpg" alt="" /></li>
<!-- 替身:填补显示区域的露白 -->
<li><img src="./images/1.jpg" alt="" /></li>
<li><img src="./images/2.jpg" alt="" /></li>
<li><img src="./images/3.jpg" alt="" /></li>
  • CSS 样式
.box {
  width: 600px;
  height: 112px;
  border: 5px solid #000;
  margin: 100px auto;
  overflow: hidden;
}

.box ul {
  display: flex;
  animation: move 6s infinite linear;
}

/* 定义位移动画;ul使用动画;鼠标悬停暂停动画 */
@keyframes move {
  0% {
    transform: translate(0);
  }
  100% {
    transform: translate(-1400px);
  }
}

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

无缝动画原理:复制开头图片到结尾位置(图片累加宽度 = 区域宽度)

精灵动画

  • 核心

3-css高级特效-2

  • 制作步骤

    1.准备显示区域

    盒子尺寸与一张精灵小图尺寸相同

    2.定义动画

    移动背景图(移动距离 = 精灵图宽度)

    3.使用动画

    steps(N),N 与精灵小图个数相同

div {
  width: 140px;
  height: 140px;
  border: 1px solid #000;
  background-image: url(./images/bg.png);
  animation: run 1s steps(12) infinite;
}

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

多组动画

animation: 
  动画一,
  动画二,
  ... ...
;

03-综合案例-全名出游

3-css高级特效-2文章来源地址https://www.toymoban.com/news/detail-503864.html

背景

/* 大背景 */
/* 默认状态HTML和body的高度是0,所以导致cover缩放背景图不成功 */
html {
  height: 100%;
}
body {
  height: 100%;
  background: url(../images/f1_1.jpg) no-repeat center 0 / cover;
  /* background-size: cover; */
}

云彩位置和动画

  • HTML 结构
<!-- 云 -->
<div class="cloud">
  <img src="./images/yun1.png" alt="">
  <img src="./images/yun2.png" alt="">
  <img src="./images/yun3.png" alt="">
</div>
  • CSS 样式
/* 云 */
.cloud img {
  position: absolute;
  left: 50%;
}

.cloud img:nth-child(1) {
  margin-left: -250px;
  top: 20px;
  animation: cloud 1s infinite alternate linear;
}
.cloud img:nth-child(2) {
  margin-left: 400px;
  top: 100px;
  animation: cloud 1s infinite alternate linear 0.4s;
}
.cloud img:nth-child(3) {
  margin-left: -550px;
  top: 200px;
  animation: cloud 1s infinite alternate linear 0.6s;
}

@keyframes cloud {
  100% {
    transform: translate(20px);
  }
}

文字动画

  • HTML 结构
<!-- 文字 -->
<div class="text">
  <img src="./images/font1.png" alt="">
</div>
  • CSS 样式
/* 文字 */
.text img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: text 1s;
}

/* 默认 → 小 → 大 → 小 → 默认 */
@keyframes text {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  20% {
    transform: translate(-50%, -50%) scale(0.1);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.4);
  }
  70% {
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

到了这里,关于3-css高级特效-2的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS3】CSS3 3D 转换 ② ( 3D 透视视图 | “ 透视 “ 概念简介 | 视距与成像关系 | CSS3 中 “ 透视 “ 属性设置 | “ 透视 “ 语法设置 | 代码示例 )

    在本博客中引入 3D 效果 透视视图 Perspective 概念 ; 3D 视图中 产生 3D 效果 , 最终要的是有透视效果 , 通俗的讲 \\\" 透视 \\\" 就是实现 \\\" 近大远小 \\\" 的效果 ; 透视 就是 将 3D 空间中的物体 投影显示到 2D 平面中 ; 透视视图 ( Perspective View ) : 近大远小 , 符合正常人眼观察 3D 世界的规律

    2024年02月13日
    浏览(44)
  • 超好看的前端特效HTML特效、CSS特效、JS特效(第一期)

    1. 粒子组成文字动画特效 文件组成: base.css demo.css bcg.jpg demo.js demo.scss index.html 2. 爱心表白特效 文件组成: heart.svg index.html 3. 爱心跟随鼠标 index.html 4. 满屏漂浮爱心 index.html 5. 黑客帝国矩阵雨 index.html 6. 2024新年快乐动画特效 文件目录: style.css script.js index.html 7. 表白特效

    2024年02月19日
    浏览(51)
  • 【CSS加载动画特效】28种纯CSS实现的加载loading动态特效(附源码)

    今天其实还是有点期待6月份城市赛道的成绩公布,但是可能因为出现城市太多等问题,官方也还在快马加鞭的统计中,我也趁机再发一篇前端的文章了,其实在很多系统里面我们都看到过各种各样的加载中样式,但是总有些显得平平无奇,今天我就统计了28种load加载动画特效

    2024年02月15日
    浏览(62)
  • 19.CSS雨云动画特效

    2024年02月10日
    浏览(39)
  • css中文本阴影特效

    文字颜色渐变 文字模糊 空心文字 文字外发光 文字阴影 纯CSS3实现悬停时出现对角线耀光效果的按钮 2023-08-09 谈谈怎么持续努力 2023-08-08 纯CSS实现的一个对角线填充颜色的按钮悬停动效 2023-08-07 使用CSS3 box-shadow实现的7个按钮悬停动画特效 2023-08-06 CSS3标题文本后的横线 2023-0

    2024年02月10日
    浏览(39)
  • 16.CSS菜单悬停特效

    2024年02月10日
    浏览(39)
  • 53 个 CSS 特效 1

    预计是会跟着教程做完 53 个小项目+10 个大型的 Responsive 项目,预览地址在http://www.goldenaarcher.com/html-css-js-proj/,git 地址:https://github.com/GoldenaArcher/html-css-js-proj 实用性有加备注,可以按需索取,如果有些效果不一样……十有八九可能是因为 google font 的问题。主要是以CSS实现为

    2024年02月12日
    浏览(29)
  • 53 个 CSS 特效 2

    这里是第 17 到 32 个,跟上一部分比起来多了两个稍微大一点的首页布局,上篇:53 个 CSS 特效 1,依旧,预览地址在 http://www.goldenaarcher.com/html-css-js-proj/,git 地址: https://github.com/GoldenaArcher/html-css-js-proj 3D Card 日常用得到,基本逻辑其实上面都实现过挺多次了 Helicopter 和自行

    2024年02月11日
    浏览(22)
  • 27.CSS粒子特效

    2024年02月10日
    浏览(39)
  • HTML CSS 发光字头特效

    2024年01月22日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包