CSS制作照片墙
2015-11-13 20:26
597 查看
资料来源:慕课网(点击这里)
课程结束后有两个效果:
效果一:CSS制作照片墙(点击这里)
效果二:旋转出现文字效果(点击这里)
实现代码:
实现代码二:
课程结束后有两个效果:
效果一:CSS制作照片墙(点击这里)
效果二:旋转出现文字效果(点击这里)
实现代码:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <title>CSS实现照片墙</title> <style> body{background-color:#eee;} h1{text-align:center;} .container{ /* background-color:#3F3; */ width:950px; height:450px; margin:60px auto; position:relative; } img{padding:10px 10px 15px;background-color:#fff; border:1px solid #ddd; top:50px;left:200px; /* 考虑到浏览器的兼容性这里加上了-webkit-和-moz-, 分别是用于Chrome和Safari浏览器的前缀 及-moz-是Firefox的前缀 */ -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); rotate(-30deg); /*设置动画时间长度*/ -webkit-transition:2s; -moz-transition:2s; transition:2s; /*制作放大效果*/ } img:hover{ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); rotate(0deg); -webkit-transform:scale(0.5); -moz-transform:scale(0.5); transform:scale(0.5); box-shadow:-10px 10px 15px #ccc; } </style> </head> <body> <h1>照片墙制作</h1> <div class="container"> <img src="images/5.jpg"> </div> </body> </html>
实现代码二:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> <style> .mainDiv{ width:100px; height:100px; margin:100px auto; text-align: center; line-height: 100px; font-weight: bold; color:#ddd; background:#ddd; border:1px solid #ddd; -webkit-transform:rotate(0deg) scale(1); -moz-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1); -webkit-transition:2s; -moz-transition:2s; transition:2s; } .mainDiv:hover{ color:#000; background:#f00; border:1px solid #ddd; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">您好</div> </body> </html>
相关文章推荐
- CSS基础学习九:伪类
- css实现背景渐变色效果
- 关于css中 line-height 在ie中和在chrome中错位的问题
- 代码:css3动画效果demo
- 《Programming WPF》翻译 第6章 2.资源与样式
- 《Programming WPF》翻译 第5章 5.数据模板和样式
- 《Programming WPF》翻译 第5章 4.元素类型样式
- 《Programming WPF》翻译 第5章 2.内嵌样式
- 《Programming WPF》翻译 第5章 1.不使用样式
- CSS侧边栏,ng-click定义选中事件
- WPF笔记(1.9 样式和控件模板)——Hello,WPF!
- 8.1.5 CSS3文字(2)( 字体 )
- CSS 伪类与伪元素
- css代码之所以初始化
- css3中font-face属性的用法详解
- css文件如何注释
- CSS选择器
- 【04】 CSS开发注意事项
- 动态加载js,css
- 一句命令快速合并 JS、CSS