CSS新特性2

转换

转换的效果是让某个元素改变形状,大小和位置

transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

html 复制代码
<div class="box"></div>
.box {
  width: 100px;
  height: 80px;
  background-color: rgba(255, 0, 0, .8);
  transform: translate(50px, 100px);
}
html 复制代码
<div class="box"></div>
.box {
  width: 100px;
  height: 80px;
  background-color: rgba(255, 0, 0, .8);
  transform: rotate(30deg);
}
html 复制代码
<div class="box"></div>
.box {
  width: 100px;
  height: 80px;
  background-color: rgba(255, 0, 0, .8);
  transform: scale(2,3); 
}

3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化

  1. rotateX()
  2. rotateY()
html 复制代码
<div class="box"></div>
.box {
  width: 200px;
  height: 250px;
  background-color: #8ac007;
  margin: 50px;
}
.box:hover{
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
  transform: translate3d(0,-2px,0);
}

过渡

html 复制代码
<div class="box"></div>
.box {
  width: 100px;
  height: 80px;
  background-color: rgba(255, 0, 0, .8);
  transition: width 2s ease 1s;
}
.box:hover{
  width: 500px;
}

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%

0% 是动画的开始,100% 是动画的完成。

@keyframes创建动画

使用@keyframes规则,你可以创建动画

html 复制代码
@keyframes name {
  from|0%{
       css样式
   }
  percent{
       css样式
   }
  to|100%{
       css样式
   }
}

切换背景颜色

html 复制代码
<div class="animation"></div>
.animation {
  width: 300px;
  height: 300px;
  background-color: red;
  animation: anima 5s linear 5s infinite;
}
.animation:hover {
  animation-play-state: paused;
}
@keyframes anima {
  0% {
    background-color: red;
   }
  50% {
    background-color: green;
   }
  100% {
    background-color: blueviolet;
   }
}

呼吸效果

html 复制代码
<div class="box"></div>
.box {
  width: 500px;
  height: 400px;
  margin: 40px auto;
  background-color: #2b92d4;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  /* animation-timing-function: ease-in-out;
   animation-name: breathe;
   animation-duration: 2700ms;
   animation-iteration-count: infinite;
   animation-direction: alternate; */
  animation: breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe {
  0% {
    opacity: .2;
    box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1)
   }
  50% {
    opacity: .5;
    box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76)
   }
  100% {
    opacity: 1;
    box-shadow: 0 1px 30px rgba(59, 255, 255, 1)
   }
}
相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
rannn_1117 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5