HTML+CSS制作漂浮的对话框
HTML+CSS制作漂浮的对话框
效果图如下:
HTML部分源代码如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>对话框</title><link rel="stylesheet" href="style.css">
</head><body><p>hello <br> world</p>
</body></html>
CSS部分源代码如下:
:root {--background-color: #f9cdad;--border-color: #7591AD;--text-color: #34495e;--color1: #ECE5CE;--color2: #83af9b;
}* {margin: 0;padding: 0;
}html {font-size: 14px;
}body {width: 100vw;height: 100vh;background-color: var(--background-color);display: flex;justify-content: center;align-items: center;font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}p {position: relative;padding: 50px;background-color: var(--color1);border-radius: 11px;/* 投影 */box-shadow: 20px 20px var(--color2);/* 动画效果 50%的时候向上移动20px */animation: animate1 4s ease-in-out infinite;
}/* 实现底部横线与圆点 */p::after, p::before {position: absolute;content: '';height: 11px;left: 0px;background-color: var(--color1);border-radius: 11px;/* 投影 */box-shadow: 20px 20px var(--color2);
}/* 单独定义底部横线的样式,宽度为50px */p::after {width: 50px;bottom: -25px;/* 动画效果 50%的时候向上移动10px 加上P元素向上移动20,真实移动像素为20+10px */animation: animate2 4s ease-in-out infinite;
}/* 单独定义底部圆点的样式,宽度为11px */p::before {width: 11px;bottom: -50px;/* 动画效果 50%的时候向上移动15px 加上P元素向上移动20,真实移动像素为20+15px */animation: animate3 4s ease-in-out infinite;
}@keyframes animate1 {/* 初始化和结束状态为默认 */50% {transform: translateY(-20px);}
}@keyframes animate2 {/* 初始化和结束状态为默认 */50% {transform: translateY(-10px);}
}@keyframes animate3 {/* 初始化和结束状态为默认 */50% {transform: translateY(-15px);}
}
HTML+CSS制作漂浮的对话框相关推荐
- 纯CSS制作的图形效果
纯CSS制作的图形效果 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
- 如何用CSS制作横向菜单?
管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助. 我们先来看一个菜单的例子,最终效果是: 首页 产品介绍 服 ...
- html语言制作留言条,利用DIV+CSS制作右下角弹出留言板
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 利用DIV+CSS制作右下角弹出留言板 a ...
- html中多边形图形怎么制作,CSS制作图形速查表
前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不同图形的方法.今天花了点时间将这方面的制作成一份清单,方便大家急用时有地方可查.别的不多说了,直接看代码. 为了节省时间,下 ...
- css制作漂亮彩带导航条菜单
点击这里查看效果: http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: 1 <!DOCTYPE html PUBLIC " ...
- php网页悬浮对联代码,不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: .r1{width:80px;height:80px;backgroun ...
- html把div分成两栏,div+css制作上中下,中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...
- 使用css制作三角,兼容IE6,用到的标签divsspan
使用css来制作三角,在日常用得较多.恰好这几天项目中有用到,之前只是从网上copy下来代码直接用,但是今天在用的时候遇到一些问题,于是借此机会把这个css绘制三角好好研究下吧. 我们分别写一个< ...
- table虚线边框_web前端工程师7天0基础到精通(TABLE+CSS制作《互联世纪网》)
项目七 项目实践:TABLE+CSS制作<互联世纪网> 实践目标 1. 熟悉CSS属性 2. 熟练运用CSS属性控制网页样式 3. 熟悉网页制作流程 项目简介: 通过上一章节的学习,我们了 ...
最新文章
- Facebook万字长文:AI模型全部迁移至PyTorch框架
- css垂直居中问题~
- Service Mesh所应对的8项挑战 1
- 前端学习(2163):安装clint错误和ESlint规范
- php键名相加,php二维数组相同键名相加实例
- 关于mac环境下删除cocos2d-x环境变量配置的方法
- 使用Putty密钥认证机制远程登录Linux
- 2.2_queue_队列
- webpack2终极优化
- 计算机组成原理(白中英) 第六章 课后题答案
- 0xc0000428 winload.exe无法验证其数字签名的解决方法
- 视频、音频格式转换全集
- 用手机打开word图表位置很乱_原来Word还可以自动生成图片和图表目录!
- 武钢四中2021高考成绩查询,武汉市钢城四中怎么样 钢城四中介绍
- Wifi测速上下行不一致
- 详解java -jar命令及SpringBoot通过java -jav启动的过程
- java干两年失业了,干了两年开发后,感觉快要被淘汰
- gui实现2048小游戏
- python之生产者消费者模型
- linux getchar函数使用
热门文章
- 美利财务平台数据库架构进阶
- 史上最简单的UIScrollView+Autolayout出坑指南
- 4星|《疯狂的独角兽》:离职员工披露上市公司负面资料,以为是小说,搜索后发现是真事。...
- Velocity教程【转】
- CSRF 攻击的应对之道
- NodeJs——(8)http.ServerRequest的过程
- Asp.NET Demo
- 程序人生--一个程序员对学弟学妹建议
- seL4操作系统基础05:event interface与seL4Notification connector
- linux find prune文件,Linux中find命令-path -prune用法详解