CSS3 transition 渐变特效

最新推荐文章于 2023-07-22 18:18:14 发布

Python User

最新推荐文章于 2023-07-22 18:18:14 发布

阅读量834

点赞数

分类专栏： CSS/CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_44684357/article/details/109755350

版权

CSS/CSS3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

transition的使用需要和 hover 搭配使用
transition：属性持续的时间(s) ease-in/ease(曲线规律) 多少秒后开始(s)
transition：all 持续时间(s) // 简易写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background: pink;
			position: relative;
			top: 100px;
			margin: 0 auto;
			transition: width 0.5s ease-in, 
						border-radius 0.5s ease-in,
						height 0.5s ease-in;
		}
		div:hover {
			width: 400px;
			height: 400px;
			border-radius: 50%
		}
		input {
			position: fixed;
			top: 50px;
			left:50%;
			margin-left: -50px;
			width: 100px;
			height: 30px;
			background: skyblue;
			border: 1px solid #ddd;
			border-radius: 10px;
			outline: none;           /* 去除选中状态框 */
			color: #000;
			/*transition: background 0.3s ease-in,        /*复杂方式实现*/ /*
						color 0.3s ease-in; */   
			transition: all 0.3s;                       /* 简易方式实现 */
		}
		input:hover {
			background: blue;
			color: #fff;
		}
	</style>
</head>
<body>
	<div></div>
	<input type="button" value="按钮">
</body>
</html>

Python User

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 transition 渐变特效

transition的使用需要和 hover 搭配使用transition：属性持续的时间(s) ease-in/ease(曲线规律) 多少秒后开始(s)transition：all 持续时间(s) // 简易写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> d
复制链接

扫一扫

专栏目录