CSS3高级

最新推荐文章于 2024-10-07 20:56:37 发布
最新推荐文章于 2024-10-07 20:56:37 发布
阅读量606 收藏 22
点赞数 22
文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaosweet/article/details/140635754
版权

人生有如一股奔流，没有暗礁，激不起美丽的浪花。

2D转化 (平面效果)

rotate：旋转

  • transform：rotate(30deg) 绕着中心点旋转30度 正数代表顺时针旋转 负数代表逆时针旋转

scale：缩放

  • transform：scale(x, y) x代表width的倍数 y代表height的倍数
<div class="box"></div>

<style>
	.box {
  		width: 100px;
    	height: 100px;
        margin: 50px auto;
        border: 1px solid #ff3040;
    	/* 2代表width的倍数 此时width变成了200px  1代表height的倍数 此时height变成了400px */
        transform: scale(2, 4);
        box-sizing: border-box;
   }
</style>

translate：位移

  • transform：translate(x, y) x代表水平方向的值 y代表垂直方向的值
    • 如果只设置一个值 代表水平方向的值
    • 可以设置负数 代表的是相反方向的值
    • 可以设置百分比、百分比相对于当前元素自己的高度和宽度
位移与定位的区别
  • 定位：
    • 会影响其它元素位置 (脱离标准流)
    • 行内元素定位会直接变成块级元素
  • 位移：
    • 不影响其它元素位置 (不脱离标准流、占原来位置)
    • 在行内元素无效；对块级元素生效

复合写法：transform：rotate(30deg) translate(x,y) scale(x,y)

3D转化 (立体效果)

rotate：旋转

  • transform：rotateX(30deg)` 单杠效果
  • transform：rotateY(30deg) 开门效果
  • transform：rotateZ(30deg) 与2D转化中的旋转效果一样

scale：缩放

  • transform：scaleX(值)
  • transform：scaleY(值)

translate：位移

  • transform：translateX(值)
  • transform：translateY(值)
  • transform：translateZ(值)

将平面图行转化为立体图形属性：transform-style: preserve-3d

动画 (animation)

animation：定义的动画名  动画执行时间

@keyframes 定义的动画名 { 
	/* 设置动画开始时候的样式 */
	from {}
	/* 设置动画结束时候的样式 */
	to{}
}

/* 动画百分比方式 */
@keyframes 定义的动画名 {
  /* 百分比表示的是相对当前动画整个执行时间的 */
  0% {
    transform：rotate(0deg)
  }
}

animation-name：动画名称

animation-duration：动画执行时间

animation-iteration-count：动画执行次数 (默认是1次、无限次执行：infinite)

animation-direction：动画逆播 (alternate)

animation-timing-function：动画速度 (默认值：ease 【ease-in：加速效果 ease-out：减速效果 ease-in-out：先加速再减速】 linear：匀速)

animation-fill-mode：让动画在结束位置停下 (forwards 【动画执行的次数不能是无限次执行】)

animation-play-state：动画是否暂停 (默认值：running paused：暂停)

animation与transition的区别
  • animation：
    • 动画实现自动播放、动画次数可以是无限次执行
  • transition
    • 动画需要用户动作、动画随着用户动作的取消而停止执行
<!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>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #000;
    }

    .box1 {
      position: relative;
      width: 100%;
      margin: 0 auto;
    }

    .box2 {
      position: relative;
      width: 200px;
      height: 300px;
      margin: 200px auto;
      transform-style: preserve-3d;
      animation: move 10s linear infinite;
    }

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

    .box2 div {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 300px;
    }

    img {
      width: 300px;
      height: 400px;
    }

    .img1 {
      transform: rotateY(0deg) translateZ(485px);
    }

    .img2 {
      transform: rotateY(40deg) translateZ(485px);
    }

    .img3 {
      transform: rotateY(80deg) translateZ(485px);
    }

    .img4 {
      transform: rotateY(120deg) translateZ(485px);
    }

    .img5 {
      transform: rotateY(160deg) translateZ(485px);
    }

    .img6 {
      transform: rotateY(200deg) translateZ(485px);
    }

    .img7 {
      transform: rotateY(240deg) translateZ(485px);
    }

    .img8 {
      transform: rotateY(280deg) translateZ(485px);
    }

    .img9 {
      transform: rotateY(320deg) translateZ(485px);
    }

    @keyframes move {
      0% {
        transform: rotateX(-15deg) rotateY(0deg);
      }

      100% {
        transform: rotateX(-15deg) rotateY(360deg);
      }
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="box2">
      <div class="img1">
        <img src="img/1.jpg" alt="">
      </div>
      <div class="img2">
        <img src="img/2.jpg" alt="">
      </div>
      <div class="img3">
        <img src="img/3.jpg" alt="">
      </div>
      <div class="img4">
        <img src="img/4.jpg" alt="">
      </div>
      <div class="img5">
        <img src="img/5.jpg" alt="">
      </div>
      <div class="img6">
        <img src="img/1.jpg" alt="">
      </div>
      <div class="img7">
        <img src="img/2.jpg" alt="">
      </div>
      <div class="img8">
        <img src="img/3.jpg" alt="">
      </div>
      <div class="img9">
        <img src="img/4.jpg" alt="">
      </div>
    </div>
  </div>
</body>

</html>
布兰妮甜
关注
CSS3高级特效
weixin_68485297的博客
04-07 1839
一、变形 transform CSS3变形是一些效果的集合，如：平移、旋转、缩放、倾斜效果。 每个效果都可以称为变形（transform），它可以分别操控元素发生平移、旋转、缩放、倾斜等变化。 1、translate(tx,ty)：平移函数，基于X、Y坐标重新定位元素的位置 tx x轴（横坐标）移动方向长度 ty y轴 （纵坐标）移动方向长度 ① 设置两个值，x轴向右移动200px，y轴向下移动50px ②x轴不移动，y轴向下移动100px ③y轴不移动，x轴向右移动10...
CSS3 高级教程之动画定义和使用
weixin_42442856的博客
10-28 4084
文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 CSS3可以实现HTML元素的动画效果，不使用JavaScript或者是Flash也能实现动画效果，在CSS3中新增了一个transition模块，通过一些简单的CSS 事件来触发元素的外观变化，使得显示的效果更加细腻。 一、keyframes定义动画 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码...
css3高级选择器
qi341500的博客
07-02 1205
一、层次选择器 1、后代选择器 2、子选择器 3、相邻兄弟选择器 4、通用兄弟选择器 5、并集选择器 二、结构伪类选择器 三、属性选择器 四、链接伪类选择器
【CSS3高级应用】
橙子的博客
04-30 901
CSS3高级应用一、页面中的多媒体嵌入二、CSS3中过渡效果一级目录 一、页面中的多媒体嵌入 网页除了可以放置图片和文字，还可以放置音频和视频。 1、视频： 标签是一个块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示内部的子元素。 (1)视频格式 <video src=“视频文件名” controls muted autoplay loop><p>你的浏览器不支持此视频格式<p></video> .mp4：mpe
CSS3 高级应用（过渡、变形、动画）、滤镜、精灵图、字体图标、CSS初始化、及相关技巧等
YuLong的博客
04-29 1909
文章目录CSS3高级应用过渡变形动画多媒体嵌入图像视频音频 CSS3高级应用 在传统的Web设计中，当网页中需要显示动画或特效时，需要使用JavaScript脚本或者Flash来实现。在CSS3中，提供了对动画的强大支持，可以实现旋转、缩放、移动和过渡等效果。 过渡 属性 描述 属性值 transition-property 用于指定过渡效果 ①none ②all ③prpperty（定义多个名称用逗号分隔） transition-duration 用于指定过渡的持续时间 s/ms
css3 高级特效 图片实现3D视觉效果 图片3D旋转 移动 倾斜 缩放
满怀热情
07-12 2104
利用属性 transform 浏览器支持： 在IE10，火狐浏览器和欧朋浏览器中支持transform属性 但在Chrome和苹果Safari中要求前缀内核-webkit-版本 推荐使用最新版本谷歌浏览器打开，注释内容解除注释即可看到效果 图片效果更为直观代码实现： 倾斜 skew() 包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 skewX();表示只在X轴(水平方向)倾斜。 skewY();表示只在Y轴(垂直方向)倾斜。 代码实例：..
css3渐变色
热门推荐
fine1998_的博客
05-09 3万+
作用：让元素在两个或多个指定的颜色之间显示平稳的过渡。 种类：分为线性渐变与径向渐变 一、线性渐变 1、向下/向上/向左/向右/对角方向 语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...); direction属性值： to bottom 默认值，从上到下 to top 从左到右 to left
CSS3高级选择器用法
Pan Fengshan的博客
08-24 1万+
CSS3高级选择器用法介绍
HTML5+CSS3高级动画的应用实践
flying meng的菜鸟居
09-14 8406
我们大概都知道css可以用来作平面旋转、扭曲、放大缩小、平移。。。并且用起来几乎都得心应手。 但目前来说，3D效果的“高级”动画似乎更受欢迎一些，而且我们也确实需要。 这不，前两天笔者就在项目中给“翻转动画”增加了一个3D效果，看起来贼爽： 这个动画实现所用到的3D盒子模型是现在3D模型中最常用的一个 —— 不过我们先拿其中两个面分析： 首先，要实现这个功能，我们从外往里看：把文字所在部分看作一个盒子的话，前后两个横线并不属于这个盒子才对，那么，很自然就想到了—— ::after 和 ::before
CSS3实现彩色变形爱心动画【附源码】
m0_73367097的博客
07-11 2402
CSS3实现彩色变形爱心动画
3d旋转相册—css3高级进阶
04-13
在本课程"3d旋转相册—css3高级进阶"中，我们将深入探讨如何利用CSS3的强大功能创建一个令人印象深刻的3D旋转相册。这个项目非常适合那些已经具备一定编程经验，特别是对HTML和CSS有基本理解的开发者。通过学习这个...
css3高级选择器使用方法
09-25
CSS3高级选择器是CSS3新增的一系列功能强大的选择器，极大地增强了CSS的样式匹配能力，使得开发者能够更精准地定位和控制网页元素的样式。本文将深入探讨CSS3的属性选择器、结构性伪类选择器以及伪元素选择器。 ...
CSS3高级应用
04-09
CSS3高级应用
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1152
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
CSS3--美若天仙！？
金灰的博客
10-03 1454
浮动属性 float，left 表示左浮动，right 表示右浮动l特点1.浮动后的盒子顶对齐2.浮动后的盒子具备行内块特点3.父级宽度不够，浮动的子级会换行4.浮动后的盒子脱标l清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果推荐双伪元素法清除浮动。l拓展：浮动本质作用是实现图文混排效果。
好玩的水表电表
lulei5153的博客
10-01 2252
【代码】好玩的水表电表。
Javascript数组研究03_手写实现_fill_filter_find_findIndex_findLast_findLastIndex
qq_33546823的博客
10-03 1332
fill()方法用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为）内的全部元素。它返回修改后的数组。输入参数value：用来填充数组元素的值。start（可选）：开始填充的位置，默认值为 0，索引处理方法和copyWithin一致。end（可选）：停止填充的位置（不包含该位置），默认值为，索引处理方法和copyWithin方法一致。输出：修改后的原数组。注意事项该方法会改变原数组，是修改方法。对于稀疏数组，空槽也会被value填充。是通用的方法在空数组上不会有任何处理。
Vue--Table的Column格式化方案
m0_69435612的博客
10-04 306
原日期格式：2024-09-07T08:32:41.000+00:00。格式化成YYYY-MM-DD。让数字显示小数点后几位。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
最新发布
分享有趣的、贴近生活的CS知识
10-07 828
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值