纯Css3手工打造网页图片效果

最新推荐文章于 2024-09-23 12:13:42 发布
转载 最新推荐文章于 2024-09-23 12:13:42 发布 · 147 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://www.mk2048.com/blog/blog.php?id=0jckb2ijb&title=%E7%BA%AFCss3%E6%89%8B%E5%B7%A5%E6%89%93%E9%80%A0%E7%BD%91%E9%A1%B5%E5%9B%BE%E7%89%87%E6%95%88%E6%9E%9C
文章标签：

#CSS3 #网页图片效果 #css3-transform

  1. 鼠标悬停，图片360度旋转


    效果：
    代码： 
    <style>
            .rotate-demo {
                width: 220px;
                height: 220px;
                margin: 0 auto;
                background: no-repeat url("images/author.jpg") left top;
                -webkit-background-size: 220px 220px;
                -moz-background-size: 220px 220px;
                background-size: 220px 220px;
                -webkit-border-radius: 110px;
                border-radius: 110px;
                -webkit-transition: -webkit-transform 2s ease-out;
                -moz-transition: -moz-transform 2s ease-out;
                -o-transition: -o-transform 2s ease-out;
                -ms-transition: -ms-transform 2s ease-out;
            }
     
                .rotate-demo:hover {
                    -webkit-transform: rotateZ(360deg);
                    -moz-transform: rotateZ(360deg);
                    -o-transform: rotateZ(360deg);
                    -ms-transform: rotateZ(360deg);
                    transform: rotateZ(360deg);
                }
        </style>
     
    <div class="rotate-demo"></div>

    知识点：CSS3 的transform 属性可以向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。设置为rotateZ( angle) 实现DOM元素沿着 Z 轴的 3D 旋转，相关的设置还有rotate、rotate3d、rotateX、rotateY。

  2. 图片悬停放大



    效果：

    代码： 
    CSS3：
    <style type="text/css">
        .img-container {
            background-color: #000;
            width: 220px;
            height: 220px;
            margin: 20px 50px;
        }
     
        .img {
            -webkit-transform: scale(0.6);
            -moz-transform: scale(0.6);
            -o-transform: scale(0.6);
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
            -o-transition-duration: 0.5s;
        }
     
            .img img {
                padding: 1px;
                border-radius: 10px;
                border: 1px solid #fff;
            }
     
            .img:hover {
                -webkit-transform: scale(0.8);
                -webkit-box-shadow: 0px 0px 30px #ccc;
                -moz-transform: scale(0.8);
                -moz-box-shadow: 0px 0px 30px #ccc;
                -o-transform: scale(0.8);
                -o-box-shadow: 0px 0px 30px #ccc;
            }
    </style>
     
    HTML：
    <div class="img-container">
                <div class="img">
                    <img src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208151443229-2044520835.jpg">
                </div>
            </div>

    知识点： 同样用到CSS3的transform属性，设置scale(x,y)，实现DOM元素的2D缩放转换，相关的还有scale3d、scaleX、scaleY、scaleZ

  3. 实现3D图片旋转相册

    效果:

    代码: 
    CSS:
    <style>
            .carousel-container {
                margin: 20px auto;
                width: 210px;
                height: 140px;
                position: relative;
            }
     
            #carousel {
                width: 100%;
                height: 100%;
                position: absolute;
                transform-style: preserve-3d;
                animation: rotation 20s infinite linear;
            }
     
                #carousel:hover {
                    animation-play-state: paused;
                }
     
                #carousel figure {
                    display: block;
                    position: absolute;
                    width: 186px;
                    height: 116px;
                    left: 10px;
                    top: 10px;
                    background: black;
                    overflow: hidden;
                    border: solid 1px black;
                }
     
                    #carousel figure:nth-child(1) {
                        transform: rotateY(0deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(2) {
                        transform: rotateY(40deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(3) {
                        transform: rotateY(80deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(4) {
                        transform: rotateY(120deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(5) {
                        transform: rotateY(160deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(6) {
                        transform: rotateY(200deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(7) {
                        transform: rotateY(240deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(8) {
                        transform: rotateY(280deg) translateZ(288px);
                    }
     
                    #carousel figure:nth-child(9) {
                        transform: rotateY(320deg) translateZ(288px);
                    }
     
                #carousel .carousel-img {
                    -webkit-filter: grayscale(1);
                    cursor: pointer;
                    transition: all .5s ease;
                    border: none;
                }
     
                    #carousel .carousel-img:hover {
                        -webkit-filter: grayscale(0);
                        transform: scale(1.2,1.2);
                    }
     
            @keyframes rotation {
                from {
                    transform: rotateY(0deg);
                }
     
                to {
                    transform: rotateY(360deg);
                }
            }
        </style>
     
    HTML:
     
    <div class="carousel-container">
            <div id="carousel">
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155254932-406125762.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155256635-1168577244.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155257354-505827798.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155258072-866130501.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155258697-1207588864.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155259244-459311473.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155300213-66837727.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155300760-2026101054.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="http://images2015.cnblogs.com/blog/171569/201702/171569-20170208155301322-1264968106.jpg" alt=""></figure>
            </div>
        </div>

    知识点: 还是凭借CSS3的transform属性以及animation属性，使用rotateY定义元素沿着 Y 轴的进行 3D 旋转，使用translateZ定义元素沿着Z轴进行 3D 转换；
    同时设置元素的animation属性实现动画效果，本文中定义如下：
    animation: rotation 20s infinite linear;

    animation-name（需要绑定到选择器的 keyframe 名称）：rotation的动画
    animation-duration（完成动画所花费的时间）：20s
    animation-iteration-count（动画应该播放的次数）：infinite（无限次）
    animation-timing-function(动画的速度曲线)：linear（动画从头到尾的速度是相同的）

刚开工，暂时没有任务，不想码代码，翻了翻以前下载的各种代码，整理整理，发现真的不知道自己怎么有那么多精力收集了那么多乱七八糟的东西，现在整理起来又要花费大量的时间！

感想：

u=2957405095,253685944&fm=23&gp=0

“只要我不醒来，世界就不存在”；

其实我们从来不会错过什么，遇到了是缘，没有遇到，其实相对来说ta就是没有存在过！

2017，简简单单就好！

炫酷纯css网页界面
10-22
纯CSS实现炫酷网页UI登录动效！！！基于CSS3 实现的动态科技感登录界面！也可用作网页菜单界面
纯手工打造黑色经典菜单
06-04
总结起来，"纯手工打造黑色经典菜单"项目展示了如何结合jQuery的动态效果和CSS的样式设计，创建一款具有专业视觉效果的黑色菜单。开发者通过熟练运用这两种技术，实现了菜单的交互性和视觉吸引力，同时，通过合理的...
html css图片效果,css，css3实现各种图片效果总结
weixin_42513215的博客
06-03 807
按照常规的理解，处理图像的效果都应该是设计师的工具，甚至这些事情应该都交给PhotoShop之类的设计软件来完成。但是随着css技术的发展以及css3的出现，各大厂商的浏览器的兼容性越来越好，利用css技术来处理和实现图片的各种效果变得越来越便捷。css及css3中的各种属性将很容易的帮助我们实现各种想要的图片效果。这里我们就来谈一谈使用css和css3来实现各种图片效果。首先可以学习Gxl网相关...
CSS3边框图片效果
lql_h的博客
04-13 5193
属性解释 CSS3提供了一个新的属性集合，用这几个属性可以嵌入图片形式的边框。这样，边框就可以自定义了。 1.border-image-source//引入背景图片地址 2.border-image-slice//切割引入背景图片 3.border-image-width//边框图片的宽度 4.border-image-repeat//边框背景图片的排列方式 5.border-imag...
css3之图片展开效果和盾牌飞入
m0_67932301的博客
05-27 667
css3之图片翻转和盾牌飞入
手工作品：纯前端技术打造的网页前台
本文档标题为“采用html+div+css+js技术 纯手写的一个网页前台”，这表明我们即将探讨的是一项由HTML、DIV、CSS和JavaScript组成的基础网页前台的实现过程。这些技术是构建动态、交互式网站的基石，它们各自扮演着...
纯手工打造起点中文网模板分享
标题中提到的“纯手工版【起点中文网】”指的是利用手工编码技术创建的一个网站，与商业化的起点中文网在结构上有所类似，但技术实现上更加基础和原始。手工编码通常意味着开发者从零开始，不依赖于任何框架或高级...
纯手工代码打造的图书管理系统教程
在这个项目中，初学者将学习如何使用CSS来美化他们的网页，例如修改背景颜色、设置文本样式、调整图片大小和布局等。CSS分为内部样式、外部样式和内联样式，通常推荐使用外部样式表来管理样式的复用和维护。 ### ...
html图片滤色,CSS3图片混合（Blend）效果详解
weixin_30954817的博客
06-04 699
在Photoshop软件中，混合是将两个图层的色彩值进行合成，从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。CSS3中也引入了blend模式，对照Photoshop中的实现，有助于我们深入理解该方法的使用.Opacity不透明度C=d*A+(1-d)*B相对于不透明度而言，其反义就是透明度。这两个术语之间的关系就类似于正负之间的关系：100%的不透明度就是0%的透明度。该...
5种CSS图片效果及效果预览
10-16
5种CSS图片效果及效果预览-阴影效果，双边框效果，图片外框效果， 水印效果，为图片添加说明文字
纯CSS3实现图片展示特效
px459的博客
07-17 2620
Web浏览器端的特效越来越让人兴奋，通过CSS和JavaScript，各种意想不到的绚丽效果都能用简单的几句代码完成。本文中要实现的一个纯CSS3的图片展示特效，以前只能用JavaScript实现，可想而知会受到多方面的限制，特别是性能。而今天我们将用简单的CSS3代码实现，你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。 观看演示 HTML代码 通过上的演示，估计你已经能猜
css3实现3d图片旋转效果
li5466667的博客
04-29 4991
1.实现原理 a.首先所有的图片的容器position:fixed，叠加在一起，然后一次设置rotateY分别为（36*i）deg ，i取0到10 ；所有图片会相交成一个类似花的形状 然后为每个图片的容器设置translateZ，所有图片会从对应的角度向外移动，扩展成一个大圆，即下图效果 b.创建动画，让rotateY每次增加90deg旋转起来即可。同时，为了观察效果，让rotateX依次上下移动20deg。 2.html文件 <!DOCTYPE html> <html lang="en
CSS3实现图片超立体3D效果
benyoulai5的专栏
09-07 7782
我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效，觉得效果非常棒，其实话说回来，这玩意儿的实现真的非常简单，主要是创意不错。先来看看效果图。 如何，看上去挺不错吧，倾斜、阴影，让一张很普通的图片变得如此霸气。 另外你也可以在这里查看案例演示，鼠标滑过图片时会出现这样的效果。 那么接下来我们分析一下源码吧，显示html代码，非常简单： div o
CSS3图片交互动画效果集锦
最新发布
weixin_30248619的博客
09-23 883
本文还有配套的精品资源，点击获取 简介：CSS3图片滑过文字动画效果利用CSS3特性提升网页设计的互动性和视觉吸引力。本系列包含8款效果代码，涵盖遮罩层、动态文字展示、多样化动画切换、CSS3选择器应用、过渡和动画属性控制、响应式设计兼容性、自定义字体与图标应用，以及图片优化技术，适合网页设计师学习和应用。 1. 遮罩层效果实现 在现代网页设计中，添加遮罩层...
图片展示html css代码,纯CSS3实现图片展示特效
weixin_39653717的博客
06-24 819
Web浏览器端的特效越来越让人兴奋，通过CSS和JavaScript，各种意想不到的绚丽效果都能用简单的几句代码完成。本文中要实现的一个纯CSS3的图片展示特效，以前只能用JavaScript实现，可想而知会受到多方面的限制，特别是性能。而今天我们将用简单的CSS3代码实现，你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。观看演示HTML代码通过上的演示，估计你已经能猜到，它的HTML结果应该...
利用CSS3动画效果制作照片墙
muyuxifeng的博客
03-27 1365
HTML页面中写一个盒子，盒子里面放10张图片。让这10张图片，随意摆放(给图片设置旋转角度和在盒子中的所处位置)，再利用CSS3动画的技术，对这10张图片，设置鼠标悬停在某一张图片上时，该图片会放大、会由原来的角度旋转到正常的角度，同时这张被鼠标选中的图片会自动浮于所有图片的上方，以便图片能够被完全展示出来，为了增加图片的立体感 给被选中的图片设置了阴影效果。纯CSS3制作动态照片墙。
css实现图片虚化_css3实现毛玻璃（图片模糊）效果_觉唯设计
weixin_39629352的博客
12-24 364
**首先看效果****引入下题**HTML:CSS3:#blur{filter:blur(10px);-webkit-filter:blur(10px);-moz-filter:blur(10px);-ms-filter:blur(10px);-o-filter:blur(10px);}**看个复杂点的例子**结合CSS3毛玻璃实现微信版的发红包看完整照片效果。可以完美的兼容移动端与PC端。代码如...
基于纯CSS创建各种图形形状
极北三少
11-09 544
CSS也称作层叠样式表，用于控制网页内容显示情况，它可以控制HTML无法控制的许多属性，利用CSS能实现多种多样的动画效果，之前我们分享过很多CSS3实现的特效、动画及一些游戏，今天再来教大家学习如何使用简单的CSS创建不同类型的平面图形。   　　实例分享 　　矩形 1 .rectangle {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值