正文 

当前位置： 首页 > java > java框架

《css动画实用技巧》课程笔记

yangzhou33      2022-02-07     403

关键词：

概述

这是我学习CSS动画实用技巧的课程笔记

常用动画属性——transition

技术分享图片

        .change img{
          display:block;
          width:300px;
          height:284px;
          opacity:0;
          -webkit-transform:translate(-100px,-100px);
          -webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
          transition: opacity 1s ease-in-out 0.5s,transform 1s ease-in-out;
        }
        .change:hover img{
          -webkit-transform:translate(0px,0px);
          opacity:1;
          -webkit-transition: opacity 1s ease-in-out,-webkit-transform 1s ease-in-out .1s;
          transition: opacity 1s ease-in-out,transform 1s ease-in-out .1s;
        }

主要是移动和透明渐变同时进行（有延迟）。

常用动画属性——animation

技术分享图片

@keyframes shake-hard {
  2% {
    transform: translate(1px, -2px) rotate(3.5deg); }
  4% {
    transform: translate(-7px, -6px) rotate(3.5deg); }
  6% {
    transform: translate(2px, -6px) rotate(-0.5deg); }
  8% {
    transform: translate(1px, 2px) rotate(2.5deg); }
  10% {
    transform: translate(1px, 7px) rotate(1.5deg); }
  12% {
    transform: translate(0px, 2px) rotate(-0.5deg); }
  14% {
    transform: translate(9px, 2px) rotate(1.5deg); }
  16% {
    transform: translate(-4px, 2px) rotate(3.5deg); }
  18% {
    transform: translate(-9px, 5px) rotate(1.5deg); }
  20% {
    transform: translate(-9px, -8px) rotate(1.5deg); }
  22% {
    transform: translate(-2px, 3px) rotate(-0.5deg); }
  24% {
    transform: translate(3px, 2px) rotate(-2.5deg); }
  26% {
    transform: translate(8px, -7px) rotate(2.5deg); }
  28% {
    transform: translate(-7px, 9px) rotate(-2.5deg); }
  30% {
    transform: translate(-9px, 3px) rotate(-0.5deg); }
  32% {
    transform: translate(-7px, 2px) rotate(3.5deg); }
  34% {
    transform: translate(-1px, -6px) rotate(0.5deg); }
  36% {
    transform: translate(5px, -1px) rotate(3.5deg); }
  38% {
    transform: translate(2px, 6px) rotate(3.5deg); }
  40% {
    transform: translate(-4px, -2px) rotate(-1.5deg); }
  42% {
    transform: translate(1px, -7px) rotate(-2.5deg); }
  44% {
    transform: translate(6px, 7px) rotate(-1.5deg); }
  46% {
    transform: translate(-3px, 6px) rotate(2.5deg); }
  48% {
    transform: translate(-6px, 6px) rotate(2.5deg); }
  50% {
    transform: translate(4px, -6px) rotate(1.5deg); }
  52% {
    transform: translate(-8px, 9px) rotate(-2.5deg); }
  54% {
    transform: translate(-7px, 5px) rotate(-0.5deg); }
  56% {
    transform: translate(-4px, 9px) rotate(2.5deg); }
  58% {
    transform: translate(-6px, -8px) rotate(-0.5deg); }
  60% {
    transform: translate(6px, -9px) rotate(2.5deg); }
  62% {
    transform: translate(2px, 9px) rotate(1.5deg); }
  64% {
    transform: translate(7px, -7px) rotate(1.5deg); }
  66% {
    transform: translate(1px, -3px) rotate(0.5deg); }
  68% {
    transform: translate(9px, -2px) rotate(-0.5deg); }
  70% {
    transform: translate(9px, -3px) rotate(-1.5deg); }
  72% {
    transform: translate(2px, -3px) rotate(-0.5deg); }
  74% {
    transform: translate(6px, -9px) rotate(1.5deg); }
  76% {
    transform: translate(-3px, 6px) rotate(3.5deg); }
  78% {
    transform: translate(1px, 8px) rotate(-0.5deg); }
  80% {
    transform: translate(10px, -2px) rotate(1.5deg); }
  82% {
    transform: translate(-5px, 5px) rotate(3.5deg); }
  84% {
    transform: translate(7px, -5px) rotate(-0.5deg); }
  86% {
    transform: translate(-3px, -7px) rotate(-0.5deg); }
  88% {
    transform: translate(-2px, -1px) rotate(-1.5deg); }
  90% {
    transform: translate(5px, 0px) rotate(-2.5deg); }
  92% {
    transform: translate(10px, -5px) rotate(-0.5deg); }
  94% {
    transform: translate(2px, 9px) rotate(0.5deg); }
  96% {
    transform: translate(4px, -8px) rotate(0.5deg); }
  98% {
    transform: translate(2px, 8px) rotate(-0.5deg); }
  0%, 100% {
    transform: translate(0, 0) rotate(0); } }

其实就是把抖动分隔成一帧帧，然后用keyframes连接起来。

常用动画属性——transform

技术分享图片

.cardfan > img{
          position:absolute;
          border:10px solid #fff;
          box-sizing:border-box;
          box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2);
          -webkit-transform-origin: center 400px;
          transform-origin: center 400px;
          -webkit-transition: -webkit-transform .7s ease;
          transition: transform .7s ease;
        }
        .cardfan img:first-child{
          -webkit-transform:rotate(5deg);
          transform:rotate(5deg);
        }
        .cardfan img:last-child{
          -webkit-transform:rotate(-5deg);
          transform:rotate(-5deg);
        }
        .cardfan:hover img:first-child{
          -webkit-transform:rotate(25deg);
          transform:rotate(25deg);
        }
        .cardfan:hover img:last-child{
          -webkit-transform:rotate(-25deg);
          transform:rotate(-25deg);
        }

其实就是在鼠标接触之后第1,3张图旋转一下。

常用动画属性——animation-delay为负值

技术分享图片

.spinner > div{
          display:inline-block;
          width:6px;
          height:100%;
          background:green;
          -webkit-animation: strechdelay 1.2s infinite ease-in-out ;
        }
        .spinner .line2{
          -webkit-animation-delay:-1.1s;
        }
        .spinner .line3{
          -webkit-animation-delay:-1.0s;
        }

        .spinner .line4{
          -webkit-animation-delay:-0.9s;
        }

        .spinner .line5{
          -webkit-animation-delay:-0.8s;
        }/**/
        @-webkit-keyframes strechdelay{
          0%,40%,100%{
            -webkit-transform:scaleY(.4);
          }
          20%{
            -webkit-transform:scaleY(1);
          }
        }

比如：animation-delay为-2s，效果是使动画马上开始，但跳过 2 秒进入动画。

常用动画属性——妙用border颜色

技术分享图片

.spinner{
          width:10em;
          height:10em;
          border-radius:100%;
          margin:100px auto;
          border:1.1em solid rgba(255,255,255,.2);
          border-left-color:#fff;
        }

主要是先让一个边框颜色不同，然后让它旋转。

常用动画属性——巧用border宽度

技术分享图片

.image-layer:before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          border-style: solid;
          border-width: 0;
          border-color: rgba(0,0,0,0.2) #fff;
          border-radius: 0 0 0 4px;
          box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
          -webkit-transition: all 0.4s ease-out;
          transition:all 0.4s ease-out;
        }

        .image-layer:hover:before{
          border-right-width:80px;
          border-bottom-width:80px;
        }

        .paper-flip.folded .image-layer:before{
          border-right-width:1000px;
          border-bottom-width:600px;
        }

利用宽度做成折角效果。翻页效果有点看不懂。

常用动画属性——实现运动动画

技术分享图片

.stage{
          width:120px;
          height:auto;
          margin:0 auto;
          position:relative;
          -webkit-transform-origin:center top;
          -webkit-transform:rotate(-30deg);
          -webkit-animation:sway 2.2s infinite alternate ease-in-out;
        }
        .watch{
          width:100%;
          height:auto;
        }
        .seconds{
          position:absolute;
          width:8%;
          height:auto;
          bottom:11.5%;
          left:45.5%;
          -webkit-transform-origin:center 72.4%;
          -webkit-animation:second 60s infinite linear;
        }
        @-webkit-keyframes second{
          to{
            -webkit-transform:rotate(355deg);
          }
        }
        @-webkit-keyframes sway{
          to{
           -webkit-transform:rotate(30deg);
          }
        }

其实就是利用rotate来进行弧形运动，注意animation-direction：alternate和center：top。

《css定位position》课程笔记

这是我学习课程css定位position时做的笔记!本节内容html的三种布局方式position可选参数z-index盒子模型和定位的区别侧边栏导航跟随实例html的三种布局方式三种布局：标准流，浮动，定位两大元素：块级元素（div,h1-6,table,ol,ul,li,p）... 查看详情

数据分析课程笔记-19-hivesql常用优化技巧

参考技术A大家好呀，这节课学习HiveSQL的常用优化技巧。由于Hive主要用来处理非常大的数据，运行过程由于通常要经过MapReduce的过程，因此不像MySQL一样很快出结果。而使用不同方法写出来的HiveSQL语句执行效率也是不一样的，因... 查看详情

吴恩达-深度学习-课程笔记-6:深度学习的实用层面(week1)

1训练/验证/测试集(Train/Dev/testsets)构建神经网络的时候有些参数需要选择，比如层数，单元数，学习率，激活函数。这些参数可以通过在验证集上的表现好坏来进行选择。前几年机器学习普遍的做法：把数据分成60%训练集，20%验... 查看详情

7.1万star！超实用，60多种动画效果的css库

【导语】：animate.css是一个有趣的，跨浏览器的CSS3动画库。简介animate.css是一个有趣的，跨浏览器的css3动画库，兼容性好，使用方便。它预设了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达60多种动画效果，几乎包含了所有... 查看详情

常用css动画制作技巧及踩坑总结

1.CSS3d透视perspective属性都是加给父元素的transform-style：preserve-3d;这个属性必须与transform一同使用，它使被转换的子元素保留其3D转换（即设置给父元素）<!--这里是一个简单的透视的例子--><divclass="door-border"><divclass="door... 查看详情

css笔记：flexbox中使用automargin的技巧-10(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-3(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-7(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-8(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-1(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-6(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-5(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-11(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-4(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-9(代码片段)

查看详情

css笔记：flexbox中使用automargin的技巧-2(代码片段)

查看详情

css动画制作的12个技巧

...看的网站。我们经常用CSS去添加页面的运动过渡效果甚至动画，但我们经常做的东西不会超过这些。动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。迪士尼经过... 查看详情

html学习笔记css3(animation)

CSS3动画：通过CSS3我们能够创建动画这可以在许多网页中取代动画图片Flash动画以及JavaScript。CSS3@keyframes规则如需在CSS3中创建动画，您需要学习@keyframes规则。@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由... 查看详情