57.1拓展之纯 CSS 创作黑暗中的眼睛和嘴巴

57.1拓展之纯 CSS 创作黑暗中的眼睛和嘴巴

57.1拓展之纯 CSS 创作黑暗中的眼睛和嘴巴

效果地址：

HTML code：

<div class="eyes"><span class="left"></span><span class="right"></span>
</div>

CSS code：

html, body {margin: 0;padding: 0;
}
/* 设置body的子元素水平垂直居中 */
body{height: 100vh;display: flex;justify-content: center;align-items: center;background-color: black;
}
/* 设置容器尺寸 */
.eyes{position: relative;width: 30em;height: 10em;/* border: 1px solid white; */font-size: 12px;
}
.eyes > * {/* 设置宽高包含内边距/边框和内容 */box-sizing: border-box;position: absolute;width: 10em;height: 10em;border: solid white;/* 画眼球 */border-width: 0 3em;animation: blink 2s linear infinite;
}
.eyes .left{left: 0;border-radius: 50%;/* 使双眼旋转90度变为正常的眼睛 */transform: rotate(90deg);
}
.eyes .right {right : 0;border-radius: 50%;transform: rotate(90deg);
}
/* 定义眨眼的动画 */
@keyframes blink{40%, 60%{border-width: 0 3em;}50% {border-width: 0 5em;}
}
/* 用.eyes的伪元素::after画出嘴巴 */
.eyes::after{position: absolute;top: 10em;left: 5em;content:'';width: 20em;height: 10em;border-bottom: solid white;border-width: 3em 0;border-radius: 50%;
}

 

posted on 2019-03-29 11:47  人生与戏 阅读( ...) 评论( ...) 编辑 收藏

转载于:.html