HTML连载67-手风琴效果、2D转换模块
一、手风琴效果
<style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto; border:1px solid red; } ul li { list-style: none; width: 158px; height: 300px; float:left; border:1px solid black; transition-property:width; transition-duration:1s; } ul li img { height: 300px; width: 300px; } ul:hover li{ width: 100px; } ul li:hover{ width: 300px; } </style> </head> <body> <ul> <li><img src="data:image/play_tennis.jpg" alt=""></li> <li><img src="data:image/play_tennis.jpg" alt=""></li> <li><img src="data:image/play_tennis.jpg" alt=""></li> <li><img src="data:image/play_tennis.jpg" alt=""></li> <li><img src="data:image/play_tennis.jpg" alt=""></li> <li><img src="data:image/play_tennis.jpg" alt=""></li> </ul>
二、2D转换模块
1.什么是2D转换模块?
<style> *{ margin:0; padding:0; } ul{ width: 800px; height: 500px; border:1px solid black; margin:10px auto; } ul li { list-style:none; height: 50px; width: 100px; margin:0 auto; margin-top:50px; text-align:center; line-height:50px; } ul li:nth-child(2){ transform:rotate(90deg);/*参数是指它的旋转度数*/ } ul li:nth-child(3){ transform:translate(-100px,0px);/*里面的参数代表平移多少个单位长度*/ } ul li:nth-child(4){ transform:scale(1.5,0.5);/*第一个参数就是水平方向缩放的系数,第二个参数就是垂直方向的缩放系数*/ /*如果里面只有一个参数的话,就代表水平和垂直都是这个缩放系数*/ } ul li:nth-child(5){ transform:rotate(45deg) translate(100px,20px) scale(2,3); /*注意点:如果需要多个转换,那么使用空格来隔开;2D的转换模块会修改元素的坐标系,所以旋转之后在平移 可能就会遇到不是水平平移的,因此要注意一下 */ } </style> </head> <body> <ul> <li>正常的</li> <li>旋转的</li> <li>平移的</li> <li>缩放的</li> <li>综合的</li> </ul>
三、源码:
D167_AccordinEffect.htmlD168_2DTransformModule.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D167_AccordinEffect.html
https://github.com/ruigege66/HTML_learning/blob/master/D168_2DTransformModule.html
2.CSDN:https://blog.csdn.net/weixin_44630050
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
HTML连载67-手风琴效果、2D转换模块的更多相关文章
- css过渡模块和2d转换模块
今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...
- 2D转换模块
2D转换模块(transform) 1.取值:rotate(45deg)--- 旋转,默认以自己为中心作为参考点来旋转 .translate(100px,0px)--- 平移,第一个参数代表水平方向, ...
- 基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...
- 使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...
- 基于 jQuery 实现垂直滑动的手风琴效果
今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...
- JS+JQ手风琴效果
最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...
- 纯CSS手风琴效果
CSS手风琴效果 主体代码如下: ...
- jquery 图片手风琴效果
这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...
- 一步步教你css3手风琴效果的实现
什么是手风琴效果? 首先我们先来看一段动画,如下图所示: 在上面动画中,我们不难发现,一排照片正常排列,当我鼠标移上(:hover)时,照片会变大显示并且把其它照片挤小.那么在鼠标来回移动的过程中,画 ...
随机推荐
- DOM中的位置和大小(总结)
[window]window对象 一.position位置 screenLeft/screenTop (适用于火狐和谷歌) screenX/screenY (适用于IE) 二.size大小 inner ...
- 必须掌握的50条Linux基础操作命令
说明: 根据笔者平时使用情况,并结合参考一些其他资料,精心整理出以下必须掌握的50条Linux基础命令. 命令: 1. ssh 登录到远程主机 $ ssh -l jsmith remotehost.e ...
- HTML简介介绍
网页概述 网页:纯文本格式的文件:(以村文本格式编写,后缀名改为HTML的文本文件) ---- 网站:多个网页的集合: ---- 主页:打开网站后显示的第一个页面: ---- 浏览器:将纯文本格式的文 ...
- 通过指针突破C++类的访问权限
看如下代码 #include "pch.h" #include <iostream> using namespace std; class A { public: A( ...
- 【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建
Web可视化开发是阿里云IoT Studio中比较重要的一个功能,通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现. 目前支持的组 ...
- centos 配置自动启动(nginx为例)
[Unit] Description=nginx After=network.target [Service] Type=forking ExecStart=/usr/local/nginx/sbin ...
- python——3种字符串反转方法
在学习过程中,总结了3种字符串反转方法: 1.切片法 这种方法最为简便 str='abad' print(str[::-1]) · 用切片操作,将字符串以步长-1重新整理,即 'str[-1],str ...
- 《Android Studio实战 快速、高效地构建Android应用》--二、在Android Studio中编程
代码折叠 Ctrl+数字加号展开光标处已折叠代码块 Ctrl+数字减号折叠光标处已展开代码块 Ctrl+Shift+数字加号展开窗口中全部代码 Ctrl+Shift+数字减号折叠窗口中全部代码 注释代 ...
- LeetCode.509——斐波那契数
问题描述: 斐波那契数,通常用 F(n) 表示,形成的序列称为斐波那契数列.该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和.也就是: F(0) = 0, F(1) = 1 F(N) ...
- Codeforces_462_B
http://codeforces.com/problemset/problem/462/B 简单的贪心,排序即可看出来. #include<cstdio> #include<ios ...