css3注水效果代码（css3注释）

今天给各位分享css3注水效果代码的知识，其中也会对css3注释进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何利用CSS3制作3D效果文字具体实现样式
• 2、css3 实现动画效果，怎样使他无限循环动下去？
• 3、如何使用CSS3/SCSS实现逼真的车窗雨滴效果

如何利用CSS3制作3D效果文字具体实现样式

复制代码代码如下: .example-class{text-shadow: [X offset] [Y offset] [Blur size] [Colour];}译者注：X表示x轴上的位移，可为负值；Y表示y轴上的位移，可为负值；Blur表示投影的宽度，不能为负值；Color为投影的颜色。 堆叠多层CSS投影 虽然我们没有必要堆叠多层投影，但通过堆叠多层投影会有更好的3D效果 开始创建3D文字 你可能会选择比文字更深的颜色来作为投影的颜色，所以这个例子中我就用白色的文字，用深一点的灰色作为投影颜色，这个例子中我将H2的文字渲染3D效果，css代码如下： 复制代码代码如下:h2{text-shadow: 1px 1px 0 #CCC, 2px 2px 0 #CCC, /* end of 2 level deep grey shadow */ 3px 3px 0 #444, 4px 4px 0 #444, 5px 5px 0 #444, 6px 6px 0 #444; /* end of 4 level deep dark shadow */}效果如下：好了，到这里你已经创建了基本的3D文字，然而，让我们进一步来实现鼠标滑过的文字放大效果，并用css的transision属性实现圆滑的淡入淡出效果。 首先用transform属性实现滑过字体放大 复制代码代码如下:h2:hover{/* CSS3 Transform Effect */ -webkit-transform: scale(1.2); /* Safari Chrome */ -moz-transform: scale(1.2); /* Firefox */ -o-transform: scale(1.2); /* Opera */}效果如下：然后利用transition属性实现淡入淡出效果 复制代码代码如下:h2{/* CSS3 Transition Effect */ -webkit-transition: all 0.12s ease-out; /* Safari Chrome */ -moz-transition: all 0.12s ease-out; /* Firefox */ -o-transition: all 0.12s ease-out; /* Opera */}到此，我们就用CSS3实现了3D效果的文字，并且在鼠标滑过是让字体放大，且有淡入淡出的效果，这一切是用纯CSS实现的哦。

css3 实现动画效果，怎样使他无限循环动下去？

一、实现CSS3无限循环动画代码示例。

代码如下：

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg);

border:5px solid red;

}

50%{

-webkit-transform: rotate(180deg);

background:black;

border:5px solid yellow;

}

100%{

-webkit-transform: rotate(360deg);

background:white;

border:5px solid red;

}

}

.loading{

border:5px solid black;

border-radius:40px;

width: 28px;

height: 188px;

-webkit-animation:gogogo 2s infinite linear ;

margin:100px;

}

扩展资料

实现动画无限循环所需要的CSS属性说明：

1、infinite

在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction

2、animation-name

规定需要绑定到选择器的 keyframe 名称。

3、animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

规定在动画开始之前的延迟。

6、animation-iteration-count

规定动画应该播放的次数。

7、animation-direction

规定是否应该轮流反向播放动画。

如何使用CSS3/SCSS实现逼真的车窗雨滴效果

参考下面方法：

1先实现一个小雨滴

首先雨滴是一个个小的椭圆形元素：

.raindrop {

width: 8px;

height: 7px;

border-radius: 100%;

}

2其次雨滴是一个个凸透镜，能折射出远处的景色，远景所处位置远大于2倍焦距，成倒立、缩小的实像。

“倒立”的效果可以通过旋转180°来实现，“缩小”的效果通过设置背景图片的尺寸来达到（下面把背景图缩小到全屏的5%并居中）。

.raindrop {

position: absolute;

background-image: url("背景图地址");比如：i.imgur.com/xQdYC7x.jpg 前面加上http://。

background-size: 5vw 5vh;

background-position: 50%;

transform: rotate(180deg) rotateY(0);

}

这样就得到了一个小雨点。

3随机雨滴

接着要创建一些随机分布的雨点对象，假如只有几个，可以手动编写CSS代码，但如果有几十个，直接写CSS代码的效率和可维护性就很差了。

使用SCSS的random方法，来随机微调雨点对象的尺寸和绝对位置。

// 生成0到1之间的随机数

$x:random();

$y:random();

// 随机尺寸和位置

$drop-width:5px+random(11);

$drop-stretch:0.7+(random()*0.5);

$drop-height:$drop-width*$drop-stretch;

.raindrop:nth-child(#{$i}){

left:$x * $width;

top:$y * $height;

width:$drop-width;

height:$drop-height;

background-position:percentage($x) percentage($y);

}

}

4效果增强

还可以给雨滴添加一点闪光的视觉效果，通过CSS3滤镜来实现：

[css] view plain copy

.raindrop {

filter: brightness(1.2);

-webkit-filter: brightness(1.2);

}

css3注水效果代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css3注释、css3注水效果代码的信息别忘了在本站进行查找喔。