效果地址:
其它动画效果地址: 1. https://scrimba.com/c/cJ8NPpU2 2. https://scrimba.com/c/cbNkBnuV
- html code:
- <div class="eyes">
- <span></span>
- <span></span>
- </div>
- CSS code:
- HTML,body{
- margin: 0;
- padding: 0;
- }
- *{
- /* 设置所有元素的 width,height 包括其内边距, 边框, 内容 */
- box-sizing: border-box;
- }
- body,.eyes{
- height: 100vh;
- border: 1px solid white;
- display: flex;
- justify-content: space-around;
- align-items: center;
- background-color: white;
- }
- .eyes{
- width: 100%;
- height: 100%;
- }
- /* 画出眼睛 */
- .eyes span{
- position: relative;
- width: 10em;
- height: 5em;
- border-radius: 50%;
- background-color: black;
- }
- /* 利用 span 的::before 伪元素画出眼球 */
- .eyes span::before{
- content:'';
- width: 3em;
- height: 3em;
- border-radius: 50%;
- background-color: white;
- /* 定位 */
- position: absolute;
- left: 3.5em;
- top: 1em;
- }
来源: http://www.bubuko.com/infodetail-3012954.html