CSS + CSS3_html5 0% { transform: translatex(0); } 25-CSDN博客

本文链接：https://blog.csdn.net/shentibeitaokong/article/details/80010776

工作一段时间了，之前不是做前端的，也是从事了一会儿，发现确实有好多很有趣的东西哟~，记录一下。

px,em,rem 的区别

px像素，em是根据你定义的字体的font-size而改变，当然rem，也就是根据根节点的font-size而改变

选择器

> 子选择器第一代子元素 div > span
+ 相邻元素 span1 + span2
包含（后代）选择器 span .first 注意空格
伪类 a:hover{color:red;}
分组选择符 h1,span{color:red;} 两个元素一起拥有这个css

flex布局

推荐看一下阮一峰大神的，链接：点击打开链接

主要记一下三种姑且称之为动态的元素的方法，

transiton

transition-property ：过度的属性值

transition-duration：过度的持续时间

transition-delay：延迟过度时间

transition-timing-function ：过渡动画缓动类型 ---linear线性过度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。

当然我们喜欢这样写： transition: property duration timing-function delay; 例子：transition: height 2s ease-out 0.2s;

transform

skew 拉伸
scale 压缩
rotate 旋转
translate 偏移

animation

配合 @keyframes 使用
animation-name指定@keyframes的名字
animation-duration动画持续时间
animation-timing-function动画播放方式，默认值ease
animation-delay延迟开始动画的时间，默认值是0
animation-iteration-count动画循环播放的次数，默认值为1 也可以设置为infinite 表示无限循环
animation-direction动画播放的方向

animation-play-state动画的状态

喜欢这样写： animation: sade 1.5s linear 0.1s infinite;

纯粹的记录一下，实际过程中，当然是配合使用

例如：

transform: scale(1);
transition:transform 0.3s ease;
这种代码就是 transition：scale(1); 0.3s ease; 这样的原理 但实际不能这样写，只能上面的写法哦

这里贴一下我随手练一下的CSS3代码，哈哈，纯碎是想到上面就写什么，很简单，但是感觉还是有成就感的，初学者应该和我一样多练练！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个HTML5的网页</title>
<style>
  .div {
     box-shadow:rgba(159,94,105,0.4) -5px 5px;
    position: relative;
    border: 1px solid red;
    width:200px;
    height: 200px;
  }
  .span {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    width:100px;
    box-shadow:0 5px 5px rgba(159,94,105,0.4) inset;
     margin-left:-50px; 
     margin-top:-50px;
      border: 1px solid green;
      transition: all 1s ease;
  }
  .span:hover {
    background-color: blue;
        transform: scale(1.5) rotate(180deg);
        cursor: pointer;
  }
  @keyframes moveDiv{
    0% {
    transform: translateX(0);
  }
  25%{
    transform: translateX(180px);
  }
  50%{
     transform: translate(180px, 180px); 
  }
  75%{
    transform:translate(0,180px);
  }
  100%{
    transform: translateY(0);
  }
  }
  .ha {
     display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 100%;
/*   animation-name:moveDiv;
  animation-duration: 20s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count:infinite;
  animation-direction:alternate;*/
  animation: moveDiv 20s linear 1s infinite alternate;

  }
  ul {
 list-style-type: none;
 margin:0px;
 padding:0px;
}
li {
 margin:7px;
 padding:5px;
 float:left;
 width:50px;
}
</style>
</head>
<body>
<div class="div">
  <span class="span">触摸我</span>
  <span class="ha"></span>
</div>
<div class="sha">
<ul>
  <li>哈哈</li>
  <li>呵呵</li>
  <li>哈呵</li>
  <li>呵哈</li>
</ul>
</div>
</body>
<script>
</script>
</html>

上面有一个很经典的圆球滚动动画，我笨笨的还花了点时间理解一下，其实是没理解translate的用法

这是第一篇博客啦，记录一下，其实项目上学到很多，踩过很多坑，以后慢慢补到博客上，顺便回归一下学习一下。菜鸟的成长之路还是很好奇的。