网站首页 > web开发 > CSS 正文
效果
实现HTML先准备一个干净的 html 页面,写好节点:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="styleSheet" type="text/css" href="./style.css" /> </head> <body> <div> <section class="card"> <div class="card-top"> 此页面对您是否有帮助? </div> <div class="card-bottom"> <div title=""> YES </div> <div title=""> NO </div> </div> </section> </div> </body> </html>
CSS
同级目录建立一个 style.css
编写我们的样式:
body { margin: 0; padding: 0; /* mobile 端切换横竖屏适配 */ -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; /* 渲染优化 */ -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 15px; } * { box-sizing: border-box; font-family: "Fira Code", Hack, Consolas; } :root { --color: #ff4081 } section { margin: 0; padding: 0; } .card { font-size: inherit; position: fixed; right: 0; bottom: 0; background-color: var(--color); border-radius: 4px 4px 0 0; box-shadow: 0 16px 60px 0 rgba(86, 91, 115, 0.2); opacity: 0.5; transform: translateX(-20px) translate(103px, 27px) rotate(35deg); transition: all 400ms cubic-bezier(0.26, 0.6, 0.4, 1.54); } .card:hover { opacity: 1; transform: translate(0, 0) rotate(0deg) translateX(-20px); } .card-top { height: 50px; line-height: 50px; padding: 0 1rem; text-align: center; user-select: none; color: #fff; } .card-bottom { display: flex; background-color: #fff; justify-content: space-evenly; } .card-bottom div { padding: 1rem; cursor: pointer; font-weight: 700; text-transform: uppercase; text-decoration: none ; color: var(--color); transition: all .2s linear; } .card-bottom div:hover { text-shadow: 0 1px 1px var(--color); letter-spacing: 1px; }
两个动画:
rotate(0deg)
->rotate(35deg)
translate(0px, 0px)
->translate(103px, 27px)
动画过程:transform: translateX(-20px) translate(103px, 27px) rotate(35deg);
注意这里 translateX(-20px)
是动画前后一致的,一共只有两个属性改变。
总结
到此这篇关于css实现网页右下角点赞小卡片效果(实例代码)的文章就介绍到这了,更多相关css网页右下角点赞小卡片内容请搜索开源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开源网!
猜你喜欢
- 2021-07-16 CSS八种让人眼前一亮的HOVER效果的示例代码
- 2021-07-16 看完不迷糊的 CSS 盒子模型介绍
- 2021-07-16 CSS 屏幕大小自适应的实现示例
- 2021-07-16 CSS中的translate(-50%,-50%)实现水平垂直居中效果
- 2021-07-16 CSS 选择所有子元素添加样式的方法
- 2021-07-16 CSS子元素跟父元素的高度一致的实现方法
- 2021-07-16 css子元素相对父元素进行定位的实现
- 2021-07-16 纯CSS让子元素突破父元素的宽度限制
- 2021-07-16 CSS实现子元素div水平垂直居中的示例
- 2021-07-16 CSS+JS实现水滴涟漪动画按钮效果的示例代码
你 发表评论:
欢迎- 2951℃JS彻底弄懂GMT和UTC时区
- 2822℃JS使用canvas技术模仿echarts柱状图
- 2649℃JS装饰者模式和TypeScript装饰器
- 2574℃JS ES6展开运算符的几个妙用
- 2542℃vue的ssr服务端渲染示例详解
- 2365℃jquery插件实现图片对比
- 2319℃微信小程序视频弹幕位置随机
- 1816℃docker安装redis设置密码并连接的操作
- 0℃未命名
- 开源分类
- 最近发表
-
- (1)python+selenium第一个自动化脚本:实现打开百度首页并搜索selenium
- Discuz!教程之启用HTTPS后解决各处遗留http://网址问题
- 网站如何识别 你是 selenium爬虫?那我们怎么解决(反反爬)
- 旋转拖动验证码解决方案
- python关键词排名_python实现百度关键词排名查询
- Unity3D研究院之通过ipa或apk获取游戏所使用的unity和Xcode版本
- Unity3D研究院编辑器之脚本生成Preset Libraries(十四)
- 手把手教你Charles抓包工具使用
- python开发的程序内存越来越大_遇到个python进程占用内存太多的问题 | 数据,更懂人心...
- Selenium Python3 请求头配置
- 开源网标签
本文暂时没有评论,来添加一个吧(●'◡'●)