* { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { background: #252525; } .container { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 300px; height: 100px; } .container .search { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 80px; height: 80px; background: crimson; border-radius: 50%; transition: all 1s; z-index: 4; box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4); } .container .search:hover { cursor: pointer; } .container .search::before { content: ""; position: absolute; margin: auto; top: 22px; right: 0; bottom: 0; left: 22px; width: 12px; height: 2px; background: white; transform: rotate(45deg); transition: all 0.5s; } .container .search::after { content: ""; position: absolute; margin: auto; top: -5px; right: 0; bottom: 0; left: -5px; width: 25px; height: 25px; border-radius: 50%; border: 2px solid white; transition: all 0.5s; } .container input { font-family: "Inconsolata", monospace; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 50px; height: 50px; outline: none; border: none; background: crimson; color: white; text-shadow: 0 0 10px crimson; padding: 0 80px 0 20px; border-radius: 30px; box-shadow: 0 0 25px 0 crimson, 0 20px 25px 0 rgba(0, 0, 0, 0.2); transition: all 1s; opacity: 0; z-index: 5; font-weight: bolder; letter-spacing: 0.1em; } .container input:hover { cursor: pointer; } .container input:focus { width: 300px; opacity: 1; cursor: text; } .container input:focus ~ .search { right: -250px; background: #151515; z-index: 6; } .container input:focus ~ .search::before { top: 0; left: 0; width: 25px; } .container input:focus ~ .search::after { top: 0; left: 0; width: 25px; height: 2px; border: none; background: white; border-radius: 0%; transform: rotate(-45deg); } .container input::placeholder { color: white; opacity: 0.5; font-weight: bolder; }

时间: 2024-04-28 10:27:00 浏览: 13

这段代码是一个简单的搜索框样式，使用了CSS3的动画效果。其中包括一个圆形搜索按钮（红色），点击按钮后输入框会从小圆圈扩大为长方形，并且搜索按钮会移动到输入框的左侧，并且变为白色。同时，输入框的背景颜色也会变成一个深色，并且输入框的宽度会变宽，以便用户能够输入更多的内容。在输入框中输入搜索内容时，输入框的文本颜色变为白色，而搜索按钮的形状也会变化，以增强用户的反馈感。

<template> <div id="app" class=""> <router-view></router-view> </div> </template> <script> export default { name: "app", }; </script> <style lang="scss"> *{ padding: 0; margin:0; box-sizing: border-box; } html,body{ width: 100%; height: 100%; } #app{ height:100%; } body { padding: 0; margin: 0; } </style>

这段代码是一个 Vue.js 的组件，包含一个模板、一个脚本和一个样式表。模板中定义了一个包含 router-view 的 div 元素，这是 Vue Router 中用于展示路由组件的占位符。脚本中导出了一个名为 app 的组件，其中没有任何逻辑。样式表中定义了一些基本样式，如全局的盒模型、页面宽高为100%等，并将 #app 元素的高度设置为100%。需要注意的是，这段代码中使用了 SCSS 语法，需要在项目中使用 SCSS 预处理器进行编译。

* { margin: 0; padding: 0; } .box { width: 500px; height: 30px; margin: 200px auto; } .big { width: 400px; height: 100%; background-color: blue; position: relative; box-sizing: border-box; float: left; } .small { width: 0; height: 100%; background-color: deeppink; } </style> </head> <body> <div class="box"> <div class="big"> <div class="small"></div> </div> <span>0%</span> </div>实现拖拽进度条，在后面显示百分比并且保留两位小数

好的，可以使用 JavaScript 和 CSS 来实现拖拽进度条和显示百分比。以下是一个简单的实现： HTML 代码： ```html <div class="box"> <div class="big"> <div class="small"></div> </div> <span id="percent">0%</span> </div> ``` CSS 代码： ```css * { margin: 0; padding: 0; } .box { width: 500px; height: 30px; margin: 200px auto; } .big { width: 400px; height: 100%; background-color: blue; position: relative; box-sizing: border-box; float: left; } .small { width: 0; height: 100%; background-color: deeppink; position: absolute; top: 0; left: 0; z-index: 1; } ``` JavaScript 代码： ```javascript const box = document.querySelector('.box'); const big = document.querySelector('.big'); const small = document.querySelector('.small'); const percent = document.querySelector('#percent'); let isDragging = false; const updatePercent = () => { const percentValue = (small.clientWidth / big.clientWidth) * 100; percent.textContent = percentValue.toFixed(2) + '%'; }; small.addEventListener('mousedown', () => { isDragging = true; }); document.addEventListener('mousemove', e => { if (isDragging) { const x = e.clientX - box.offsetLeft - (small.clientWidth / 2); const maxX = big.clientWidth - small.clientWidth; if (x < 0) { small.style.left = '0'; } else if (x > maxX) { small.style.left = maxX + 'px'; } else { small.style.left = x + 'px'; } updatePercent(); } }); document.addEventListener('mouseup', () => { isDragging = false; }); ``` 首先，我们在 HTML 中创建了一个包含一个大的蓝色块和一个小的粉色块的进度条。我们还添加了一个用于显示百分比的 `<span>` 元素。然后，我们使用 CSS 来定义样式。我们将 `.small` 元素定位为绝对位置，使其可以在 `.big` 元素内部移动。我们还将其 `z-index` 属性设置为 1，以确保它显示在 `.big` 元素的顶部。最后，我们使用 JavaScript 来实现拖拽功能和百分比更新。我们添加了 `mousedown`、`mousemove` 和 `mouseup` 事件监听器来检测鼠标拖拽操作，并更新小块的位置和百分比显示。我们还使用 `toFixed()` 方法将百分比值保留两位小数。

相关推荐

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

详解CSS3中的box-sizing（content-box与border-box）

关于box-sizing的全面理解

最新推荐

ADSP-BF533的例程源码29：FIR信号处理源码

中文翻译Introduction to Linear Algebra, 5th Edition 2.1节

管理建模和仿真的文件

识别MATLAB微分方程求解中的混沌行为：分析非线性方程混沌行为的实用技巧

physon如何做ERP系统

zigbee-cluster-library-specification

"互动学习：行动中的多样性与论文攻读经历"

探索MATLAB微分方程求解中的分岔分析：揭示方程动态行为的秘密

ic验证工作中如何在平台中加入发数的总数？

JSBSim Reference Manual