CSS 3 transition実戦Demo

12013 ワード

CSS 3およびHTML 5振り回し記

きほんりろん

transition5つの属性があります.

property:属性、どのCSS属性を指定して移行するか、all全属性を使用して有効にすることができる

duration:持続時間

timing-function:遷移関数は、linear(等速)、ease-in(漸現)、ease-out(漸隠)、ease-in-out(漸顕漸隠)などがある.

delay:遅延ですが、実行開始までの待ち時間です

総合書き方:transition: 直接例を挙げて、コードは自分で1つのhtmlを新しく作って保存して、主流のブラウザで実行すればいいです
LiveDemo
コードブロック


<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>transition Demotitle>
		<style>
		/* transition:    ;*/
			.demobox {
				position: relative;
				left: 25%;
				top:300px;
				border-style: solid;
				border-width: 1px;
				display: block;
				width: 100px;
				height: 100px;
				background-color: #56A892;
				-webkit-transition: all 1s ease-in-out .5s;
				        transition: all 1s ease-in-out .5s;
			}

			.demobox:hover {
				background-color: #fcc;
				width: 200px;
				height: 200px;
				border-radius: 10px;
				background-color: #2AA2E6;
				-webkit-transform: rotate(180deg) skew(-5deg,150deg) scale(.5);
				-ms-transform: rotate(180deg) skew(-5deg,150deg) scale(.5);
				transform: rotate(180deg) skew(-5deg,150deg) scale(.5);
			}

			.btn{
				width:200px;
				height:50px;
				box-shadow: 2px 2px 2px rgba(38,55,64,.9);
				-webkit-transition: all 2s ease-in-out ;
				        transition: all 2s ease-in-out ;
			}

			.btn:hover{
				color:#F5F5F5;
				font-size:bolder;
				background: linear-gradient(-45deg, #36C783, #2A9DC8 );
				box-shadow: 2px 2px 5px #ABABB4 inset;
				-webkit-transform: translateX(250px) translateY(100px) rotate(45deg);
				    -ms-transform: translateX(250px) translateY(100px) rotate(45deg);
				        transform: translateX(250px) translateY(100px) rotate(45deg);
			}
		style>
	head>
	<body>
		<p>              .hover  p>
		<div class="demobox">div>

		<button type="button" class="btn">       button>
	body>
html>

css文字またはdivボックスの水平垂直中央を実現する方法

CSS 3メディア照会