html5基本结构图解(html5简介及新增功能介绍)
类别:Web前端 浏览量:1427
时间:2021-10-14 00:43:25 html5基本结构图解
html5简介及新增功能介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>audio</title> </head> <body> <audio controls="controls"> <source src="video/Light.mp3" type="audio/mpeg"> <source src="video/Light.ogg" type="audio/ogg"> 您的浏览器太low了 </audio> <video controls muted poster="img/1.jpg" alt="html5基本结构图解(html5简介及新增功能介绍)" border="0" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3</title> </head> <style> ul li:nth-child(odd) { background-color: cornflowerblue; } ul { display: inline-grid; width: 200px; margin-left: -39px; list-style: none; text-align: center; } li::before { display: inline-block; content: "我想"; width: 100px; height: 100px; background-color: pink; } li::after { display: inline-block; content: "飞的更高"; width: 100px; height: 100px; background-color: pink; } </style> <body> <li> <ul> <li>1</li> <li>4</li> <li>4</li> <li>4</li> <li>4</li> </ul> </li> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> </head> <style> /*from 和 to 等价于 0% 和 100%*/ /*@keyframes move {*/ /*0%{*/ /*transform:translateX(0px);*/ /*}*/ /*100%{*/ /*transform:translateX(1000px);*/ /*}*/ /*}*/ .bowen { position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); background-color: pink; } .bowen li[class^="dotted"] { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); background-color: deepskyblue; border-radius: 50%; } @keyframes pulse { 0% { } 70% { width: 100px; height: 100px; opacity: 1; } 100% { width: 100px; height: 100px; opacity: 0; } } .bowen li.dotted2, .bowen li.dotted3, .bowen li.dotted4 { background-color: transparent; box-shadow: 0 0 8px deepskyblue; animation: pulse 1.2s linear infinite forwards; } .bowen li.dotted2 { animation-delay: 0.4s; } .bowen li.dotted3 { animation-delay: 0.8s; } </style> <body> <li class="bowen"> <li class="dotted1"></li> <li class="dotted2"></li> <li class="dotted3"></li> <li class="dotted4"></li> </li> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D</title> </head> <style> body { perspective: 500px; } .box { position: relative; width: 200px; height: 200px; margin: 0 auto; transform-style: preserve-3d; transition: all .3s; } .box li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: cornflowerblue; } .box li:last-child { background-color: aliceblue; transform: rotateX(60deg); } .box:hover { transform: rotate3D(0, 1, 0, 60deg); } </style> <body> <li class="box"> <li></li> <li></li> </li> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> </head> <style> li { float: left; padding: 0 10px; list-style: none; perspective: 500px; } .box { position: relative; width: 200px; height: 50px; transform-style: preserve-3d; transition: all .5s; } .box li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: pink; text-align: center; line-height: 50px; } .box li:nth-child(1) { transform: translateZ(25px); } .box li:nth-child(2) { background-color: purple; /*必须先移动后旋转*/ transform: translateY(25px) rotateX(-90deg); } .box:hover { transform: rotateX(90deg); } </style> <body> <ul> <li> <li class="box"> <li>好好学习</li> <li>天天向上</li> </li> </li> <li> <li class="box"> <li>好好学习</li> <li>天天向上</li> </li> </li> <li> <li class="box"> <li>好好学习</li> <li>天天向上</li> </li> </li> <li> <li class="box"> <li>好好学习</li> <li>天天向上</li> </li> </li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马</title> </head> <style> section { position: fixed; top: 50%; left: 50%; width: 300px; height: 200px; transform: translate(-50%, -50%); perspective: 2500px; } section li.box { position: relative; transform-style: preserve-3d; animation: move 15s linear infinite; background: url("img/4.jpg" alt="html5基本结构图解(html5简介及新增功能介绍)" border="0" />
总结
到此这篇关于html5简介及新增功能介绍的文章就介绍到这了,更多相关html5简介新增功能内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5显示中心代码(HTML5中的Web Notification桌面通知功能的实现方法)
- html5基本结构图(HTML5中的网络存储实现方式)
- html5列表与布局(HTML5逐步分析实现拖放功能的方法)
- html5拖拽标签(Html5原生拖拽相关事件简介以及基础实现)
- html5video怎么优化(HTML5 video循环播放多个视频的方法步骤)
- ios如何播放html5(Html5移动端适配IphoneX等机型的方法)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- html5定位地理位置(html5 制作地图当前定位箭头的方法示例)
- uni app开发教程(uniapp+Html5端实现PC端适配)
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- html5课程入门(萌新的HTML5 入门指南)
- HTML5 <figure> 、<figcaption>标签
- html5浏览界面怎么设置(HTML5textarea高度自适应的两种方案)
- html53d效果代码(HTML5 直播疯狂点赞动画实现代码 附源码)
- html5开发的app(浅谈Html5页面打开app的一些思考)
- html5应用的几个建议
- 真牛 禹州将建成中等城市(禹州将建成中等城市)
- 被骂欺师灭祖,与郭德纲公开叫板,何云伟改名何沄伟,开始画画了(与郭德纲公开叫板)
- 相声转行影帝,被何晴抛弃,甩10年女友闪婚生子,刘威不靠谱情史(相声转行影帝被何晴抛弃)
- 岳云鹏不说相声,改行演员了 网友 快回来说相声(岳云鹏不说相声)
- 乔欣首演古装大女主,颜值演技双在线(乔欣首演古装大女主)
- 于正又推女性古装大剧 杨蓉乔欣演女配,两位女主成 重头戏(于正又推女性古装大剧)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9