流 旋转 和一些特效

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>无标题文档</title>
 5 <link rel="shortcut icon" href="bg_5bad577.jpg">
 6         <style type="text/css">
 7         *{ margin:0px auto; padding:0px}
 8         #di{ width:0px;
 9             height:0px;
10             border-bottom:100px solid white;
11             border-left:100px solid white;
12             border-top:100px solid #00F;
13             border-right:100px solid white;
14                 }
15         #e1{ margin:50px;
16
17             }
18         #w1{ width:200px;
19             height:200px;
20              border-bottom:10px solid #F00;
21              border-left:10px solid #600;
22             transform:rotate(45deg)
23             }
24         #a1{ width:500px; height:50px; border:1px solid #e9e9e9; float:left}
25         .a2{ width:100px; height:50px; float:left; text-align:center; vertical-align:middle; line-height:50px;}
26         #a1 div:hover{ background-color:#b3b6bb; border-top:1px solid #F39; cursor:pointer}
27         #yanse{ background-color:#00C;
28               }
29         </style>
30     </head>
31
32     <body>
33         <div id="e1">
34             <div id="di"></div>
35         </div>
36     <!----------------------------------------------------->
37         <div id="w1"></div>
38   <br> <br> <br> <br> <br> <hr><br>
39
40   <!-------------------------------------------------------------->
41         <div id="a1">
42             <div class="a2">春节</div>
43             <div class="a2">元宵节</div>
44             <div class="a2">端午节</div>
45             <div class="a2">中秋节</div>
46             <div class="a2">国庆节</div>
47         </div>
48         <!---</div>------------------------------------------------------------------------------>
49         <br><br><br><br><br><br><br><br><br><br><br><br><br>
50     <div id="yanse">
51           <img src="aa.png" width="500px" height="60px"/>
52
53     </div>
54 </body>
55     </html>
时间: 2024-12-18 00:43:56

流 旋转 和一些特效的相关文章

纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效

这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效.该幻灯片使用全屏的3D立方体作为slide的载体,通过上下导航按钮,可以垂直旋转立方体,将立方体各个面上的幻灯片图片展示出来,效果非常炫酷. 在线预览   源码下载 使用方法 HTML结构 该幻灯片的立方体结构使用的是一个无序列表来制作,每一个<li>元素是一个立方体的面.幻灯片的上下导航按钮使用的是radio单选按钮和label来制作.整个3D立方体幻灯片被包裹在一个div容器中. 1 2 3 4 5 6 7 8 9 10 11

纯CSS3超酷3D旋转立方体动画特效

这是一款效果非常炫酷的纯CSS3 3D旋转立方体动画特效.该3D立方体使用CSS3 perspective制作,可以在水平方向.垂直方向和平面视角方向旋转,效果相当震撼.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3展现了它无穷的魅力.使用CSS来制作立方体动画,代码简洁易懂,效果更是令人惊叹! 在线演示:http://www.htmleaf.com/Demo/201501251274.html 下载地址:http://ww

博客园添加旋转的正方体特效

哇,这个旋转的正方体特效也十分好看呢 参考链接:https://www.cnblogs.com/Trojan00/p/9497480.html 效果展示 具体步骤 将代码复制即可 代码如下:(在博客侧边栏公告(支持HTML代码)中粘贴即可) <style> /*最外层容器样式*/ .wrap { width: 100px; height: 100px; margin: 150px; position: relative; } /*包裹所有容器样式*/ .cube { width: 50px;

css3 3d旋转图片立方体特效代码

一.什么是css3 3d旋转 ? 形成一个3D空间: transform-style:preserve-3d    ( 让父元素形成3D,让其子元素在3D空间进行变化 ). 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴,Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向,2d场景,在屏幕上水平和垂直的交叉线x轴和y轴. 二.关于css 3d旋转的相关属性及使用方法 变形属性:transform 3D功能函数 ----3D的位移:transform:translate3d(x,y,z);   

360度旋转图片小特效

现在,在这个网络发达的时代,一些电子商务公司,需要将自己线上的产品给买家或用户看,为了能让用户了解的更全面,那么把一个物件的产品要展示到方方面面,就要运用到360度旋转图片特效,因为上次有朋友叫我帮她弄这样一个效果,然后结合网上的资源,就小试牛刀了,觉得还挺好玩的,效果还是可以看的吧. 首先呢,需要在HTML文档中引入3deye.min.js文件和jq.js,这些可以在网上下载到免费的,另外,要展示到方方面面的,就要做这件物品的各个角度的图片,我这里是36张图片,每10度一张图片,好了,我就贴出

PHP+jquery 瀑布流+LightBox图片盒子特效

最近在做一个网站,要对很多图片排版,想到了瀑布流,不过瀑布流是实现了,但是需要查看大图片,于是将瀑布流和LightBox图片盒子很好的结合了起来,可在当前页使用Lightbox放大瀑布流中的缩略图,有需要的可下载使用. 完整代码下载:waterwall_lightbox.rar 效果在线显示:http://www.codesc.net/other/waterwall_lightbox/index.php

JS框架_(coolShow.js)图片旋转动画特效

coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>coolShow.js插件图片旋转动画特效</title> <link href="css/coolShow.css" rel="

10款功能强大的jQuery/CSS3图片特效插件

1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网站登录页面特效源码,是一段实现页面底部拥有滚动云彩动态效果的特效源码,想要在网站中实现此类效果的朋友们可以前来下载使用.本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 在线演示 源码下载 2.HTML5实现的3D球体斑点运动动画特效源码 这是一个很酷的HTML5 3D动画效果,是一个小球,小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状,其实这款动画并不是正宗的HTML5 3D动画,而是

jQuery旋转插件

jQuery旋转插件,支持Internet Explorer 6.0 + .Firefox 2.0.Safari 3.Opera 9.Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现.调用和方法: < strong> rotate(angle) angle参数:[Number]–默认为0–根据给定的角度旋转图片例如: $("#img").rotate(45); rotate(parameters) parameters参数:[Obje