CSS特效

最新推荐文章于 2020-02-10 10:10:57 发布

一麻袋小猫

最新推荐文章于 2020-02-10 10:10:57 发布

阅读量256

点赞数

分类专栏： CSS特效文章标签： css html

本文链接：https://blog.csdn.net/Zmongo/article/details/104126028

版权

CSS特效专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS边框三角形

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			position: relative;
			width: 200px;
			height: 100px;
			background-color: pink;
			margin: 100px auto;
		}
		p {
			position: absolute;
			top: -40px;
			left: 50%;
			margin-left: -20px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 20px;
			border-color: transparent transparent pink transparent;
			font-size: 0;
			line-height: 0;
			
		}
	</style>
</head>
<body>
	<div>
		<p></p>
	</div>
</body>
</html>

形成三角形的代码：
在这里插入图片描述
效果图：

推拉门微信导航栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}	
		li {
			list-style: none;
		}
		a {
			text-decoration: none;
		}
		body {
			/*横向平铺*/
			background: url(images/wx.jpg) repeat-x;
		}
		.nav {
			margin:20px 0;
		}
		.nav li {
			float: left;
			margin-left: 5px;
		}
		.nav a {
			display: inline-block;
			height: 33px;
			background: url(images/to.png) no-repeat;
			padding-left: 10px;
		}
		.nav a span {
			display: inline-block;
			height: 33px;
			background: url(images/to.png) no-repeat right;
			padding-right: 10px;
			line-height: 33px;
			color: #fff;
			font-size: 12px;
		}
		/*鼠标经过了a链接首先换背景图片，然后 里面的span也要换*/
		.nav a:hover,
		.nav a:hover span {
			background-image: url(images/ao.png);
		}
		
	</style>
</head>
<body>
	<div class="nav">
		<ul>
			<li>
				<a href="#">
					<span>首页</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>帮助与反馈</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>开放平台</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>公众平台</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span>关于我们</span>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

推拉门重要代码部分
推拉门步骤：

a 设置背景左侧，padding撑开合适宽度。
span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度。
之所以a包含span就是因为整个导航都是可以点击的。

CSS3过渡动画

过渡动画：是从一个状态逐渐的过渡到另外一个状态
transition: 要过渡的属性花费时间运动曲线何时开始；

linear 匀速； ease逐渐慢下来；ease-in 加速；eas-out 减速； ease-in-out先加速后减速

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 400px;
			height: 150px;
			background-color: pink;
			/*transition: 要过渡的属性 花费时间 运动曲线 何时开始；*/
			transition: width 1s ease 0s; 
		}
		div:hover {
			width: 600px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

如果有多组属性，我们用逗号隔开。


			transition: width 1s ease 0s, height 1s ease 0s; 
		}
		div:hover {
			width: 600px;
			height: 300px;

想要所有属性都改变：


		/*	transition: width 1s ease 0s, height 1s ease 0s, background-color 1s ease 0s; */
			transition: all 1s ease 0s;

可以简写为： transition: all 1s;

一麻袋小猫

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS特效

CSS边框三角形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { position: relative; width: 200px; ...
复制链接

扫一扫