css3新特性_css3 protype-CSDN博客

本文链接：https://blog.csdn.net/weixin_43506403/article/details/109256536

	现在前端要求越来越高，界面体念要求更高，难免需要用到些动态感的效果，今天有空整理写了些例子

css3新特性

新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}
弹性盒模型 display: flex;
多列布局 column-count: 5;
媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}
个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}
颜色透明度 color: rgba（255, 0, 0, 0.75）；
圆角 border-radius: 5px;
渐变 background:linear-gradient（red, green, blue）；
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
倒影 box-reflect: below 2px;
文字装饰 text-stroke-color: red;
文字溢出 text-overflow:ellipsis;
背景效果 background-size: 100px 100px;
边框效果 border-image:url（bt_blue.png） 0 10;

转换

旋转 transform: rotate（20deg）；
倾斜 transform: skew（150deg, -10deg）；
位移 transform:translate（20px, 20px）；
缩放 transform: scale（。5）；
平滑过渡 transition: all .3s ease-in .1s;
动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

在这里插入图片描述
页面比较丑，但是基本效果是实现了的，以下是代码

<template>
  <div class="home">
    <div class="title">css新特性</div>

    <div class="mul-col">
      <div class="class1">
        <h3>新手上路</h3>
        <p>新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>
      </div>
      <div>
        <h3>付款方式</h3>
        <p>快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>
      </div>
      <div>
        <h3>淘宝特色</h3>
        <p>手机淘宝 旺信 大众评审 B格指南</p>
      </div>
    </div>

    <!-- 弹性盒子模型 -->
    <div class="boxcontainer">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
    <!-- 线性渐变 -->
    <div class="gradient"></div>
    <div class="transform">
      <div class="rotate">旋转 rotate</div>
      <div class="scale">缩放 scale</div>
      <div class="skew">倾斜 skew</div>
      <div class="transition">过渡效果 transition</div>
      <div class="animation">
        动画效果 animation
        <label class="drop"></label>
      </div>
    </div>
    <!-- 过渡 -->
    <div class="main"></div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "CssNew",
  data() {
    return {};
  },
  methods: {}
};
</script>

<style>
@font-face {
  font-family: iconfont;
  src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);
}

.mul-col {
  column-count: 3;
  column-gap: 5px;
  column-rule: 1px solid gray;
  border-radius: 5px;
  border: 1px solid gray;
  padding: 10px;
}
/* 阴影 */
.class1 {
  margin-top: -19px;

  text-shadow: 5px 2px 6px rgba(64, 64, 64, 0.5);
}
/**的渐变效果  */
.gradient {
  height: 50px;
  background-image: -webkit-gradient(
    linear,
    0% 0%,
    100% 0%,
    from(#2a8bbe),
    to(#fe280e)
  );
}
.transform {
  display: flex;
  width: 100%;
  height: 100px;
}
/* 旋转 
 详细看 https://www.cnblogs.com/yanggeng/p/11275771.html*/
.rotate {
  /* transform-origin:0 0; 定边上边 */
  transform-origin: center center; /* 定的点在中心，那么两条轴 */
  /* left: calc(50% - 50px); 居中 */
  /* rotateX 参数大小改变 div 随x轴转动 */
  /* transform: rotateX(3deg) rotateY(0deg) rotateZ(0deg); */
  /* 前三个是，x y z 矢量的方向  最后一个是 角度deg   */
  /* 比如： 1：1：0   = 100：100：0 以左上角和右下角定线旋转 */
  transform: rotate3d(1, 1, 0, 3deg);
  width: 100px;
  height: 100px;
  background-color: aqua;
  text-align: center;
}
.rotate:hover {
  transform: rotate3d(1, 1, 0, 60deg);
}
/* 缩放 */
.scale {
  /* 参数大于1就代表放大；如果小于1就代表缩小 */
  transform: scale(1);
  width: 100px;
  height: 100px;
  background-color: darkorange;
}
.scale:hover {
  transform: scale(0.9);
}
/* 倾斜 skew()函数定义了一个元素在二维平面上的倾斜转换 */
.skew {
  width: 100px;
  height: 100px;
  background-color: darkviolet;
  transform: skew(0deg, 0deg);
}
.skew:hover {
  transform: skew(30deg, 0);
}
.transition {
  width: 100px;
  height: 100px;
  background: yellow;
  transition: width 2s, height 2s;
  -moz-transition: width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
  -o-transition: width 2s, height 2s, -o-transform 2s; /* Opera */
}
.transition:hover {
  width: 200px;
  height: 200px;
  transform: rotate(360deg);
  /*-moz-transform:rotate(180deg);     Firefox 4   */
  /*-webkit-transform:rotate(180deg);   Safari and Chrome */
  /*-o-transform:rotate(180deg);   Opera */
}
/**
关键帧(@keyframes) - 定义动画在不同阶段的状态。
动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器）
animation有八个动画属性：
animation-name：              规定需要绑定到选择器的keyframe名称。
animation-duration：          规定完成动画所花费的时候，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线， 设置动画播放方式。
animation-delay：               规定动画开始之前的延迟。
animation-iteration-count： 规定动画播放的次数。
animation-direction：          规定是否应该轮流反向播放动画。
animation-fill-mode：          规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state：        指定动画是否正在运行或已暂停。
https://blog.csdn.net/u013243347/article/details/79976352
 */
.animation {
  width: 100px;
  height: 100px;
  background-color: navajowhite;
}
.drop {
  animation: dropdown 8s linear infinite;
  width: 20px;
  height: 20px;
  background: orangered;
  display: block;
  position: relative;
}
@keyframes dropdown {
  0% {
    top: 20px;
    left: 20px;
  }
  30% {
    top: 20px;
    left: 80px;
  }
  50% {
    top: 30px;
    left: 50px;
  }
  70% {
    top: 60px;
    left: 70px;
  }
  80% {
    top: -20px;
    left: 0px;
  }
  100% {
    top: 2px;
    left: 2px;
  }
}

/* 弹性盒子模型  */
.boxcontainer {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
}
.item {
  background: #357c96;
  font-weight: bold;
  margin: 2px;
  padding: 20px;
  color: #fff;
  font-family: Arial, sans-serif;
}
.main {
  /*transition-property 对象参与过渡的属性
  transition-duration 过渡的持续时间
  transition-timing-function 过渡的类型
  transition-delay 延迟过渡的时间 */
  position: relative;
  margin: 0 auto;
  height: 45px;
  width: 100%;
  background-color: lightgray;
  transition: background-color 0.6s ease-in 0s;
}
.main:hover {
  background-color: dimgray;
}
</style>