高大上网站-CSS3总结1-图片2D处理以及BUG修复

高大上网站-CSS3总结1-图片2D处理以及BUG修复

一,前言:

现在的前端UI相对JS来说,重视并不够。

但是CSS3提供的新特性,将现在的网站赤裸裸的划分为两类:一类还在写着老旧样式,或者通过bootstrap来蹭点CSS3动画。另一类,是用CSS3写着各种特效的网站。

也许国内还感觉不是很明显。但是在国外的网站真的很明显能看出来这些。也许很多时候,国内大部分公司都不愿意将时间和精力放在这上面。另外,愿意这样写的前端工程师也偏少。(你能指望一个实习生写这个?)

但是,这里我要说但是了。

一个好的CSS3样式完全值得公司去花费这样的时间和精力。因为公司网站是公司的脸面,尤其是IT公司。一个酷炫的页面能让你的用户和合作方立马感受到你公司那种状态,那种光靠文字很难表达的状态。

我这里给一些国外的网站,你可以试着去看一看:

https://trampolinepark.com/

http://xmas.evs.com/2018/

趁着这两天有时间,我也需要将自己的CSS3从理论转化为实际的应用。

二,代码:

1.文件目录:

2.HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test2</title>
    <link rel="stylesheet" href="./css/main.css">

</head>
<body>
    <!--title-->
    <!--<header></header>-->
    <div class="imagearea">
        <figure class="style1">
            <img src="./images/22.jpg" alt="" width="800px" height="400px">
            <figcaption>
                <p>图片标题22</p>
                <p>图片注解1</p>
                <p>图片注解2</p>
                <p>图片注解3</p>
            </figcaption>
        </figure>
        <figure class="style1">
            <img src="./images/31.jpg" alt="" width="800px" height="400px">
            <figcaption>
                <p>图片标题31</p>
                <p>图片注解1</p>
                <p>图片注解2</p>
                <p>图片注解3</p>
            </figcaption>
        </figure>
        <figure class="style1">
            <img src="./images/26.jpg" alt="" width="800px" height="400px">
            <figcaption>
                <p>图片标题26</p>
                <p>图片注解1</p>
                <p>图片注解2</p>
                <p>图片注解3</p>
            </figcaption>
        </figure>
        <figure class="style2">
            <img src="./images/27.jpg" alt="" width="700px" height="400px">
            <figcaption>
                <h2>图片标题45</h2>
                <p>图片注解1</p>
                <p>图片注解2</p>
                <div></div>
            </figcaption>
        </figure>
        <figure class="style2">
            <img src="./images/34.jpg" alt="" width="700px" height="400px">
            <figcaption>
                <h2>图片标题45</h2>
                <p>图片注解1</p>
                <p>图片注解2</p>
                <div></div>
            </figcaption>
        </figure>
        <figure class="style2">
            <img src="./images/45.jpg" alt="" width="700px" height="400px">
            <figcaption>
                <h2>图片标题45</h2>
                <p>图片注解1</p>
                <p>图片注解2</p>
                <div></div>
            </figcaption>
        </figure>

    </div>
</body>
</html>

3.CSS3代码:

/*整体样式区*/
*{
    margin  : 0;
    padding : 0;
}

/*图片展览区域—-公共样式*/
div.imagearea figure{
    position : relative;
    overflow : hidden;
    float    : left;
}
div.imagearea figure figcaption{
    position : absolute;
    top      : 0;
    left     : 0;
    padding  : 20px;
    color    : white;
}

/*图片展览区--公共动画属性*/
div.imagearea figure img{
    transition : all .35s;
}
div.imagearea figure figcaption p, div, h1, h2, h3, h4, strong, content{
    transition : all 0.35s;
}

/*图片展览区--自适应样式更改*/
@media screen and (max-width : 600px){
    div.imagearea figure{ width : 100%; }
}
@media screen and (min-width : 601px) and (max-width : 1000px){
    div.imagearea figure{ width : 50%; }
}
@media screen and (min-width : 1001px){
    div.imagearea figure{ width : 33.333%; }
}

/*图片展览区--自定义样式动画1*/
div.imagearea figure.style1 figcaption p:nth-of-type(1){ transition-delay : 0.05s; }
div.imagearea figure.style1 figcaption p:nth-of-type(2){ transition-delay : 0.1s; }
div.imagearea figure.style1 figcaption p:nth-of-type(3){ transition-delay : 0.15s; }
div.imagearea figure.style1 figcaption p:nth-of-type(4){ transition-delay : 0.2s; }
div.imagearea figure.style1{
    background : #2F0000;
}
div.imagearea figure.style1 img{
    opacity   : 0.8;
    transform : translate(-150px, 0);
}
div.imagearea figure.style1 figcaption p{
    margin     : 5px;
    text-align : center;
    color      : gray;
    background : lavender;
    transform  : translate(-150px, 0);
}
div.imagearea figure.style1:hover img{
    transform : translate(-50px, 0);
    opacity   : 0.5;
}
div.imagearea figure.style1:hover figcaption p{
    transform : translate(0, 0);
}

/*图片展览区--自定义动画2*/

div.imagearea figure.style2{
    background : #001700;
}
div.imagearea figure.style2 figcaption{
    width  : 100%;
    height : 100%;
}
div.imagearea figure.style2 figcaption h2{
    margin-top:20%;
    margin-left:25%;
    transform:skew(90deg);
}
div.imagearea figure.style2 figcaption p{
    margin-top:2%;
    margin-left:25%;
    transform:translate(0,50px);
    opacity: 0;
}
div.imagearea figure.style2 figcaption div{
    border : 2px solid white;
    height : 60%;
    width  : 60%;
    position: absolute;
    top:20%;
    left:20%;
    transform:translate(0,-400px) rotate(-180deg);
}
div.imagearea figure.style2:hover figcaption div{
    transform: translate(0,0) rotate(0);
}
div.imagearea figure.style2:hover img{
    opacity: 0.5;
    transform: scale(1.1);
}
div.imagearea figure.style2:hover figcaption p{
    transform:translate(0,0);
    opacity: 1;
}
div.imagearea figure.style2:hover figcaption h2{
    transform:skew(0);
}

三,效果:

四,Github:

源码地址:https://github.com/cureking/CSS3_learning

五,BUG:

我操作的电脑分辨率是1920*1080,HTML文件中我图片的宽度设置原先是700px.

在谷歌浏览器上会出现第四个图片移至第一个图片时,可能出现卡住的情况,页面刷新无效,必须重新打开。但是在IE浏览器上没有这样的问题。

一开始,我也一脸懵逼。

直到我想起我电脑分辨率后,计算了图片在偏移后的剩余量,才发现是图片宽度不足的问题。这是十分巧合的。

另外,由于是我自己弄,所以图片没有标准话,只能自己简单地加工一下。

(由于时间关系,不再赘述。只提一下。)

原文地址:https://www.cnblogs.com/Tiancheng-Duan/p/9116650.html

时间: 2024-10-19 05:54:07

高大上网站-CSS3总结1-图片2D处理以及BUG修复的相关文章

css3实践之图片轮播(Transform,Transition和Animation)

原文:css3实践之图片轮播(Transform,Transition和Animation) 楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效果:(请用chrome打开) 图片轮播 图片自动轮播 Transform 根据我的理解,transform和width.height.background一样,都是dom的属性,不同的是它是css3旗下的,

css3 3d旋转图片立方体特效代码

一.什么是css3 3d旋转 ? 形成一个3D空间: transform-style:preserve-3d    ( 让父元素形成3D,让其子元素在3D空间进行变化 ). 3d场景,在垂直于屏幕的方法,相对于3d多出个z轴,Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向,2d场景,在屏幕上水平和垂直的交叉线x轴和y轴. 二.关于css 3d旋转的相关属性及使用方法 变形属性:transform 3D功能函数 ----3D的位移:transform:translate3d(x,y,z);   

使用CSS3滤镜让图片反转颜色

CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如何使用和转化图片呢?今天我们主要是来讲讲如何使用CSS3滤镜让图片反转颜色. CSS代码 invert滤镜就是为了设置元素的反色效果,他的值设置范围为:0-100%,100%为完全反色,0为显示正常的颜色. .normal {     filter: invert(0%); } .inverted

CSS3仿LOGO图片阴影特效

又一个CSS3阴影效果,个人感觉CSS3的阴影比传统的CSS滤镜实现的阴影更生动,阴影可以是无规则的,而且阴影的大小也是随时变化的,本例子就是用CSs3写成一个Logo,然后再加以阴影特效,重点不是展示阴影效果有多漂亮,而是如何去实现这种CSS3效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

制作由下向上的滚动字幕,字幕内容要求包含网站超级链接和图片超级链接, 使用鼠标移动事件控制字幕运动和停止。 2、在下拉列表框中设置五种以上颜色,选择颜色后, 滚动字幕背景色改变成相应颜色

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <!--        时间:2016-12-28        描述:1.制作由下向上的滚动字幕,字幕内容要求包含网站超级链接和图片超级链接,                   使用鼠标移动事件控制

CSS3 background-image背景图片相关介绍

这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: background-image :设置元素的背景图片. background-repeat :设置如何平铺背景图片. background-attachment :设置背景图片是否固定或随着滚动移动. background-position :设置背景图片的位置. background-size

使用CSS3实现3D图片滑块效果

使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不同的效果. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 实现的基本思路是创建三维图像切片,作为三维物体的另一侧,旋转并显示下一个图像.若浏览器不支持3D变换,一个简单的滑块将作为后备方案.要调用这个插件,首先把图片放在无序列表中

网站更换了域名图片路径批量修改的方法

我们有可能会问,我们要是换域名了,做的网站怎么修改图片路径啊,换域名之后网站所有文章和软件的图片都不显示了,因为织梦上传图片用的是绝对地址,如果域名更换后,之前发布的文章的图片URL是不会跟着改变的,所以我们需要把旧域名替换成新的域名,方法很简单,有一段SQL语句更新一下文章正文内容就行. 复制下面SQL语句进织梦DedeCms的后台,点 系统 -> SQL命令行工具,然后看到一个文本框,在文本框内输入SQL语句,按确定之行.如果操作成功,上面会提示"成功执行x个SQL语句!"

一款基于css3的3D图片翻页切换特效

今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="imgdex"> <figure> <img src="arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress"><