web前端开发零基础学习教程 纯css打造炫酷翻转特效01
Posted web前端开发html
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端开发零基础学习教程 纯css打造炫酷翻转特效01相关的知识，希望对你有一定的参考价值。
毕业季,如何赢在起跑线? - 资深项目经理教你打造炫酷动画特效布局
基础课题：纯css打造炫酷特效
效果图：
源码展示：
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Title</title> | |
| <meta name="Keywords" content="关键词,关键词"> | |
| <meta name="description" content="描述"> | |
| <style type="text/css"> | |
| * {margin: 0;padding: 0;} | |
| /* | |
| 样式: | |
| 选择器(div)和声明({}) | |
| */ | |
| ul{ | |
| list-style:none;/*去掉小黑圆点*/ | |
| width:660px;/*宽度*/ | |
| height:440px;/*高度*/ | |
| border:1px solid #999;/*边框线border-width border-style border-color*/ | |
| margin:200px auto;/*外边距 盒子以外的距离 上下 左右(auto自动居中)*/ | |
| } | |
| ul li{ | |
| overflow:hidden;/*规定元素超出隐藏*/ | |
| position:relative;/*相对定位 只给定位不给值的时候 对元素本身没有任何影响*/ | |
| float:left;/*让元素横排显示*/ | |
| width:200px; | |
| height:200px; | |
| background-image:url('images/乌拉老师对你很满意，并给你一个么么哒.jpg');/*背景图片*/ | |
| background-size:cover;/*cover 等比例的放大缩小图片 直到占满盒子*/ | |
| margin:10px; | |
| } | |
| /*伪元素 通过样式给元素添加内容*/ | |
| ul li:before,ul li:after{ | |
| content:''; | |
| position:absolute;/*绝对定位 相对于已经定位的父元素 脱离文档流(在页面中不占位置)*/ | |
| width:100%; | |
| height:100%; | |
| background:rgba( 150, 50, 100,0.5); | |
| transform:rotate(55deg) translateX(-320px) scale(1.8);/*transform变换 rotate旋转 deg角度 translateX位移*/ | |
| transition:1s 0.5s;/*过渡 允许一个样式到一个样式有一个平滑的过渡*/ | |
| } | |
| /*:hover 伪类选择器 当鼠标划过li的时候*/ | |
| ul li:hover:before{ | |
| transform:rotate(55deg) translateX(-142px) scale(1.8); | |
| } | |
| ul li:after{ | |
| transform:rotate(55deg) translateX(320px) scale(1.8); | |
| } | |
| ul li:hover:after{ | |
| transform:rotate(55deg) translateX(142px) scale(1.8); | |
| } | |
| ul li div{ | |
| overflow:hidden; | |
| position:absolute; | |
| z-index:1;/*改变div的层级*/ | |
| top:40px; | |
| width:100%; | |
| height:0px; | |
| background-color:rgba(0,0,0,.5); | |
| color:#fff;/*字体颜色*/ | |
| text-align:center; | |
| transform:rotate(45deg); | |
| transition:1s; | |
| } | |
| ul li:hover div{ | |
| transform:rotate(0); | |
| height:120px; | |
| } | |
| ul li div h3{ | |
| height:45px; | |
| border-bottom:2px solid #fff; | |
| line-height:45px;/*特性:当值等于高度的时候 可以使一行文字上下居中*/ | |
| } | |
| ul li div p{ | |
| margin-top:10px; | |
| } | |
| /*css3 新增 选择第几个子元素 */ | |
| ul li:nth-child(2){ | |
| background-image:url('images/岚岚老师.jpg'); | |
| } | |
| ul li:nth-child(3){ | |
| background-image:url('images/阿飞老师太骚了.png'); | |
| } | |
| ul li:nth-child(4){ | |
| background-image:url('images/丫丫老师.jpg'); | |
| } | |
| ul li:nth-child(5){ | |
| background-image:url('images/喃喃老师太可爱了.jpg'); | |
| } | |
| ul li:nth-child(6){ | |
| background-image:url('images/朱雀老师太美了.jpg'); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li> | |
| <div> | |
| <h3>乌拉老师</h3> | |
| <p>集美丽与才华于一身,集技术与智慧于一体</p> | |
| </div> | |
| </li> | |
| <li> | |
| <div> | |
| <h3>乌拉老师</h3> | |
| <p>集美丽与才华于一身,集技术与智慧于一体</p> | |
| </div> | |
| </li> | |
| <li> | |
| <div> | |
| <h3>乌拉老师</h3> | |
| <p>集美丽与才华于一身,集技术与智慧于一体</p> | |
| </div> | |
| </li> | |
| <li> | |
| <div> | |
| <h3>乌拉老师</h3> | |
| <p>集美丽与才华于一身,集技术与智慧于一体</p> | |
| </div> | |
| </li> | |
| <li> | |
| <div> | |
| <h3>乌拉老师</h3> | |
| <p>集美丽与才华于一身,集技术与智慧于一体</p> | |
| </div> | |
| </li> | |
| <li> | |
| <div> | |
| <h3>乌拉老师</h3> | |
| <p>集美丽与才华于一身,集技术与智慧于一体</p> | |
| </div> | |
| </li> | |
| </ul> | |
| <!-- | |
| editplus | |
| div: | |
| 盒子/盒模型 有宽度有高度的长方形 层 通用型容器 | |
| p: | |
| 一段文字 标签的语义化 | |
| ulli | |
| 一列以小黑圆点开头的无序列表 | |
| 全栈 前后台 | |
| 第一阶段: | |
| html+css 静态页面 ps切图 网站上线 | |
| 第二阶段: | |
| js/javascript 网页特效 动态网站 前后台交互 性能优化 node.js项目(从前端到后台) | |
| 第三阶段: | |
| h5 vue react 数据库 从前端到后端 真机测试 接口 web页面 | |
| 可以满足前端所有的业务需求你 6个月左右/一年 1 2 4 5 6 晚上8.30-10.30 | |
| 6880 绿色助学通道 12分期 572 报名QQ635900003 | |
| 第四阶段: | |
| 设计模式 底层 算法 封装框架 | |
| 8880 3个名额 | |
| <font></font> | |
| <maquree></maquree> | |
| bgcolor | |
| 教育资源分布不均 | |
| --> | |
| </body> | |
| </html> |
视频教程01：
以上是关于web前端开发零基础学习教程 纯css打造炫酷翻转特效01的主要内容，如果未能解决你的问题，请参考以下文章