前端大本营

HTML5,CSS3,Responsive,资料站

利用CSS3动画制作你的动画加载页面

制作工具
  1. WOW.js
  2. Animate.css
制作方法

将css及js加载到页面

<link rel="stylesheet" type="text/css" media="all" href="/js/animate.css" />
<script type="text/javascript" src="/js/wow.min.js"></script>

在HTML中需要加载动画的部分,添加class名

<div class="wow slideInLeft"></div>  
<div class="wow slideInRight"></div>

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>  
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div> 

执行js

var wow = new WOW({  
    boxClass: 'wow',  /*指定动画元素的class名*/
    animateClass: 'animated',  
    offset: 0,  /*距离可视区域多少开始执行动画*/
    mobile: true,  /*是否在移动设备上执行动画*/
    live: true  /*异步加载的内容是否有效*/
});  
wow.init();  
Tags: ,
Posted in 精彩内容 | 利用 CSS3 技术制作屏幕滚动 动画加载内容的效果已关闭评论
2017 11/08 周三

CSS3 中的一些黑科技

1、鼠标移进网页里,不见了= =
*{
    cursor: none!important;
}
2、简单的文字模糊效果
*{ 
    color: transparent;
    text-shadow: #111 0 0 5px;
}
3、多重边框
.div {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
    height: 200px;
    margin: 50px auto;
    width: 400px
}
4、实时编辑CSS
<!DOCTYPE html>
<html>
    <body>
        <style style="display:block" contentEditable>
            body { color: blue }
        </style>
    </body>
</html>
5、CSS中简单运算
.div{
    width: calc(100% - 500px);
}
6、border-radius 因为基本上很多人都是这么用的:
.div {
     border-radius: 4px;
}
稍微高端一点的是这样的:
.div {
    border-radius: 4px 6px 6px 4px;
}

然而,终极黑科技是这样用的:
.div {
     border-radius: 5px 5px 3px 2px / 5px 5px 1px 3px;
}
border-radius 它可以赋8个值:
斜线前面的影响的是水平方向,斜线后面影响的是垂直方向,
各个数字就分别代表四个不一样的方向。
7、outline-offset 在input下写CSS的时候对下面的语句会很熟悉:
input {
    outline : none;
}

input:focus {
    outline : none;
}
这就是将input输入框去掉默认的蓝线框的方法。 CSS中还有一个outline-offset属性,在这个属性中,你可以设置默认线框的距离:
input {
    outline-offset: 4px ;
}
 

调节该属性值的大小你就可以看到outline的距离变化了。
Tags:
Posted in CSS最新技术 | CSS3 中的一些黑科技已关闭评论

使用过苹果Mac系统的人都知道Dock导航, 我们利用CSS3的过渡创建一个Dock导航

示例
CSS代码
body {
	margin: 0;
	padding: 0;
	font: normal 14px/1.5 "PT Sans", Helvetica, Arial, sans-serif;
	background: rgb(30, 30, 30);
	color: rgb(220, 220, 220);
}

.wrapper {
	position: absolute;
	top: 48%;
	left: 50%;
	width: 660px;
	height: 340px;
	margin: -190px 0 0 -330px;
}

.content {
	position: relative;
	width: 660px;
	height: 340px;
	overflow: hidden;		
	background: rgb(15, 15, 15) url(images/bg.jpg) no-repeat center bottom;
	border-radius: 10px;
	box-shadow: 0 1px 10px rgb(10, 10, 10);
}

h1 {
	margin-top: 1.5em;
	color: rgba(255, 255, 255, .9);
	line-height: 1;
	font-size: 70px;
	text-align: center;
	font-weight: bold;
	text-shadow: 0px 1px 5px rgb(255, 160, 55), 0px 1px 15px rgb(255, 160, 55);
	cursor: default;
}

h1 em {
	display: inline-block;
	font-size: .29em;
	font-style: normal;
	vertical-align: top;
	margin-left: -.4em;
	padding-top: .46em;
}

/* css dock style*/
@-webkit-keyframes bounce {
	  0% { -webkit-transform: translateY(0); }
	100% { -webkit-transform: translateY(-20px); }
}

@-moz-keyframes bounce {
	  0% { -moz-transform: translateY(0); }
	100% { -moz-transform: translateY(-20px); }
}
@-o-keyframes bounce {
	  0% { -o-transform: translateY(0); }
	100% { -o-transform: translateY(-20px); }
}

@-ms-keyframes bounce {
	  0% { -ms-transform: translateY(0); }
	100% { -ms-transform: translateY(-20px); }
}
@keyframes bounce {
	  0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
}

.dock {
	position: absolute;
	bottom: 0;
	z-index: 10;
	width: 100%;
	text-align: center;
	font: normal 14px/1 'Lucida Grande', Arial, sans-serif;
}

.dock ul {
	position: relative;
	display: inline-block;
	padding: 0 5px;
	margin: 0;
}
.dock li {
	display: inline-block;
	position: relative;
	margin: 0 1px;
	margin-bottom: 15px;
	vertical-align: baseline;
	-webkit-box-reflect: below -16px -webkit-gradient(
		linear, left top, left bottom,
		from(transparent),
		color-stop(91%, rgba(255, 255, 255, .1)),
		color-stop(91.01%, transparent),
		to(transparent)
	);
}

.dock a {
	display: inline-block;
	cursor: default;
	outline: none;
}
.dock li:target a {
	-webkit-animation: bounce .3s 6 alternate ease-out;
	-moz-animation: bounce .3s 6 alternate ease-out;
	-o-animation: bounce .3s 6 alternate ease-out;
	-ms-animation: bounce .3s 6 alternate ease-out;
	animation: bounce .3s 6 alternate ease-out;
}
.dock li:after {
	content: " ";
	position: absolute;
	bottom: -5px;
	left: 50%;
	width: 5px;
	height: 5px;
	opacity: 0;
	visibility: hidden;
	background-color: rgba(255, 255, 255, .8);
	margin-left: -2px;
	border-radius: 5px;
	box-shadow:
		inset 0 1px 3px rgba(75, 255, 255, .4),
		0 0 4px rgba(75, 255, 255, .5),
		0 -1px 7px rgb(75, 255, 255);
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-o-transition: opacity .5s;
	-ms-transition: opacity .5s;
	transition: opacity .5s;
}
.dock li:target:after {
	visibility: visible;
	opacity: 1;
}
.dock em {
	position: absolute;
	top: -34px;
	left: 50%;
	display: none;
	width: 150px;
	margin-left: -75px;
	text-align: center;
}
.dock em:after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid rgba(0, 0, 0, .6);
	border-bottom: none;
}
.dock em span {
	display: inline-block;
	padding: 5px 12px;
	font-size: 14px;
	font-style: normal;
	color: #FFF;
	background: #000;
	background: rgba(0, 0, 0, .6);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
	border-radius: 12px;
}

.dock li:hover em, 
.dock li a:focus em {
	display: block;
}
.dock img {
	width: 86px;
	height: auto;
	border: none;
	-webkit-transition: width .2s, height .2s;
	-moz-transition: width .2s, height .2s;
	-o-transition: width .2s, height .2s;
	-ms-transition: width .2s, height .2s;
	transition: width .2s, height .2s;
}

.dock li:hover img, 
.dock li a:focus img {
	width: 96px;
}

.dock li:active img {
	opacity: .9;
}	
.dock-container {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.dock-panel {
	width: 560px;
	height: 100px;
	background: -webkit-linear-gradient(to bottom, #eee 0%, #eee 28%,#bbb 51%,#bbb 100%);
	background: linear-gradient(to bottom, #eee 0%, #eee 28%,#bbb 51%,#bbb 100%);
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;
	backface-visibility: visible;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-moz-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-o-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	-ms-transform: perspective(800px) rotate3d(1, 0, 0, 50deg);
	position: relative;
	left: 50%;
	margin-left: -280px;
	bottom: -50px;
}
HTML代码
<div class="wrapper">
		<div class="content">
			<h1>CSS Dock</h1>
			<div class="dock">
				<ul>
					<li id="mail">
						<a href="#mail">
							<em><span>Mail</span></em>
							<img src="images/icon-mail.png" alt="Mail">
						</a>
					</li>
					<li id="ical">
						<a href="#ical">
							<em><span>iCal</span></em>
							<img src="images/icon-ical.png" alt="iCal">
						</a>
					</li>
					<li id="addressbook">
						<a href="#addressbook">
							<em><span>Address Book</span></em>
							<img src="images/icon-addressbook.png" alt="Address Book">
						</a>
					</li>
					<li id="iphoto">
						<a href="#iphoto">
							<em><span>iPhoto</span></em>
							<img src="images/icon-iphoto.png" alt="iPhoto">
						</a>
					</li>
					<li id="idisk">
						<a href="#idisk">
							<em><span>iDisk</span></em>
							<img src="images/icon-idisk.png" alt="iDisk">
						</a>
					</li>
				</ul>
			</div>
			<div class="dock-stage">
					<div class="dock-container">
						<div class="dock-panel"></div>
					</div>
				</div>
		</div>
	</div>
Tags:
Posted in CSS最新技术 | CSS3 过渡创建 Dock 导航已关闭评论
2017 06/23 周五

CSS3 制作旋转按钮

利用CSS3的变形属性,我们可以制作很多原来只能用Flash才能做出来的效果
比如今天展示的这些按钮都是通过CSS3和简单的图片就可以实现的

示例
CSS代码
ul:before,
ul:after {
	display: table;
	content: "";
}
ul:after {
	clear: both;
	overflow: hidden;
}

ul {
	zoom: 1;
	list-style: none outside none;
	margin-bottom: 30px;
}

ul li {
	float: left:
	margin: 10px;
}
ul a {
	display: block;
	float: left;
	text-decoration: none;
}
ul img {
	border: 0;
}
h1 {
	margin: 2em 0;
}

#socialicons img,
#socialicons2 img{ 
	-moz-transition: all 0.8s ease-in-out;
	-webkit-transition: all 0.8s ease-in-out;
	-o-transition: all 0.8s ease-in-out;
	-ms-transition: all 0.8s ease-in-out;
	transition: all 0.8s ease-in-out;
}

#socialicons img:hover{
	-moz-transform: rotate(360deg) scale(1.5);
	-webkit-transform: rotate(360deg) scale(1.5);
	-o-transform: rotate(360deg) scale(1.5);
	-ms-transform: rotate(360deg) scale(1.5);
	transform: rotate(360deg) scale(1.5);
}



#socialicons2 img:hover{ 
	-moz-transform: rotate(-360deg) scale(.7);
	-webkit-transform: rotate(-360deg) scale(.7);
	-o-transform: rotate(-360deg) scale(.7);
	-ms-transform: rotate(-360deg) scale(.7);
	transform: rotate(-360deg) scale(.7);
}

HTML代码
<ul id="socialicons">
	<li><a href="#"><img src="images/rss.png" alt="" /></a></li>
	<li><a href="#"><img src="images/delicious.png" alt="" /></a></li>
	<li><a href="#"><img src="images/facebook.png" alt="" /></a></li>
	<li><a href="#"><img src="images/twitter.png" alt="" /></a></li>
	<li><a href="#"><img src="images/yahoo.png" alt="" /></a></li>
</ul>
<h1>逆时针旋转360度缩小0.7倍</h1>
<ul id="socialicons2">
	<li><a href="#"><img src="images/rss.png" alt="" /></a></li>
	<li><a href="#"><img src="images/delicious.png" alt="" /></a></li>
	<li><a href="#"><img src="images/facebook.png" alt="" /></a></li>
	<li><a href="#"><img src="images/twitter.png" alt="" /></a></li>
	<li><a href="#"><img src="images/yahoo.png" alt="" /></a></li>
</ul>
Tags: ,
Posted in CSS最新技术 | CSS3 制作旋转按钮已关闭评论

不要问我为什么要用重复渐变,我也是头一次听说,不过看了效果非常不错,所以推荐给大家一起学习

示例
CSS代码
.body_2017062102{
  background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
  background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
  background-size: 100% 30px;
  position: relative;
  width:100%;
  height:500px;
}
.body_2017062102:before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 4px;
  border-left: 4px double #FCA1A1;
  position: absolute;
  left: 30px;
}
HTML代码
<div class="body_2017062102"></div>
Tags:
Posted in CSS最新技术, 未分类 | CSS3 利用重复渐变制作纸张背景已关闭评论

现在各种各样的CSS3 样式按钮被设计师设计出来, 我们提供一些比较常用的按钮样式,供大家使用

CSS代码
.body_bg{
  background-color: #282828;
padding:30px;
  background-image: 
	-webkit-radial-gradient(black 15%, transparent 16%), 
	-webkit-radial-gradient(black 15%, transparent 16%), 
	-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
	-webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
  background-image: 
	radial-gradient(black 15%, transparent 16%), 
	radial-gradient(black 15%, transparent 16%), 
	radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%), 
	radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%);
  background-position: 0 0px, 8px 8px, 0 1px, 8px 9px;
  background-size: 16px 16px;
}
@font-face {
  font-family: 'icomoon';
  src:url('common/font/icomoon.eot');
  src:url('common/font/icomoon.eot?#iefix') format('embedded-opentype'),
	url('common/font/icomoon.svg#icomoon') format('svg'),
	url('common/font/icomoon.woff') format('woff'),
	url('common/font/icomoon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
.controls_button{
  width: 400px;
  margin:40px auto;
}
.button{
  width: 70px;
  height: 70px;
  margin-right: 90px;
  font-size:0;
  border-radius: 50%;
  border:none;
  box-shadow: 
    0 1px 5px rgba(255,255,255,.5) inset,
    0 -2px 5px rgba(0,0,0,.3) inset,
    0 3px 8px rgba(0,0,0,.8);
  background: -webkit-radial-gradient( circle at top center, #f28fb8, #e982ad, #ec568c);
  background: radial-gradient(circle at top center, #f28fb8, #e982ad, #ec568c);
}
.button:nth-child(3){
  margin-right: 0;
}
.button:after{
  font-family: 'icomoon';
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-size: 36px;
  content: "\21";
  color: #dd5183;
  text-shadow:0 3px 10px #f1a2c1,0 -3px 10px #f1a2c1;
}
.button:nth-child(2):after{
  content: "\22";
}
.button:nth-child(3):after{
  content: "\23";
}
.button:hover:after{
  color: #fff;
  text-shadow:0 1px 20px #fccdda, 1px 0 14px #fccdda;
}
.button:active{
  box-shadow: 
    0 2px 7px rgba(0,0,0,.5) inset,
    0 -3px 10px rgba(0,0,0,.1) inset,
    0 1px 3px rgba(255,255,255,.5);
  background: -webkit-radial-gradient(circle at top center,  #f28fb8, #e982ad, #ec568c);
  background: radial-gradient(circle at top center, #f28fb8, #e982ad, #ec568c);
}
HTML代码
<div class="controls_button">
		<button type="button" class="button">Chrome</button>
		<button type="button" class="button">Firefox</button>
		<button type="button" class="button">IE</button>
	</div>
Tags:
Posted in CSS最新技术 | CSS3 利用径向渐变制作圆形图标按钮已关闭评论

默认状态

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

#scroll-all-1 .scroll-box{
	overflow: auto;
}

自定义纵版

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

.s2.scroll-box::-webkit-scrollbar{
	width: 5px;
	background: #9aadfc;
}
.s2.scroll-box::-webkit-scrollbar-thumb{
	background: #435295;
	border-radius: 2px;
}

自定义横版

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

.s3.scroll-box::-webkit-scrollbar{
	width: 5px;
	background: #a3d2a0;
}
.s3.scroll-box::-webkit-scrollbar:horizontal{
	height: 5px;
	background: #a3d2a0;
}
.s3.scroll-box::-webkit-scrollbar-thumb{
	background: #479443;
	border-radius: 2px;
}
.s3.scroll-box::-webkit-scrollbar-thumb:horizontal{
	background: #479443;
	border-radius: 2px;
}

自定义纵横样式

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

.s4..scroll-box::-webkit-scrollbar:horizontal{
	height: 5px;
	background: #a3d2a0;
}
.s4.scroll-box::-webkit-scrollbar-thumb{
	background: #435295;
	border-radius: 2px;
}
.s4.scroll-box::-webkit-scrollbar{
	width: 5px;
	background: #9aadfc;
}
.s4.scroll-box::-webkit-scrollbar-thumb:horizontal{
	background: #479443;
	border-radius: 2px;
}

自定义滚动条及背景色

刘备的人马刚进雒城,有探报来报,说马超领兵攻打葭萌关。现在是关口吃紧。
哎哟,几句话可把刘备给紧张坏了,怎么马超来了?他这是从哪儿来呀?刚说了一声“再探。”把这个探报打发走工夫不大,又有探事马来报,说葭萌关吃紧。
日接三报。
刘备可有点儿坐不住啦,他赶快向孔明求计呀,说:“这可怎么办呢?开始听到禀报我还不信,马超怎么能来打我的葭萌关呢?难道他归顺了汉中张鲁啦?哎呀~~~真是马孟起不成嘛。就算果真是他,马超也不能来打我的葭萌关呐,因为我和他父亲马腾~是同殿之臣呐。他父亲被曹操所害,我还曾经给马超去过信呐。他见了我的书信之后是当即起兵报仇。我本想啊~~配合马超兵取许昌,由于曹操防备甚严,我没得出机会来动手哇。今天他怎么能翻过脸来~打我的葭萌关呢?这到底是怎么回事呢?”还真把刘备给闹糊涂了。
难道真是马超来取葭萌关吗?一点儿都不错。这么长时间,这马超哪儿去了?
自从曹操定计呀,把他父亲由西凉给诓到了许昌,不是把马腾给杀了嘛,马超呢~尽起西凉兵马,请了韩遂助他一臂之力,兵发许昌要大报父仇。在潼关~与曹操大战。把曹操杀得是割须弃袍啊,渭水避箭。后来,他手下的大将许褚是裸衣战马超啊,杀了一个天昏地暗神鬼皆惊。曹丞相又心生了一计,这才抹书间韩遂,使马超与韩遂反目。从那儿马超就败下来了,败得很惨呐。带着他手下的大将庞德,还有他弟弟马岱,只剩下了百八十人了,一直败到羌胡地带。羌胡地带的百姓呢~~都很拥戴马超。两年的工夫,马超在羌胡一带是重整旗鼓,有凑齐了两万多人马。他还想大报父仇,以雪平生之恨。为此他由羌胡领兵就杀出来了。杀到陇西一带,在陇西诸郡,他是攻城占地呀。见城就打打进去就杀呀,因为这些地方都归曹操管辖呀。

.s5.scroll-box::-webkit-scrollbar{
	width: 5px;
	background: #9aadfc;
}
.s5.scroll-box::-webkit-scrollbar-thumb{
	background: #435295;
	border-radius: 2px;
}
.s5.scroll-box::-webkit-scrollbar-track-piece:start{
	background: #9aadfc;
}
.s5.scroll-box::-webkit-scrollbar-track-piece:end{
	background: #a3d2a0;
}
Tags: ,
Posted in 本站原创 | 教你如何自定义Android和iPhone 浏览器中显示滚动条已关闭评论
ruby-align 指定注音对齐方式 —— CSS3 参考 注音

ruby-align 说明

ruby-align 指定注音对齐方式时使用。

属性值

auto 自动。(默认值) start 对照的文本的开始处对齐。 left 对照的文本的左侧处对齐。 center 对照的文本的中间处对齐。 end 对照的文本的末端处对齐。 right 对照的文本的右侧处对齐。 distribute-letter 注音比对照的文本短的时候,注音宽度按照对照文本自动按比例划分,反之相同。 distribute-space 同上相同 line-edge 功能基本和auto相同
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ruby-align </title>
<style>
ruby.sample1 {ruby-align:auto;}
ruby.sample2 {ruby-align:start;}
ruby.sample3 {ruby-align:left;}
ruby.sample4 {ruby-align:center;}
ruby.sample5 {ruby-align:end;}
ruby.sample6 {ruby-align:right;}
ruby.sample7 {ruby-align:distribute-letter;}
ruby.sample8 {ruby-align:distribute-space;}
ruby.sample9 {ruby-align:line-edge;}
ruby {background-color:pink;}
rt {background-color:yellow;} 
</style>

</head>

<body>
<p><ruby class="sample1">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:auto;)</p>
<p><ruby class="sample2">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:start;)</p>
<p><ruby class="sample3">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:left;)</p>
<p><ruby class="sample4">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:center;)</p>
<p><ruby class="sample5">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:end;)</p>
<p><ruby class="sample6">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:right;)</p>
<p><ruby class="sample7">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:distribute-letter;)</p>
<p><ruby class="sample8">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:distribute-space;)</p>
<p><ruby class="sample9">中国<rt>ちゅうごく</rt></ruby><ruby class="sample1">日本<rt>japan</rt></ruby>×<ruby class="sample1">England<rt>英格兰</rt></ruby>(ruby-align:line-edge;)</p>
</body>
</html>
实例图  ruby-align
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 注音 | ruby-align 指定注音对齐方式 —— CSS3 参考 注音已关闭评论

ruby-position 说明

ruby-position 指定注意的位置时使用。<设置或检索通过rt对象指定的注释文本或发音指南(参考ruby对象)的位置。>

属性值

before 注音文本会在基础文字上面表示。(默认值) after 注音文本会在基础文字下面表示。 right 注音文本会在基础文字右面表示。
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ruby-position </title>
<style>
ruby.sample1 {ruby-position:before;}
ruby.sample2 {ruby-position:after;}
ruby.sample3 {ruby-position:right;}	
</style>

</head>

<body>
<p><ruby class="sample1">新幹線<rt>しんかんせん</rt></ruby></p>
<p><ruby class="sample2">新干线<rt>xinganxian</rt></ruby></p>
<p><ruby class="sample3">高铁<rt>High-speed rail</rt></ruby></p>
</body>
</html>
实例图  ruby-position
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 注音 | ruby-position 指定注音的位置 —— CSS3 参考 注音已关闭评论

text-shadow 说明

text-shadow属性, 为文字追加阴影 。<向文本设置阴影。>

属性值

none 不为文本追加阴影。(默认值) h-shadow 阴影水平方向的距离 <必需。水平阴影的位置。允许负值。> v-shadow 阴影垂直方向的距离 <必需。垂直阴影的位置。允许负值。> blur 阴影渐变半径 <可选。模糊的距离。> color 阴影的颜色 <可选。阴影的颜色。> 以上的属性可以作为一个数组,复数阴影设置的时候,可以以 , 来区分。 如果想给元素div追加阴影的场合,请参考 box-shadow
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style>
h1.sample1 {text-shadow: 5px 5px 2px blue;}
h1.sample2 {text-shadow: 5px 5px 2px blue , -5px -5px 1px red;}
</style>

</head>

<body>
<h1 class="sample1">text-shadow例1</h1>
<h1 class="sample2">text-shadow例2</h1>	
</body>
</html>
实例图  text-shadow
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 文本单元 | text-shadow 为文字追加阴影 —— CSS3 参考 文本单元已关闭评论