scss+div画一个简单的小兔几

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

先看效果： 鼠标悬停耳朵、眼睛、手臂会有额外的效果哦

html结构： 总体画页面分为两部分

• face:脸部
• body:身体

小兔子画完用到的css3知识也比较简单，来我们再一起来巩固下css知识点

• 渐变

  • 线性渐变

    • 兔子耳朵：

      • background:linear-gradient(to right,pink,white)

      linear-gradient(direction,color-stop1,color-stop2,...)

      1. direction :渐变方向，默认从上到下，to right 表示从左到右，方向还可以设置对角线，如：to bottom right表示从做上到下右
      2. color-stop1:渐变颜色，设置你想渐变的效果，数量不限

  • 径向渐变

    • 兔子脚

      • background:radial-gradient(rgb(238, 141, 157),white);

      radial-gradient(shape size at position, start-color, ..., last-color)

      1. shape size at position 默认地，shape 为椭圆形，size 为最远角，position 为中心

         shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

        background-image: radial-gradient(circle, red, yellow, green);
      

      2. start-color,last-colot,设置渐变的颜色，数量不限

• 角度旋转

  • 用到了transform里面的rotate属性

    //2d旋转，表示元素顺时针旋转33度，负角度则表示逆时针旋转
    transform: rotate(33deg);
    
    //设置元素旋转基点，默认50% 50% 0,也就是center 分别设置X轴，Y轴，Z轴的位置
    //center: center center 或50% 50%
    //top:top center或50% 0
    //right: right center 或100% 或100% 50%
    //bottom: bottom center 或 50% 100%
    //left:left center 或0 50%
    
    
    transform-origin: top;
    

• 循环动画

  • @keyframes
    • 如兔子左边耳朵鼠标放上去抖动

      @keyframes leftEarShadow{
       0%{
         rotate: 45deg;
       }
       50%{
         rotate: 60deg;
       }
       100%{
         rotate: 45deg;
       }
     }
     .leftEar{
         animation: leftEarShadow 2.5s .1s linear infinite;
     }
     
  

   animation 顺便说一嘴:
        animation-name 动画名称，对应leftEarShadow
        animation-duration  指定动画完成时长
        animation-delay 动画启动前的延迟时间
        animation-timing-function 动画执行曲线效果
        animation-count  定义动画的播放次数，infinite表示无限循环
  

  还有更多属性有兴趣的可以再去查查看噢

• 另外，右侧文本部分还有用到scss的each指令

  • $textArr：表示要循环的数组
    $index：得到的数组索引  
    $index：得到的数组索引
    

  • $textArr:'你好呀～','兔兔可爱吗','我的眼睛大不大','大海啊全是水','祝你今天没有bug';
    
    @keyframes randomText{
     0%{
     }
       @each $item in $textArr {
       $index: index($textArr, $item)*20%; /**可得到循环的索引*/
       #{$index} {
           content:$item;
       }
       }
    }
    

  • 上面的引用得到的效果是：

零零散散记了这么多，有错漏的欢迎指出～