css3 一个六边形 和 放大旋转动画DEMO演示
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>放大旋转动画DEMO演示</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
/* background: url(../images/bodyBg.jpg) repeat; */
}
.nav{
width: 90%;
margin: 0 auto;
margin-top: 100px;
height: 255px;
overflow: hidden;
}
.nav ul{ }
.nav ul li{
position: relative;
float: left;
width: 210px;
margin-top: 70px;
height: 120px;
text-align: center;
list-style: none;
margin-left: 20px;
background: rgba(0, 0 ,0 ,0.5);
}
.nav ul li:before{
content: "";
width: 210px;
height: 120px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
z-index:-1;
}
.nav ul li:after{ content: "";
width: 210px;
height: 120px;
background: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
z-index:-1;
}
.nav ul li img{
transition: 1s;
-webkit-transition: 1s;
display: block;
margin: 21px auto;
z-index:2;
}
.nav ul li img:hover{
transform:rotate(360deg) acale(1.5);
-webkit-transform:rotate(360deg) scale(1.5);
-moz-transform:rotate(360deg) acale(1.5);
-ms-transform:rotate(360deg) acale(1.5);
} </style>
</head>
<body>
<div class="nav">
<ul>
<li><img src="data:images/1.png"/></li>
<!-- <li><img src="data:images/2.png"/></li>
<li><img src="data:images/3.png"/></li>
<li><img src="data:images/4.png"/></li>
<li><img src="data:images/5.png"/></li> -->
</ul>
</div> </body>
</html>
鼠标移到中间图片会有放大旋转效果
css3 一个六边形 和 放大旋转动画DEMO演示的更多相关文章
- CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- [css3]圆盘旋转动画
效果:打开只能看到logo,鼠标放上去,圆盘渐显放大旋转展示出来 知识点: [html+css] 1.logo水平垂直居中于圆盘内,用到的样式 position: absolute; left: 0; ...
- 超绚丽CSS3多色彩发光立方体旋转动画
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...
- css3伪放大镜(图片放大动画)效果(鼠标移入圆形区域放大图片)
源码: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&q ...
- CSS3实现3D木块旋转动画
CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...
- css3通过scale()实现放大功能、通过rotate()实现旋转功能
css3通过scale()实现放大功能.通过rotate()实现旋转功能,下面有个示例,大家可以参考下 通过scale()实现放大功能 通过rotate()实现旋转功能 而transition则可设置 ...
- 如何用纯 CSS 创作一个方块旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...
随机推荐
- Scrapy框架: 登录网站
一.使用cookies登录网站 import scrapy class LoginSpider(scrapy.Spider): name = 'login' allowed_domains = ['x ...
- H5 IOS 虚拟键盘不回落的问题
在 H5 页面中,会发现在高版本的 IOS 系统中(ios12以上)和微信版本6.7.x以上,都会发现 input 等输入框,输入内容之后发现虚拟键盘消失,但是页面出现大面积白框. 解决办法(最后加上 ...
- linux磁盘空间占用分析
df -h # 查看目前磁盘空间占用 cd / # 切换到根目录 du -sh # 查询每个目录占用的大小 lsof | grep delete # 查看当前系统打开文件 # 删除不使用的文件, 如果 ...
- php操作redis--列表篇
常用函数:lpush/rpush/lpop/rpop/lrange/lrem等 应用场景:关注列表,粉丝列表,发送缓冲队列等 特点:可理解为数组操作,插入和删除数据按照一定的规律排序,数据可重复 连接 ...
- Python爬虫实战—— Request对象之header伪装策略
在header当中,我们经常会添加两个参数--cookie 和 User-Agent,来模拟浏览器登录,以此提高绕过后台服务器反爬策略的可能性. User-Agent获取 User-Agent可通过随 ...
- 【leetcode】667. Beautiful Arrangement II
题目如下: Given two integers n and k, you need to construct a list which contains ndifferent positive in ...
- 分布式项目中增加品牌前端页面出现Uncaught Error: [$injector:modulerr] bug后的原因以及改正方式
分布式查询品牌页面时 controller路径正确访问,比如输入 http://localhost:8081/brand/findPage.do?page=3&rows=6 是可以正常显示数据 ...
- BZOJ 3159: 决战 解题报告
BZOJ 3159: 决战 1 sec 512MB 题意: 给你一颗\(n\)个点,初始点权为\(0\)的有跟树,要求支持 Increase x y w 将路径\(x\)到\(y\)所有点点权加上\( ...
- 【LeetCode 10】正则表达式匹配
题目链接 [题解] 看到这个题解 写的代码. 就是加个备忘录法.优化一下暴力的做法. 匹配的时候如果遇到号的话,就两种可能.不再考虑它前面一个字符了. 跳过这个或者.或者继续用前面那个字符匹配. 即d ...
- Android中当数据库需要更新时我们该怎么办?
问题:Android数据库更新并保留原来的数据如何实现 Andoird的SQLiteOpenHelper类中有一个onUpgrade方法.帮助文档中只是说当数据库升级时该方法被触发.经过实践,解决了我 ...