html+css写一个悬浮效果的输入框
时间: 2023-06-02 18:05:40 浏览: 128
好的,关于HTML和CSS写一个悬浮效果的输入框,可以采用CSS中的:hover属性和transition属性来实现。具体实现方式如下:
HTML代码:
```
<input type="text" placeholder="请输入内容">
```
CSS代码:
```
input[type="text"] {
width: 200px;
height: 30px;
border: none;
border-radius: 5px;
padding: 5px;
background-color: #f2f2f2;
transition: all 0.3s ease-in-out;
}
input[type="text"]:hover {
box-shadow: 0 0 5px #bfbfbf;
transform: translateY(-5px);
}
```
通过设置:hover伪类,当鼠标悬停在输入框上时,会应用:hover后的样式,这里使用了box-shadow属性添加一个阴影效果,同时使用transform属性来移动输入框,实现悬浮效果。同时使用transition属性实现一个平滑的动画效果。
希望能对您有所帮助!
相关问题
给我写一个可拖动悬浮输入框的web前端登录界面
当然,可以!以下是一个使用 HTML、CSS 和 JavaScript 编写的可拖动悬浮输入框的登录界面:
```
<!DOCTYPE html>
<html>
<head>
<style>
.login-box {
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.drag-header {
width: 100%;
height: 50px;
background-color: #ccc;
cursor: move;
}
.input-group {
padding: 20px;
}
.form-control {
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
padding-left: 10px;
}
.btn {
width: 100%;
height: 40px;
background-color: #4caf50;
color: #fff;
border: 0;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-box">
<div class="drag-header"></div>
<form class="input-group">
<input type="text" class="form-control" placeholder="Username">
<input type="password" class="form-control" placeholder="Password">
<button class="btn">Submit</button>
</form>
</div>
<script>
let isDragging = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
const dragHeader = document.querySelector(".drag-header");
const loginBox = document.querySelector(".login-box");
dragHeader.addEventListener("mousedown", dragStart);
dragHeader.addEventListener("mouseup", dragEnd);
dragHeader.addEventListener("mousemove", drag);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
isDragging = true;
}
function dragEnd(e) {
isDragging = false;
}
function drag(e) {
if (isDragging) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, loginBox);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform
用HTML、CSS、Javascript写todolist
好的,我可以帮你解答这个问题。
首先,我们可以使用HTML创建一个文档结构,包括一个输入框用于输入待办事项和一个按钮用于添加待办事项,还可以创建一个ul元素用于展示待办事项列表。代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<style>
ul {
list-style-type: none;
padding: 0;
}
</style>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="todoInput">
<button onclick="addTodo()">Add</button>
<ul id="todoList"></ul>
<script src="todo.js"></script>
</body>
</html>
```
接下来,我们使用JavaScript编写addTodo函数,用于将输入框中的内容添加到待办事项列表中。代码如下:
```javascript
function addTodo() {
var todoInput = document.getElementById("todoInput");
var todoList = document.getElementById("todoList");
if (todoInput.value) {
var li = document.createElement("li");
li.innerHTML = todoInput.value;
todoList.appendChild(li);
todoInput.value = "";
}
}
```
最后,我们可以使用CSS为待办事项列表添加样式,例如添加鼠标悬浮效果和删除线效果。代码如下:
```css
li:hover {
background-color: #eee;
}
li.checked {
text-decoration: line-through;
}
```
这样,我们就完成了一个简单的todolist应用。完整的代码可以保存在todo.js文件中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)