学期第四周周记

最新推荐文章于 2021-05-13 00:30:09 发布

看恐怖片嗨的人

最新推荐文章于 2021-05-13 00:30:09 发布

阅读量265

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42018459/article/details/88806803

用CSS+HTML设计创作网页版大白，实验步骤源代码来自https://www.shiyanlou.com/courses/328

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Baymax</title>

<style>
body {
    background: #595959;
}

#baymax {

    /*设置为 居中*/
    margin: 0 auto;

    /*高度*/
    height: 600px;

    /*隐藏溢出*/
    overflow: hidden;
}

#head {
    height: 64px;
    width: 100px;

    /*以百分比定义圆角的形状*/
    border-radius: 50%;

    /*背景*/
    background: #fff;
    margin: 0 auto;
    margin-bottom: -20px;

    /*设置下边框的样式*/
    border-bottom: 5px solid #e0e0e0;

    /*属性设置元素的堆叠顺序；
    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
    z-index: 100;

    /*生成相对定位的元素*/
    position: relative;
}

#eye,
#eye2 {
    width: 11px;
    height: 13px;
    background: #282828;
    border-radius: 50%;
    position: relative;
    top: 30px;
    left: 27px;

    /*旋转该元素*/
    transform: rotate(8deg);
}

#eye2 {

    /*使其旋转对称*/
    transform: rotate(-8deg);
    left: 69px;
    top: 17px;

}

#mouth {
    width: 38px;
    height: 1.5px;
    background: #282828;
    position: relative;
    left: 34px;
    top: 10px;
}

#torso,
#belly {
    margin: 0 auto;
    height: 200px;
    width: 180px;
    background: #fff;
    border-radius: 47%;

    /*设置边框*/
    border: 5px solid #e0e0e0;
    border-top: none;
    z-index: 1;
}

#belly {
    height: 300px;
    width: 245px;
    margin-top: -140px;
    z-index: 5;
}

#cover {
    width: 190px;
    background: #fff;
    height: 150px;
    margin: 0 auto;
    position: relative;
    top: -20px;
    border-radius: 50%;
}

#heart{
  width:25px; 
  height:25px; 
  border-radius:50%; 
  position:relative; 

  /*向边框四周添加阴影效果*/
  box-shadow:2px 5px 2px #ccc inset; 

  right:-115px; 
  top:40px; 
  z-index:111; 
  border:1px solid #ccc;
}

#left-arm,
#right-arm {
    height: 270px;
    width: 120px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto;
    position: relative;
    top: -350px;
    left: -100px;
    transform: rotate(20deg);
    z-index: -1;
}

#right-arm {
    transform: rotate(-20deg);
    left: 100px;
    top: -620px;
}


#l-bigfinger,
#r-bigfinger {
    height: 50px;
    width: 20px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 250px;
    left: 50px;
    transform: rotate(-50deg);
}

#r-bigfinger {
    left: 50px;
    transform: rotate(50deg);
}

#l-smallfinger,
#r-smallfinger {
    height: 35px;
    width: 15px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 195px;
    left: 66px;
    transform: rotate(-40deg);
}

#r-smallfinger {
    background: #fff;
    transform: rotate(40deg);
    top: 195px;
    left: 37px;
}

#left-leg,
#right-leg {
    height: 170px;
    width: 90px;
    border-radius: 40% 30% 10px 45%;
    background: #fff;
    position: relative;
    top: -640px;
    left: -45px;
    transform: rotate(-1deg);
    z-index: -2;
    margin: 0 auto;
}

#right-leg {
    background: #fff;
    border-radius:30% 40% 45% 10px;
    margin: 0 auto;
    top: -810px;
    left: 50px;
    transform: rotate(1deg);
}

</style>

</head>

<body>
    <div id="baymax">

        <!-- 定义头部，包括两个眼睛、嘴 -->
        <div id="head">
            <div id="eye"></div>
            <div id="eye2"></div>
            <div id="mouth"></div>
        </div>

        <!-- 定义躯干，包括心脏 -->
        <div id="torso">
            <div id="heart"></div>
        </div>

        <!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
        <div id="belly">
            <div id="cover"></div>
        </div>

        <!-- 定义左臂，包括一大一小两个手指 -->
        <div id="left-arm">
            <div id="l-bigfinger"></div>
            <div id="l-smallfinger"></div>
        </div>

        <!-- 定义右臂，同样包括一大一小两个手指 -->
        <div id="right-arm">
            <div id="r-bigfinger"></div>
            <div id="r-smallfinger"></div>
        </div>

        <!-- 定义左腿 -->
        <div id="left-leg"></div>

        <!-- 定义右腿 -->
        <div id="right-leg"></div>

    </div>
</body>

</html>

在此基础上做了一些修改，让大白的眼睛动起来，有一个眨眼的动作，这里由于本人水平太低，于是找了他人的案例来参考，案例来源https://www.w3cplus.com/css3/baymax.html
英文出处：https://cssanimation.rocks/baymax/ 著作权归作者所有

这个案例达到的效果是大白的眼睛半闭半睁着，好像快没电、异常疲劳的感觉，如图
在这里插入图片描述
然后我看了其他眨眼的案例，在同学的帮助下（水平太差就这样）对上面的实验楼源码进行了修改

<style>
@keyframes myfirst
{
    0% {transform:rotate(0deg);}
    25% {transform:rotate(6deg);}
    50%{transform:rotate(0deg);}
    75%{transform:rotate(-6deg);}
    100%{transform:rotate(0deg);}
}

#head {
    height: 64px;
    width: 100px;

    /*以百分比定义圆角的形状*/
    border-radius: 50%;

    /*背景*/
    background: #fff;
    margin: 0 auto;
    margin-bottom: -20px;

    /*设置下边框的样式*/
    border-bottom: 5px solid #e0e0e0;

    /*属性设置元素的堆叠顺序；
    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
    z-index: 100;

    /*生成相对定位的元素*/
    position: relative;

    animation: myfirst 5s infinite;
}

@keyframes blink1 { 
    0% { top: -13px; }
     15% { top: -6.5px; } 
     30% {  top: -13px; } 
 }
 @keyframes blink2 { 
    0% { top: 13px; }
     15% { top: 6.5px; } 
     30% {  top: 13px; } 
 }


#eye
 {
    width: 11px;
    height: 13px;
    border-radius: 50%;
    position: absolute;
    top: 29px;
    left: 19px;

/*    旋转该元素*/
    transform: rotate(8deg);
 background: #000; 

      
}
#eye:before,
#eye2:before {
    content: '';
    display: block; 
    width: 11px;
    height: 13px;
    border-radius: 50%;
    background:#fff;
    position: absolute;
    top: -13px;
    left: 0px;
    animation: blink1 3s infinite ;
}
#eye:after,
#eye2:after {
    content: '';
    display: block; 
    width: 11px;
    height: 13px;
    border-radius: 50%;
    background:#fff;
    position: absolute;
    top: 13px;
    left: 0px;
    animation: blink2 3s infinite ;
}


#eye2 {

/*    使其旋转对称*/
    transform: rotate(-8deg);
     width: 11px;
    height: 13px;
    border-radius: 50%;
    position: absolute;
    left: 68px;
    top: 29px;
    background: #000; 

}



#mouth {
    width: 38px;
    height: 1.5px;
    background: #282828;
    position: absolute;
    left: 30px;
    top: 36px;
}
</style>

效果如下图，除了眨眼还加了头部的摆动，emmm看上去还是有点怪怪的，后期再继续改进
在这里插入图片描述
眼睛的部分用了上下两个图层蒙版，设置动画执行代码，上下两个蒙版会同时移动遮挡眼睛黑色的部分，营造出眨眼的视觉效果，@keyframes规则和animation属性搭配使用，这里用法可参考 http://www.w3school.com.cn/cssref/pr_animation.asp 和 http://www.w3school.com.cn/cssref/pr_keyframes.asp 。

我在模仿案例制作半睁眼效果时发现一个问题

<style>
@keyframes blink {
	 0% { background-position: 0 -13px; } 
	 50% { background-position: 0 -7px; } 
	 100% { background-position: 0 -13px; } 
}
#eye,
#eye2 {
    width: 11px;
    height: 13px;
    background: #282828;
    border-radius: 50%;
    position: relative;
    top: 30px;
    left: 27px;

    /*旋转该元素*/
    transform: rotate(8deg);
    animation: blink 2s infinite ;
    background: linear-gradient(to bottom, #efefef, #efefef 50%, #000 50%);
    background-position: 0% -13px;
    background-size: 22px 26px;
}

#eye2 {

    /*使其旋转对称*/
    transform: rotate(-8deg);
    left: 69px;
    top: 17px;

}

#mouth {
    width: 38px;
    height: 1.5px;
    background: #282828;
    position: relative;
    left: 34px;
    top: 10px;
}
</style>

那就是 background-position属性用百分比没有效果，我换成像素px才有效果，至今仍未解决问题，如果有大佬知道劳烦告知一下，因为案例中的源码我测试过是可行的，但是我组合了一下就不行了，另外，我发现在应用@keyframes规则时，如果将动画执行时间全部占用，也就是说开始设置0%，结束设置100%，那么眨眼的动作会略微有点卡顿，如果想要眨眼的动作流畅一点可以将结束时间设置稍早一点，小于100%就行，越小动作越迅速，我是设置成30%，这样当动画结束时会保持动作一段时间，直至animation规定完成动画所花费的时间结束。