CSS3之好看的特效

我们在网站上浏览时都会或多或少地出现一些炫酷的网页效果，看着很高大上的小小特效，这些特效一般使用HTML、CSS和JS结合做出来的。
但是某些简单的特效可以直接用HTML和CSS3就能做出想要的，而且有时候用CSS3比用JS简单。话不多说，现在我就来介绍HTML和CSS3做的特效（因为不能传视频，所以只能用图片解释了）。

1. 左右切换特效

网页初始的样子

鼠标移入到目标元素上的样子

代码：

<!-- 网页结构 -->
<div><p></p><h1>文字</h1>
</div><!-- CSS3核心代码 -->p{/* 相对于内容框来定位背景图像：*/background-origin: border-box;/*规定两个并排的带边框的框*/box-sizing: border-box;/*绝对定位*/position: absolute;left: 0;top: 0;/* 动画效果过渡，让动画效果看起来不突兀 */transition: all 1s;/*设置元素的堆叠顺序*/z-index: 2;}h1{position: absolute;left: -100px;top: 0;z-index: 1;/*被隐藏*/opacity: 0;color: #fff;transition: all 1s;background-color: #eee;}div:hover p{/*scale缩放 p标签缩小50%*/transform: scale(.5,.5);left: 100px;}div:hover h1{left: 0px;opacity: 1;}

2. 旋转切换特效

网页初始的样子

鼠标移入到目标元素上的样子，其中的小圈是会被缩小直至消失的

代码：

<!-- CSS3核心代码 -->p{background-origin: border-box;box-sizing: border-box;position: absolute;left: 0;top: 0;transition: all 1s;z-index: 2;}h1{position: absolute;left: 0;top: 0;z-index: 1;opacity: 1;color: #fff;/* 缩放  旋转 */transform: scale(0,0) rotate(0deg);transition: all 1s;background-color: #eee;}div:hover p{/* 缩放到消失  旋转360度 */transform: scale(0,0) rotate(360deg);}div:hover h1{/* 缩放到出现  旋转360度 */transform: scale(1,1) rotate(360deg);}

3. 旋转的正方体特效

网页初始的样子，这是一个正方体，它在网页中可以不断的旋转，每个面都可以放上喜欢的图片，

鼠标移入到目标元素上的样子，正方体的六个面会被分解，形成了不是封闭的正方体。

代码：

<!-- 网页结构 --><div class="main"><div class="cub"><!-- 正面的 --><span class="num_positive"></span><!-- 后面的 --><span class="num_behind"></span><!-- 左面的 --><span class="num_left"></span><!-- 右面的 --><span class="num_right"></span><!-- 上面的 --><span class="num_top"></span><!-- 下面的 --><span class="num_bottom"></span></div></div>
<!-- CSS3核心代码 -->.main .cub{width: 300px;height: 300px;/*指定嵌套元素如何在3D空间中呈现，必须要写的，而且要写在指定元素的直接父级上才有效果*/transform-style: preserve-3d; position: relative;transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);animation: run 10s infinite linear;}.main .cub span{width: 100px;height: 100px;display: block;border: 2px solid blueviolet;border-radius: 10px;position: absolute;}/*不断旋转的代码*/@keyframes run{0%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}100%{transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);}}/*把六个平面的正方形设置成立体的正方体的代码*/.cub span.num_positive{/*设置前面的一面在z轴上的移动*/transform:translateZ(50px);}.cub span.num_behind{/*设置后面的一面在z轴上的移动*/transform:translateZ(-50px);}.cub span.num_left{/*设置左面的一面在x轴上的移动*/transform:translateX(-50px) rotateY(-90deg);}.cub span.num_right{/*设置右面的一面在x轴上的移动*/transform:translateX(50px) rotateY(90deg);}.cub span.num_top{/*设置上面的一面在y轴上的移动*/transform:translateY(-50px) rotateX(90deg);}.cub span.num_bottom{/*设置下面的一面在y轴上的移动*/transform:translateY(50px) rotateX(-90deg);}/*hove的效果*/.main:hover .num_positive{transform:translateZ(100px);}.main:hover .num_behind{transform:translateZ(-100px);}.main:hover .num_left{transform:translateX(-100px) rotateY(90deg);}.main:hover .num_right{transform:translateX(100px) rotateY(90deg);}.main:hover .num_top{transform:translateY(-100px) rotateX(90deg);}.main:hover .num_bottom{transform:translateY(100px) rotateX(-90deg);}

PS:这些特效的代码中我只贴了核心代码，没有贴css基础样式的代码，所以要实现的话还需自己写基础样式。

CSS3之好看的特效相关推荐

一款基于jquery和css3的头像恶搞特效
今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览源码下载实现的代 ...
css3 卡片亮光_利用css3实现文字亮光特效的代码
这篇文章主要介绍了关于利用css3实现文字亮光特效的代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下以前分享过很多css3实现的字体特效,今天给大家分享一款纯css3实现的文字亮光 ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载更多专业前端知识,请上 [猿2048]www.mk2048.com
html5 banner特效,HTML5特效库 CSS3遮罩banner动画特效源码
效果图各位朋友.大家早上好! 今天给大家带来的是 CSS3遮罩banner动画特效源码! 看倦的轮播图的,可以试试这个特效!别有一番意思! 大家可以按照自己的意愿进行行修改,改成自己喜欢的样子! 有 ...
利用css3实现3d立体特效--正方体
其实css3中提供了很多让我们实现非常炫酷的工具,好多特效不需要通过复杂的js代码来实现,而可以通过简单的css3代码来实现,这一次我就给大家介绍一下3d立体盒子的实现以及动画的实现. 要实现这个正当 ...
css3特效框,科技常识：6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效的相关资料,希望小伙伴们看了有所帮助. ...
css下拉菜单出现下划线,简单带下划线跟随效果的CSS3下拉菜单特效
简要教程这是一款使用纯CSS3制作的带下划线跟随效果的下拉菜单特效.该下拉菜单通过CSS3 transform和transition来制作下划线跟随效果和下拉菜单效果. 使用方法 HTML结构该下 ...
css3 烟蚊香_HTML5前端特效库 css3 按钮粒子烟花特效源码
效果图各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 需要文档版本源码,可以加我的HTML5前端交流群111645711 好了,废话不多 ...

CSS3之好看的特效

1. 左右切换特效

2. 旋转切换特效

3. 旋转的正方体特效

CSS3之好看的特效相关推荐

最新文章

热门文章