CSS炫酷特效

時間 2020-01-11

標籤 css 特效欄目 CSS 简体版

原文原文鏈接

前言

首先聲明並無打廣告，只是給大家安利一款免費的GIF錄製工具，想把以前剛學css作的一點點小特效分享出來找不到一款好的錄製gif的工具，找了三款都是有水印而後收費又繼續找了一下終於找到了ScreenToGif，強烈安利！！！css

下一篇介紹 ScreenToGif

那麼接下來咱們來看一下css製做的炫酷特效(也不是很炫酷，哈哈哈)html

正文

一、立方盒子特效 web

其實也蠻簡單的，貼一下代碼有小夥伴須要嘗試一下的能夠試試！

<!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>
複製代碼

二、3D立體投影工具

<!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>
複製代碼

三、手風琴菜單 ui

<!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>

複製代碼

四、彩色漸變 spa

<!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>
複製代碼

好了幾天分享就到這裏了，一點小特效。3d

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。