倒影效果：

最新推荐文章于 2024-07-20 15:40:46 发布
最新推荐文章于 2024-07-20 15:40:46 发布
阅读量90 收藏
点赞数 1
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoyuanye2003110/article/details/127988825
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
                list-style:none;
            }
            body{
                perspective:1000px;
                /* perspective-origin:left bottom; */
            }
            ul{
                width:400px;
                height:800px;
                margin:200px auto;
                /* background:red; */
                position:relative;
                transform-style:preserve-3d;
                animation:move 6s linear infinite;
            }
            @keyframes move{
                from{
                    transform:rotateY(360deg);
                }
                to{
                    transform:rotateY(0deg);
                }
            }
            ul li{
                width:200px;
                height:200px;
                position:absolute;
                left:200px;
                top:50px;
                margin-left:-100px;
                border:1px solid green;
                /* 倒影 */
                -webkit-box-reflect: below 10px linear-gradient(to top,rgba(255,255,255,0.3) 20%,transparent 30%);
            }
            ul li:nth-child(1){
                background: url(img/15208367115437620.jpg) no-repeat center/100% 100%;
            }
            ul:hover li:nth-child(1){
                transform: rotatey(60deg) translatez(300px);
                transition:all 1s;
            }
            ul li:nth-child(2){
                background: url(img/古装5.jpg) no-repeat center/100% 100%;
            }
            ul:hover li:nth-child(2){
                transform: rotatey(120deg) translateZ(300px);
                transition:all 1s;
                
            }
            ul li:nth-child(3){
                background: url(img/古装6.jpg) no-repeat center/100% 100%;
            }
            ul:hover li:nth-child(3){
                transform: rotatey(180deg) translateZ(300px);
                transition:all 1s;
            }
            ul li:nth-child(4){
                background: url(img/可爱的小女孩.jpg) no-repeat center/100% 100%;
            }
            ul:hover li:nth-child(4){
                transform: rotatey(240deg) translateZ(300px);
                transition:all 1s;
            }
            ul li:nth-child(5){
                background: url(img/可爱美女.jpg) no-repeat center/100% 100%;
            }
            ul:hover li:nth-child(5){
                transform: rotatey(300deg) translateZ(300px);
                transition:all 1s;
            }
            ul li:nth-child(6){
                background: url(img/早安.jpg) no-repeat center/100% 100%;
            }
            ul:hover li:nth-child(6){
                transform: rotatey(360deg) translateZ(300px);
                transition:all 1s;
            }
            
        </style>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
				list-style:none;
			}
			body{
				perspective:1000px;
				/* perspective-origin:left bottom; */
			}
			ul{
				width:400px;
				height:800px;
				margin:200px auto;
				/* background:red; */
				position:relative;
				transform-style:preserve-3d;
				animation:move 6s linear infinite;
			}
			@keyframes move{
				from{
					transform:rotateY(360deg);
				}
				to{
					transform:rotateY(0deg);
				}
			}
			ul li{
				width:200px;
				height:200px;
				position:absolute;
				left:200px;
				top:50px;
				margin-left:-100px;
				border:1px solid green;
				/* 倒影 */
				-webkit-box-reflect: below 10px linear-gradient(to top,rgba(255,255,255,0.3) 20%,transparent 30%);
			}
			ul li:nth-child(1){
				background: url(img/15208367115437620.jpg) no-repeat center/100% 100%;
			}
			ul:hover li:nth-child(1){
				transform: rotatey(60deg) translatez(300px);
				transition:all 1s;
			}
			ul li:nth-child(2){
				background: url(img/古装5.jpg) no-repeat center/100% 100%;
			}
			ul:hover li:nth-child(2){
				transform: rotatey(120deg) translateZ(300px);
				transition:all 1s;
				
			}
			ul li:nth-child(3){
				background: url(img/古装6.jpg) no-repeat center/100% 100%;
			}
			ul:hover li:nth-child(3){
				transform: rotatey(180deg) translateZ(300px);
				transition:all 1s;
			}
			ul li:nth-child(4){
				background: url(img/可爱的小女孩.jpg) no-repeat center/100% 100%;
			}
			ul:hover li:nth-child(4){
				transform: rotatey(240deg) translateZ(300px);
				transition:all 1s;
			}
			ul li:nth-child(5){
				background: url(img/可爱美女.jpg) no-repeat center/100% 100%;
			}
			ul:hover li:nth-child(5){
				transform: rotatey(300deg) translateZ(300px);
				transition:all 1s;
			}
			ul li:nth-child(6){
				background: url(img/早安.jpg) no-repeat center/100% 100%;
			}
			ul:hover li:nth-child(6){
				transform: rotatey(360deg) translateZ(300px);
				transition:all 1s;
			}
			
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

浅沫......
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
字体倒影效果
weixin_54668937的博客
12-09 793
字体倒影效果 文献种类：专题技术文献； 开发工具与关键技术： DW、CSS 作者：方建恒 ；年级：20级 ；撰写时间： 2021 年 11 月 18日 我们在制作一些宣传标语时， 大多都会用到一个让字体拥有倒影的功能， 这样可以让用户体验更好的视觉效果。 在这里我们将给大家运用CSS完成字体的倒影效果， 首先我们来完成HTML部分， 创建一个class为content的div标签， 然后在里面放置一个h3标签，用于放置要实现倒影效果的字体， 把h3标签里的title属性的属性值设置为“
图片倒影效果: matrix.setScale(1, -1);
HelloWold
10-20 1346
public class MainActivity extends Activity implements OnClickListener {       private  Button  bt;       private  ImageView  iv;       private  ImageView  iv_after;              @Over
android倒影效果,Android 设置图片倒影效果
weixin_35160938的博客
05-27 349
首先，贴出效果图：1.布局文件main.xmlandroid:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical" >android:layout_width="fill_parent"android:layout_height="wrap_content"and...
java水面倒影效果,Java：图像倒影
weixin_33212263的博客
03-10 125
import java.awt.*;import java.awt.image.*;import javax.swing.*;public class ReflectImageBuilder {publicstaticenumMode {LINEAR, EXP}public static Image createReflectImage(Image img) {return createRefle...
CSS图片倒影效果
weixin_52923266的博客
01-04 400
CSS图片倒影效果,实用简单.
android倒影效果,Android实现图片的倒影效果案例分析
weixin_39845039的博客
05-27 103
复制内容到剪贴板代码:public static Bitmap createReflectedImage(Bitmap originalImage) {final int reflectionGap = 4;int width = originalImage.getWidth();int height = originalImage.getHeight();Matrix matrix = new ...
osg实现镜面成像、倒影效果
danshiming的博客
07-02 553
osg实现镜面成像、倒影效果
Android实现textView倒影效果ReflectTextView
geniushorse的博客
01-06 688
代码转载自https://github.com/Dean1990/ReflectTextView by Dean1990 效果 要实现带倒影效果的textview，效果如下 有2种方法，一种是如果是只有数字和字母，让设计切出来相应带倒影效果的文字图片，需要哪张图，就用哪张图显示即可。还有一种就是重写TextView，加上倒影效果。 实现 ReflectTextView.java 话不多说，...
android倒影效果,Android中使用Matrix控制图形变换和制作倒影效果的方法
weixin_30635747的博客
05-27 518
最近在使用Matrix进行绘图的操作。对Matrix的一些方法有了一些更深的体会，记下来，以便日后复习。Matrix常用的方法：一、变换方法：Matrix提供了translate(平移)、rotate(旋转)、scale(缩放)、skew(倾斜)四种操作，这四种操作的内部实现过程都是通过matrix.setValues(…)来设置矩阵的值来达到变换图片的效果。Matrix的每种操作都有set、pr...
Android 3D倒影效果源码.zip
07-17
在Android开发中，3D倒影效果是一种常见且吸引人的视觉设计，它可以为应用程序界面增添层次感和动态感。这个"Android 3D倒影效果源码.zip"压缩包提供了实现这种效果的具体代码，这对于开发者来说是宝贵的资源，能够...
Android：图片倒影效果
11-01
本话题主要关注如何实现“Android：图片倒影效果”，这通常涉及到自定义组件和图形渲染技术。在Android中，我们可以利用自定义`Gallery`控件来实现图片的平滑切换，并结合倒影效果为用户提供更为生动的交互体验。 `...
3D倒影效果
02-21
在IT领域，3D倒影效果是一种常见的视觉特效，它为用户界面增添了一种立体感和动态美感。这种效果在很多应用中都有所体现，比如手机应用、游戏、网页设计等。"3D倒影效果"通常指的是物体或图像在三维空间中呈现的一种...
android 倒影效果，动态倒影效果
06-12
在标题“android 倒影效果，动态倒影效果”中，提到的技术核心是利用Android的图形库来实现倒影效果，并且这种倒影能够随着界面的变化实时更新。这种动态倒影的实现主要依赖于矩阵变换（Matrix transformations）。 ...
PS水中倒影效果插件
11-12
Flaming Pear Flood 是Flaming Pear公司推出的一款PhotoShop图像效果增强处理滤镜,目前为止这种制造水面效果的滤镜还是独一无二的，效果很真实，可以做出令人叫绝的倒影效果，甚至连倒影都能反射出来。
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 520
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 243
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 345
网页隐藏版一行小说阅读器
HTML、CSS、JS浅浅浅浅浅解
最新发布
lbdking的博客
07-20 1451
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
图片的倒影效果
05-26
要实现图片的倒影效果，可以使用CSS中的 transform 和 gradient 属性。 首先，在 HTML 中添加一个包含图片的容器，例如： ```html ``` 然后，在 CSS 中设置容器的样式，包括宽度、高度、相对定位和背景颜色：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值