57.纯 CSS 创作一双黑暗中的眼睛
原文地址:https://segmentfault.com/a/1190000015327725
感想:原来边框还能这样玩--》做会眨眼的眼睛
HTML code:
<div class="eyes">
<span class="left"></span>
<span class="right"></span>
</div>
CSS code:
html, body {
margin:;
padding:;
}
/* 设置body的子元素水平垂直居中 */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* 设置容器尺寸 */
.eyes{
position: relative;
width: 40em;
height: 10em;
/* border: 1px solid white; */
font-size: 12px;
}
.eyes > * {
/* 设置宽高包含内边距/边框和内容 */
box-sizing: border-box;
position: absolute;
width: 15em;
height: 10em;
border: solid white;
/* 画眼球 */
border-width: 0 5em;
animation: blink 2s linear infinite;
}
.eyes .left{
left:;
border-radius: 50% 0;
/* 使双眼向内聚拢 */
transform: rotate(25deg);
}
.eyes .right {
right :;
border-radius: 0 50%;
transform: rotate(-25deg);
}
/* 定义眨眼的动画 */
@keyframes blink{
40%, 60%{
border-width: 0 5em;
}
50% {
border-width: 0 7.5em;
}
}
57.纯 CSS 创作一双黑暗中的眼睛的更多相关文章
- 前端每日实战:57# 视频演示如何用纯 CSS 创作一双黑暗中的眼睛
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xzYVzO 可交互视频 此视频是可 ...
- 46.纯 CSS 创作一个在容器中反弹的小球
原文地址:https://segmentfault.com/a/1190000015221260 练习地址:https://scrimba.com/c/c3GEWmTb 感想: 原来animation ...
- 用纯 CSS 创作一个在容器中反弹的小球
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教 ...
- 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...
- 3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
- 2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 57.2拓展之纯 CSS 创作黑暗中会动的眼睛和嘴巴
效果地址:https://scrimba.com/c/cbNkBnuV HTML code: <!-- 定义dom, .eyes容器中包含2个元素 --> <div class=&q ...
- 57.1拓展之纯 CSS 创作黑暗中的眼睛和嘴巴
效果地址:https://scrimba.com/c/cJ8NPpU2 HTML code: <div class="eyes"> <span class=&qu ...
随机推荐
- Delphi中如何进行BASE64解码
//方法1: uses EncdDecd; Memo2.Text:=UTF8Decode( DecodeString(Memo1.Text)); //方法2: // 使用控件 Memo2.Text:= ...
- java中对HashMap遍历的方式
第一种是利用HashMap的entrySet()方法: Map<String,String> map = new HashMap<String,String>(); Itera ...
- java高并发编程(四)高并发的一些容器
摘抄自马士兵java并发视频课程: 一.需求背景: 有N张火车票,每张票都有一个编号,同时有10个窗口对外售票, 请写一个模拟程序. 分析下面的程序可能会产生哪些问题?重复销售?超量销售? /** * ...
- PAT 乙级 1020 月饼 (25) C++版
1020. 月饼 (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 月饼是中国人在中秋佳节时吃的一种传统食 ...
- 学习笔记之Nginx
NGINX | High Performance Load Balancer, Web Server, & Reverse Proxy https://www.nginx.com/ flawl ...
- CountDownLatch的简单讲解
正如每个Java文档所描述的那样,CountDownLatch是一个同步工具类,它允许一个或多个线程一直等待,直到其他线程的操作执行完后再执行.在Java并发中,countdownlatch的概念是一 ...
- [ERR] Node is not empty. Either the node already knows other nodes (check with C
[root@node00 src]# ./redis-trib.rb add-node --slave --master-id4f6424e47a2275d2b7696bfbf8588e8c4c3a5 ...
- MFC+mongodb+nodejs 数据库的读取与写入操作
首先通过nodejs和mongodb建立后端服务器 一.在windows平台下启动mongodb服务器 1.进入mongodb的安装目录,并进去bin目录启动mongod 2.在d盘建立mongodb ...
- Codeforces-Educational Codeforces Round 53题解
写之前,先发表下感慨:好久没写题解了,也许是因为自己越来越急利了,也可以说是因为越来越懒了. A. Diverse Substring 直接找一找有没有相邻的两个不同的字符即可. B. Vasya a ...
- U3D学习11——nav导航和动画
一.nav导航 1.nav mesh agent 2.off mesh link 3.navigation面板-areas标签的应用,导航分层 二.动画 1.avatar可重用. 2.Animator ...