css实现网页右下角点赞小卡片效果（实例代码）

更新时间:2023-04-03 19:49:41 阅读：评论：0

效果

实现html先准备一个干净的 html 页面，写好节点：

<!doctype html><html lang="en"><head>    <meta cha小米账户rt="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>        <ction class="card">            <div class="card-top">                此页面对您是否有帮助？            </div>            <div class="card-bottom">                <div title="">                    yes                </div>                <div title="">             借景抒情的散文       no                </div>            </div>        </ction>    </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: antialiad;    font-size: 15px;}* { 教师节活动策划方案   box-sizing: border-box;    font-family: "fira code", hack, consolas;}:root {    --color: #ff4081}ction {    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;    ur-le微弱的反义词是什么ct: 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: upperca;    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(35d地震科普携手同行eg);

注意这里 translatex(-20px) 是动画前后一致的，一共只有两个属性改变。

总结

到此这篇关于css实现网页右下角点赞小卡片效果（实例代码）的文章就介绍到这了,更多相关css网页右下角点赞小卡片内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！

本文发布于:2023-04-03 19:49:40，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/b9193efb8f7b14df730142d395fa4090.html

本文word下载地址：css实现网页右下角点赞小卡片效果（实例代码）.doc

本文 PDF 下载地址：css实现网页右下角点赞小卡片效果（实例代码）.pdf

上一篇：组装电脑什么配置好 2021年组装电脑最佳配置清单

下一篇：返回列表