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);}

小案例：折扇案例

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

案例展示图片:

代码如下：

<!DOCTYPE html>
<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过渡小案例：折扇相关推荐

小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
HTML小案例-使用CSS3实现网页加载loding动画
HTML小案例-使用CSS3实现网页加载loding动画话不多说先看效果 ** 以下为源代码 ** <!DOCTYPE html> <html lang="zh-CN&q ...
html怎么设置过渡字体,web前端入门到实战：css3基础-文本与字体+转换+过渡+动画+案例...
Css3文本与字体文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: norm ...
前端CSS3实现3D相册小案例
前端CSS3实现3D相册小案例 HTML代码部分: <!DOCTYPE html> <html lang="en"> <head> <me ...
CSS3过渡动画实现hover人物弹出炫酷效果案例
目标我们要实现的目标效果如下过渡如何使用可以清楚地看出效果图中的效果用到了css3中的过渡transition,先来了解一下transition CSS3 过渡是元素从一种样式逐渐改变为另一种的 ...
【Node.js学习小案例】DNS域名解析一
Node.js 百度百科: Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞I/ ...
Windows Server之浅谈SMB以及SMB小案例分享
Windows Server之浅谈SMB以及SMB小案例分享 gs_h关注4人评论89230人阅读2017-01-23 14:45:45 SMB由来服务器消息区块(英语:Server Message ...
CSS3过渡延迟总结
CSS3过渡延迟总结 1. 元素状态 2. 过渡实现 2.1 设置哪些属性应用过渡效果 2.2 js过渡完成事件监听API 2.3 设置过渡时间 2.4 控制过渡效果的速度 2.4.1 平滑过渡 2. ...
css3变换、过渡与动画_带有CSS3过渡和变换的画布菜单
css3变换.过渡与动画 Now as an easy to use jQuery Plugin 现在作为易于使用的jQuery插件介绍 ( Introduction ) Off Canvas Me ...

CSS3过渡小案例：折扇

CSS3过渡小案例：折扇

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

小案例：折扇案例

CSS3过渡小案例：折扇相关推荐

最新文章

热门文章