1. 编程号首页

CSS炫酷特效

编程小号 • • 未分类

CSS炫酷特效好了几天分享就到这里了，一点小特效。

前言

首先声明并没有打广告，只是给你们安利一款免费的GIF录制工具，想把之前刚学css做的一点点小特效分享出来找不到一款好的录制gif的工具，找了三款都是有水印然后收费 又继续找了一下终于找到了ScreenToGif，强烈安利！！！

下一篇介绍ScreenToGif

那么接下来我们来看一下css制作的炫酷特效(也不是很炫酷，哈哈哈)

正文

1、立方盒子特效

Alt Text

其实也蛮简单的，贴一下代码有小伙伴需要尝试一下的可以试试！ 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; } body{ perspective: 1000px; background: #0A0A0A; } .wrap{ width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(0deg) rotateZ(45deg) rotateX(45deg); transform: rotateY(0deg) rotateZ(45deg) rotateX(45deg); -webkit-transition: all 50000s; transition: all 50000s; transition-timing-function: linear; } img{ width: 200px; height: 200px; opacity: 0.7; border-radius: 50px; } .wrap:hover{ -webkit-transform: rotateY(-1000000deg) rotateZ(45deg) rotateX(45deg); transform: rotateY(-1000000deg) rotateZ(45deg) rotateX(45deg); } .wrap div{ position: absolute; left: 0; top: 0; width: 200px; height: 200px; border-radius: 50px; /*10px :水平，10px垂直，200px阴影大小*/ box-shadow: inset 10px 10px 200px yellow, 0 0 150px #6F6; } .wrap div{ -webkit-transform: rotateY(0deg) translate3d(0, 0, 100px); transform: rotateY(0deg) translate3d(0, 0, 100px); } .wrap div:nth-child(2){ background: #000; -webkit-transform: rotateY(90deg) translate3d(0, 0, 100px); transform: rotateY(90deg) translate3d(0, 0, 100px); } .wrap div:nth-child(3){ background: pink; -webkit-transform: rotateY(180deg) translate3d(0, 0, 100px); transform: rotateY(180deg) translate3d(0, 0, 100px); } .wrap div:nth-child(4){ background: skyblue; -webkit-transform: rotateY(270deg) translate3d(0, 0, 100px); transform: rotateY(270deg) translate3d(0, 0, 100px); } .wrap div:nth-child(5){ background: yellow; -webkit-transform: rotateX(90deg) translate3d(0, 0, 100px); transform: rotateX(90deg) translate3d(0, 0, 100px); } .wrap div:nth-child(6){ background: green; -webkit-transform: rotateX(270deg) translate3d(0, 0, 100px); transform: rotateX(270deg) translate3d(0, 0, 100px); } </style>
</head>
<body>
	<div class="wrap">
		<div>
			<img src="img/1.jpg" alt="">
		</div>
		<div>
			<img src="img/2.jpg" alt="">
		</div>
		<div>
			<img src="img/3.jpg" alt="">
		</div>
		<div>
			<img src="img/4.jpg" alt="">
		</div>
		<div>
			<img src="img/5.jpg" alt="">
		</div>
		<div>
			<img src="img/2.gif" alt="">
		</div>
	</div>
</body>
</html>

2、3D立体投影

Alt Text

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style> body{ background: black; } .wrap{ width: 200px; margin: 100px auto; position: relative; transform-style: preserve-3d; perspective:3000px; /*最后才加上去*/ animation: rotateView 10s 4s infinite alternate; } /*最后才加上去*/ @keyframes rotateView{ from{transform: rotateY(0) rotateX(0);} to{transform: rotateY(-360deg) rotateX(-35deg)} } .wrap div{ width: 200px; height: 300px; position: absolute; /*1. direction 定义方向，取值包括 above 、 below 、 left 、 right。 * 2. offset定义反射偏移的距离， * 3. mask-box-image定义遮罩图像*/ -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,rgba(0,0,0,0.5)); } /*第四个值为阴影的大小，越大，阴影就越大*/ .wrap div img{transition:0.5s;box-shadow: 0px 0px 10px 1px white} .wrap div:nth-child(9){ animation:has_rotate9 0.5s forwards; } @keyframes has_rotate9{ from{transform: rotateY(0deg) translateZ(0px);} to{transform: rotateY(400deg) translateZ(380px);} } .wrap div:nth-child(8){ animation:has_rotate8 0.5s 0.5s forwards; } @keyframes has_rotate8{ from{transform: rotateY(0deg) translateZ(0px);} to{transform: rotateY(440deg) translateZ(380px);} } .wrap div:nth-child(7){ animation:has_rotate7 0.5s 1s forwards; } @keyframes has_rotate7{ from{transform: rotateY(0deg) translateZ(0px);} to{transform: rotateY(480deg) translateZ(380px);} } .wrap div:nth-child(6){ animation: has_rotate6 0.5s 1.5s forwards; } @keyframes has_rotate6{ from{transform: rotateY(0deg) translateZ(0px);} to{transform: rotateY(520deg) translateZ(380px);} } .wrap div:nth-child(5){ animation: has_rotate5 0.5s 2s forwards; } @keyframes has_rotate5{ from{transform: rotateY(0deg) translateZ(0px);} to{transform: rotateY(560deg) translateZ(380px);} } .wrap div:nth-child(4){ animation: has_rotate4 0.5s 2.5s forwards; } @keyframes has_rotate4{ from{transform: rotateY(0deg) translateZ(0px);} to{transform: rotateY(600deg) translateZ(380px);} } .wrap div:nth-child(3){ animation: has_rotate3 0.5s 3s forwards; } @keyframes has_rotate3{ from{transform: rotateY(0deg) translateZ(0px);} to{transform: rotateY(640deg) translateZ(380px);} } .wrap div:nth-child(2){ animation: has_rotate2 0.5s 3.5s forwards; } @keyframes has_rotate2{ from{transform: rotateY(0deg) translateZ(0px);} to{transform: rotateY(680deg) translateZ(380px);} } .wrap div:nth-child(1){ animation: has_rotate1 0.5s 4s forwards; } @keyframes has_rotate1{ from{transform: rotateY(0deg) translateZ(0px);} to{transform: rotateY(720deg) translateZ(380px);} } </style>
</head>
<body>
	<div class="wrap">
		<div><img src="images/01.jpg" alt=""></div>
		<div><img src="images/02.jpg" alt=""></div>
		<div><img src="images/03.jpg" alt=""></div>
		<div><img src="images/01.jpg" alt=""></div>
		<div><img src="images/02.jpg" alt=""></div>
		<div><img src="images/03.jpg" alt=""></div>
		<div><img src="images/01.jpg" alt=""></div>
		<div><img src="images/02.jpg" alt=""></div>
		<div><img src="images/03.jpg" alt=""></div>
	</div>
	
</body>
</html>

3、手风琴菜单

Alt Text

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css"> *{margin: 0;padding: 0} ul{ list-style: none; width: 840px; border: 5px solid black; margin: auto; overflow: hidden; } li{ float: left; width: 168px; transition:1s; } img{ vertical-align: top; } ul:hover li{ width: 50px; } /*这个跟上面的位置不能调转，因为优先级一样。*/ ul li:hover{ width: 640px; } </style>
</head>
<body>
	<ul>
		<li><img src="img1.jpg" alt=""></li>
		<li><img src="img2.jpg" alt=""></li>
		<li><img src="img3.jpg" alt=""></li>
		<li><img src="img4.jpg" alt=""></li>
		<li><img src="img5.jpg" alt=""></li>
	</ul>
</body>
</html>

4、彩色渐变

Alt Text

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css"> p{ width: 800px; height: 300px; background: -webkit-linear-gradient(-30deg,red 30px,orange 150px,yellow 280px,pink 500px,blue); /*-webkit-background-clip: text;*/ color:rgba(255,255,255,0.3); text-align: center; line-height: 300px; font-size: 100px; transition: 4s; } p:hover{ background-position: 400px; } </style>
</head>
<body>
      <p>I am Vincent</p>
</body>
</html>

好了几天分享就到这里了，一点小特效。

今天的文章CSS炫酷特效分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/15777.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注