关闭

text-fill-color:仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

时间: 2019-02-01阅读: 1291标签: 效果

发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。
(贫穷使我节省。。。。。。。。。。) 
闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:


看着挺酷炫的还不错 就看了下实现方式。
还挺简单的。

附上demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-fill-color css web前端开发</title>
<style>
html{background: #000;}
.text1{
    margin:60px auto;
    font-size: 120px;
    text-align: center;
    font-weight: bold;
    background:-webkit-gradient(linear,30% 20%,80% 80%,from(#088df3),to(#6a38ec));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.text2{
    margin:60px auto;
    font-size: 120px;
    text-align: center;
    font-weight: bold;
    background: url(https://www.apple.com/v/iphone-xs/a/images/overview/copy_texture_1_medium.jpg) repeat center center;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.record{
    color: #737373;text-align: center;font-size: 24px;position: fixed;bottom: 0%;left: 0;width: 100%;padding: 20px 0;
}
</style>
</head>
<body>
    <div class="text1">文字颜色渐变</div>
    <div class="text2">文字遮罩照片</div>
    <p class="record">by Jerry yu </p>
</body>
</html>
            


来自:https://segmentfault.com/a/1190000018087718


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1953

关闭

父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案

最近使用 vuedraggable 做拖拽效果。不过因为要用到滚动条而使用了 overflow: scroll,导致了两个奇怪的效果,虽然折腾了一段时间,不过最后我还是将这些奇怪的 bug 解决了。

Vue实现网页放大镜效果

组件使用less,请确保已安装loader,本组件为放大镜组件,传参列表为:width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍,picList:必传,传入图片列表

css按钮交互效果

是利用了:active和box-shadow两个特性来实现的。希望通过这个简单效果,能让更多的朋友喜欢上css。首先来说一下:active,就是当用户按住一个a标签的时候的意思,鼠标点击下去但没有松开的时候就这样样子啦。

css实现中间文字,两边横线效果

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

vue 实现文字无缝滚动效果(从下往上滚动)

这种效果需求还是蛮多的,想起之前用JQuery实现的一个无缝滚动( 缅怀过去),是通过jq的animate方法实现的,动画结束之后就将第一个元素appendTo追加到最后面,实现循环滚动特效,不得不感叹技术更新换代真的很快。

JavaScript写一个简单的Ps滤镜效果

CSS3多了一个filter的属性,非常强大(兼容性一般)!我们只要根据输入的值/滑块滑动的值来动态更改css中filter属性的值即可,写一个过滤属性滑块和输入框,互相绑定值,如果用vue就简单了

CSS :placeholder-shown伪类实现输入框浮动文字效果

当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的:label标签是关联表单元素,提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在<input>元素内的文本

CSS3转换

改变元素在页面中位置,大小,角度以及形状的一种方式:2D转换:只在x轴和y轴上发生转换效果,3D转换:增加了z轴的转换效果

vue2实现带地区编号和名称的省市县三级联动效果

我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果。

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!