css实现网页右下角点赞小卡片效果（实例代码）广告始终定位到网页右下角 csscss伪类 右下角点击出现 对号角标表示选中的示例代码借助CSS定位来实现把一个DIV放到另一个div右下角css返回顶部图标固定在浏览器右下角且兼容ie6纯css 右下角定位_并结合js实现关闭功能(兼容多浏览器)

 此页面对您是否有帮助？ 
 YES 
 NO 

 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; }