CSS3过渡小案例:折扇

CSS3过渡小案例:折扇

    • 简单应用:利用鼠标经过后盒子阴影和上边距属性的改变,制作一个简单的页面效果
    • 小案例:折扇案例

CSS3的过渡效果:
  通过 CSS3的过渡效果,我们可以在不使用 Flash 动画或 JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
  CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:
   过渡效果添加的具体 CSS 属性
   效果时长
具体用法:
transition:transition-property transition-duration transition-timing-function transition-delay;

transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。

简单应用:利用鼠标经过后盒子阴影和上边距属性的改变,制作一个简单的页面效果

		img {
     
			margin-top: 5px;
			margin-left: 40px;
			height: 200px;
			width: 200px;
			display: inline-block;
			transition: box-shadow 0.8s ease 0.1s;
		}
		 img:hover {
     
			margin-top: 3px;
			box-shadow: 0px 9px 10px 10px rgba(201,2,33,0.9);
		 }

小案例:折扇案例

鼠标经过后,折扇慢慢展开的页面效果

案例展示图片:
CSS3过渡小案例:折扇_第1张图片

CSS3过渡小案例:折扇_第2张图片
代码如下:


<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			#box {
      
				width: 600px;
				height: 300px;
				border-bottom: 2px solid black;
				margin: 100px auto;
				position: relative;
			}
			.child {
      
				width: 20px;
				height: 120px;
				background-color: pink;
				left: calc(50% - 10px);
				top: calc(100% - 160px);
				position: absolute;
			}
			#box .child:nth-child(1) {
      
				background-color: skyblue;
			}
			#box:hover .child:nth-child(2) {
      
				transform: rotate(30deg);
				transform-origin: 50% 100%;
				/*设置旋转中心为折扇底部中心*/
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(3) {
      
				background-color: red;
				transform: rotate(-30deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(4) {
      
				transform: rotate(-60deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(5) {
      
				transform: rotate(60deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(6) {
      
				transform: rotate(45deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(7) {
      
				transform: rotate(-45deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(8) {
      
				transform: rotate(-15deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(9) {
      
				transform: rotate(15deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
			#box:hover .child:nth-child(10) {
      
				transform: rotate(-30deg);
				transform-origin: 50% 100%;
				transition: transform 1s ease;
			}
		style>
	head>
	<body>
		<div id="box">
			<div class="child">div>
			<div class="child">div>
			<div class="child">div>
			<div class="child">div>
			<div class="child">div>
			<div class="child">div>
			<div class="child">div>
			<div class="child">div>
			<div class="child">div>
			<div class="child">div>
		div>
	body>
html>

你可能感兴趣的:(CSS3,css3)